mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 10:34:17 +00:00
Update for real data visualization
This commit is contained in:
Inga Kirschnick
parent
11b697145b
commit
d6e17e1554
@ -34,22 +34,22 @@ class CorpusAnalysisApp {
|
||||
.then(
|
||||
cQiCorpus => {
|
||||
this.data.corpus = {o: cQiCorpus};
|
||||
this.data.corpus.o.getVisualizationData().then(data => console.log(data));
|
||||
// this.data.corpus.o.getVisualizationData()
|
||||
// .then(
|
||||
// (visualizationData) => {
|
||||
// console.log(visualizationData);
|
||||
// this.renderGeneralCorpusInfo(visualizationData);
|
||||
// this.renderTextInfoList(visualizationData);
|
||||
// this.renderTextProportionsGraphic(visualizationData);
|
||||
// }
|
||||
// );
|
||||
this.data.corpus.o.getVisualizationData()
|
||||
.then(
|
||||
(data) => {
|
||||
console.log(data);
|
||||
this.renderGeneralCorpusInfo(data);
|
||||
this.renderTextInfoList(data);
|
||||
this.renderTextProportionsGraphic(data);
|
||||
this.renderWordFrequenciesGraphic(data);
|
||||
}
|
||||
);
|
||||
this.data.corpus.o.getCorpusData()
|
||||
.then(corpusData => {
|
||||
this.renderGeneralCorpusInfo(corpusData);
|
||||
this.renderTextInfoList(corpusData);
|
||||
this.renderTextProportionsGraphic(corpusData);
|
||||
this.renderWordFrequenciesGraphic(corpusData);
|
||||
// this.renderGeneralCorpusInfo(corpusData);
|
||||
// this.renderTextInfoList(corpusData);
|
||||
// this.renderTextProportionsGraphic(corpusData);
|
||||
// this.renderWordFrequenciesGraphic(corpusData);
|
||||
this.renderWordDistributionsGraphic(corpusData);
|
||||
});
|
||||
// TODO: Don't do this hgere
|
||||
@ -115,66 +115,78 @@ class CorpusAnalysisApp {
|
||||
}
|
||||
|
||||
renderGeneralCorpusInfo(corpusData) {
|
||||
document.querySelector('.corpus-num-tokens').innerHTML = corpusData.corpus.counts.token;
|
||||
document.querySelector('.corpus-num-s').innerHTML = corpusData.corpus.counts.s;
|
||||
// corpusGeneralInfoListElement.querySelector('.corpus-text-count').innerHTML = <b>Corpus text count:</b> ${Object.entries(corpusData.text).length;
|
||||
document.querySelector('.corpus-num-unique-words').innerHTML = Object.entries(corpusData.corpus.freqs.word).length;
|
||||
document.querySelector('.corpus-num-unique-lemmas').innerHTML = Object.entries(corpusData.corpus.freqs.lemma).length;
|
||||
document.querySelector('.corpus-num-unique-pos').innerHTML = Object.entries(corpusData.corpus.freqs.pos).length;
|
||||
document.querySelector('.corpus-num-unique-simple-pos').innerHTML = Object.entries(corpusData.corpus.freqs.simple_pos).length;
|
||||
document.querySelector('.corpus-num-tokens').innerHTML = corpusData.corpus.lexicon[0].counts.token;
|
||||
document.querySelector('.corpus-num-s').innerHTML = corpusData.corpus.lexicon[0].counts.s;
|
||||
document.querySelector('.corpus-num-unique-words').innerHTML = Object.entries(corpusData.corpus.lexicon[0].freqs.word).length;
|
||||
document.querySelector('.corpus-num-unique-lemmas').innerHTML = Object.entries(corpusData.corpus.lexicon[0].freqs.lemma).length;
|
||||
document.querySelector('.corpus-num-unique-pos').innerHTML = Object.entries(corpusData.corpus.lexicon[0].freqs.pos).length;
|
||||
document.querySelector('.corpus-num-unique-simple-pos').innerHTML = Object.entries(corpusData.corpus.lexicon[0].freqs.simple_pos).length;
|
||||
}
|
||||
|
||||
renderTextInfoList(corpusData) {
|
||||
// let corpusTextInfoListElement = document.querySelector('.corpus-text-info-list');
|
||||
// let corpusTextInfoList = new CorpusTextInfoList(corpusTextInfoListElement);
|
||||
// for (let text of Object.values(corpusData.text)) {
|
||||
// text.values.title = corpusData.value_lookups.text.title[text.values.title];
|
||||
// }
|
||||
// corpusTextInfoList.add(Object.values(corpusData.text));
|
||||
let corpusTextInfoListElement = document.querySelector('.corpus-text-info-list');
|
||||
let corpusTextInfoList = new CorpusTextInfoList(corpusTextInfoListElement);
|
||||
let texts = corpusData.text.lexicon;
|
||||
let textData = [];
|
||||
for (let i = 0; i < Object.entries(texts).length; i++) {
|
||||
let resource = {
|
||||
title: corpusData.lookups.text[i].title,
|
||||
publishing_year: corpusData.lookups.text[i].publishing_year,
|
||||
num_tokens: corpusData.text.lexicon[i].counts.token,
|
||||
num_sentences: corpusData.text.lexicon[i].counts.s,
|
||||
num_unique_words: Object.entries(corpusData.text.lexicon[i].freqs.word).length,
|
||||
num_unique_lemmas: Object.entries(corpusData.text.lexicon[i].freqs.lemma).length,
|
||||
num_unique_pos: Object.entries(corpusData.text.lexicon[i].freqs.pos).length,
|
||||
num_unique_simple_pos: Object.entries(corpusData.text.lexicon[i].freqs.simple_pos).length
|
||||
};
|
||||
|
||||
textData.push(resource);
|
||||
}
|
||||
corpusTextInfoList.add(textData);
|
||||
|
||||
// let textCountChipElement = document.querySelector('.text-count-chip');
|
||||
// textCountChipElement.innerHTML = `Text count: ${Object.values(corpusData.text).length}`;
|
||||
let textCountChipElement = document.querySelector('.text-count-chip');
|
||||
textCountChipElement.innerHTML = `Text count: ${Object.values(corpusData.text.lexicon).length}`;
|
||||
}
|
||||
|
||||
renderTextProportionsGraphic(corpusData) {
|
||||
// let textProportionsGraphicElement = document.querySelector('#text-proportions-graphic');
|
||||
// let texts = Object.values(corpusData.text);
|
||||
// let graphData = [
|
||||
// {
|
||||
// values: texts.map(text => text.counts.token),
|
||||
// labels: texts.map(text => `${text.values.title} (${text.values.publishing_year})`),
|
||||
// type: 'pie'
|
||||
// }
|
||||
// ];
|
||||
// let graphLayout = {
|
||||
// height: 400,
|
||||
// width: 500
|
||||
// };
|
||||
// Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout);
|
||||
let textProportionsGraphicElement = document.querySelector('#text-proportions-graphic');
|
||||
let texts = Object.entries(corpusData.text.lexicon);
|
||||
let graphData = [
|
||||
{
|
||||
values: texts.map(text => text[1].counts.token),
|
||||
labels: texts.map(text => `${corpusData.lookups.text[text[0]].title} (${corpusData.lookups.text[text[0]].publishing_year})`),
|
||||
type: 'pie'
|
||||
}
|
||||
];
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 600
|
||||
};
|
||||
Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout);
|
||||
}
|
||||
|
||||
renderWordFrequenciesGraphic(corpusData) {
|
||||
// let wordFrequenciesGraphicElement = document.querySelector('#word-frequencies-graphic');
|
||||
// let words = Object.entries(corpusData.value_lookups.token.word);
|
||||
// let texts = Object.values(corpusData.text);
|
||||
// let graphData = [];
|
||||
// for (let word of words) {
|
||||
// let data = {
|
||||
// x: texts.map(text => `${text.values.title} (${text.values.publishing_year})`),
|
||||
// y: texts.map(text => text.freqs.word[word[0]]),
|
||||
// name: word[1],
|
||||
// type: 'bar'
|
||||
// };
|
||||
// graphData.push(data);
|
||||
// }
|
||||
let wordFrequenciesGraphicElement = document.querySelector('#word-frequencies-graphic');
|
||||
let words = Object.entries(corpusData.corpus.lexicon[0].freqs.word).sort((a, b) => b[1] - a[1]).slice(0, 5);
|
||||
let texts = Object.entries(corpusData.text.lexicon);
|
||||
let graphData = [];
|
||||
for (let word of words) {
|
||||
let data = {
|
||||
x: texts.map(text => `${corpusData.lookups.text[text[0]].title} (${corpusData.lookups.text[text[0]].publishing_year})`),
|
||||
y: texts.map(text => text[1].freqs.word[word[0]]),
|
||||
name: corpusData.lookups.word[word[0]],
|
||||
type: 'bar'
|
||||
};
|
||||
graphData.push(data);
|
||||
}
|
||||
|
||||
// let graphLayout = {
|
||||
// height: 400,
|
||||
// width: 500,
|
||||
// barmode: 'stack',
|
||||
// type: 'bar'
|
||||
// };
|
||||
// Plotly.newPlot(wordFrequenciesGraphicElement, graphData, graphLayout);
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 600,
|
||||
barmode: 'stack',
|
||||
type: 'bar'
|
||||
};
|
||||
Plotly.newPlot(wordFrequenciesGraphicElement, graphData, graphLayout);
|
||||
}
|
||||
|
||||
renderWordDistributionsGraphic(corpusData) {
|
||||
@ -191,7 +203,7 @@ class CorpusAnalysisApp {
|
||||
// var layout = {
|
||||
// title: 'Marker Size',
|
||||
// showlegend: false,
|
||||
// height: 600,
|
||||
// height: 500,
|
||||
// width: 600
|
||||
// };
|
||||
// Plotly.newPlot(wordDistributionGraphicElement, data, layout);
|
||||
|
||||
@ -83,14 +83,14 @@ class CorpusTextInfoList extends ResourceList {
|
||||
|
||||
mapResourceToValue(corpusTextData) {
|
||||
return {
|
||||
title: corpusTextData.values.title,
|
||||
publishing_year: corpusTextData.values.publishing_year,
|
||||
num_tokens: corpusTextData.counts.token,
|
||||
num_sentences: corpusTextData.counts.s,
|
||||
num_unique_words: Object.entries(corpusTextData.freqs.word).length,
|
||||
num_unique_lemmas: Object.entries(corpusTextData.freqs.lemma).length,
|
||||
num_unique_pos: Object.entries(corpusTextData.freqs.pos).length,
|
||||
num_unique_simple_pos: Object.entries(corpusTextData.freqs.simple_pos).length
|
||||
title: corpusTextData.title,
|
||||
publishing_year: corpusTextData.publishing_year,
|
||||
num_tokens: corpusTextData.num_tokens,
|
||||
num_sentences: corpusTextData.num_sentences,
|
||||
num_unique_words: corpusTextData.num_unique_words,
|
||||
num_unique_lemmas: corpusTextData.num_unique_lemmas,
|
||||
num_unique_pos: corpusTextData.num_unique_pos,
|
||||
num_unique_simple_pos: corpusTextData.num_unique_simple_pos
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center;">
|
||||
<p>Number of tokens</p>
|
||||
<p><b>Number of tokens</b></p>
|
||||
<span class="card-title corpus-num-tokens"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,7 +48,7 @@
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p>Number of sentences</p>
|
||||
<p><b>Number of sentences</b></p>
|
||||
<span class="card-title corpus-num-s"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,7 +56,7 @@
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p>Number of unique words</p>
|
||||
<p><b>Number of unique words</b></p>
|
||||
<span class="card-title corpus-num-unique-words"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +64,7 @@
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p>Number of unique lemmas</p>
|
||||
<p><b>Number of unique lemmas</b></p>
|
||||
<span class="card-title corpus-num-unique-lemmas"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,7 +72,7 @@
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p>Number of unique pos</p>
|
||||
<p><b>Number of unique pos</b></p>
|
||||
<span class="card-title corpus-num-unique-pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -80,7 +80,7 @@
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p>Number of unique simple_pos</p>
|
||||
<p><b>Number of unique simple_pos</b></p>
|
||||
<span class="card-title corpus-num-unique-simple-pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,7 +90,7 @@
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text information</span>
|
||||
<span class="card-title">Text Information Overview</span>
|
||||
<div class="chip text-count-chip" style="background-color:#6b3f89; color:white""></div>
|
||||
<div class="corpus-text-info-list no-autoinit"></div>
|
||||
</div>
|
||||
@ -98,7 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s3">
|
||||
<div class="col s4">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text proportions within the corpus</span>
|
||||
@ -106,7 +106,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s3">
|
||||
<div class="col s4">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Word frequencies</span>
|
||||
@ -114,7 +114,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s6">
|
||||
<div class="col s4">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Word distributions</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user