From d6e17e1554462a29c9456ddc3a8a8c816e1a6f80 Mon Sep 17 00:00:00 2001 From: Inga Kirschnick Date: Mon, 19 Jun 2023 18:33:36 +0200 Subject: [PATCH] Update for real data visualization --- .../js/CorpusAnalysis/CorpusAnalysisApp.js | 140 ++++++++++-------- .../js/ResourceLists/CorpusTextInfoList.js | 16 +- app/templates/corpora/analysis.html.j2 | 20 +-- 3 files changed, 94 insertions(+), 82 deletions(-) diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js index 077326a3..42ecc7be 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js @@ -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 = Corpus text count: ${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); diff --git a/app/static/js/ResourceLists/CorpusTextInfoList.js b/app/static/js/ResourceLists/CorpusTextInfoList.js index 6e8e8310..7cab68eb 100644 --- a/app/static/js/ResourceLists/CorpusTextInfoList.js +++ b/app/static/js/ResourceLists/CorpusTextInfoList.js @@ -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 }; } diff --git a/app/templates/corpora/analysis.html.j2 b/app/templates/corpora/analysis.html.j2 index 1452d2d0..7aac79bd 100644 --- a/app/templates/corpora/analysis.html.j2 +++ b/app/templates/corpora/analysis.html.j2 @@ -40,7 +40,7 @@
-

Number of tokens

+

Number of tokens

@@ -48,7 +48,7 @@
-

Number of sentences

+

Number of sentences

@@ -56,7 +56,7 @@
-

Number of unique words

+

Number of unique words

@@ -64,7 +64,7 @@
-

Number of unique lemmas

+

Number of unique lemmas

@@ -72,7 +72,7 @@
-

Number of unique pos

+

Number of unique pos

@@ -80,7 +80,7 @@
-

Number of unique simple_pos

+

Number of unique simple_pos

@@ -90,7 +90,7 @@
- Text information + Text Information Overview
@@ -98,7 +98,7 @@
-
+
Text proportions within the corpus @@ -106,7 +106,7 @@
-
+
Word frequencies @@ -114,7 +114,7 @@
-
+
Word distributions