Skip to content
Snippets Groups Projects
Commit e194ce75 authored by Inga Kirschnick's avatar Inga Kirschnick
Browse files

Add token category selection for freqs graph

parent 19e01d67
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
app/static/js/CorpusAnalysis/CQiClient.js
+ 17662
− 167
View file @ e194ce75
This diff is collapsed.
app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
+ 60
− 40
View file @ e194ce75
...@@ -34,25 +34,26 @@ class CorpusAnalysisApp { ...@@ -34,25 +34,26 @@ class CorpusAnalysisApp {
.then( .then(
cQiCorpus => { cQiCorpus => {
this.data.corpus = {o: cQiCorpus}; this.data.corpus = {o: cQiCorpus};
this.data.corpus.o.getVisualizationData() // this.data.corpus.o.getVisualizationData()
.then( // .then(
(data) => { // (data) => {
console.log(data); // console.log(data);
this.renderGeneralCorpusInfo(data); // this.renderGeneralCorpusInfo(data);
this.renderTextInfoList(data); // this.renderTextInfoList(data);
this.renderTextProportionsGraphic(data); // this.renderTextProportionsGraphic(data);
this.renderWordFrequenciesGraphic(data); // this.renderWordFrequenciesGraphic(data);
this.renderBoundsGraphic(data); // this.renderBoundsGraphic(data);
} // }
); // );
// this.data.corpus.o.getCorpusData() this.data.corpus.o.getCorpusData()
// .then(corpusData => { .then(corpusData => {
// // this.renderGeneralCorpusInfo(corpusData); console.log(corpusData);
// // this.renderTextInfoList(corpusData); this.renderGeneralCorpusInfo(corpusData);
// // this.renderTextProportionsGraphic(corpusData); this.renderTextInfoList(corpusData);
// // this.renderWordFrequenciesGraphic(corpusData); this.renderTextProportionsGraphic(corpusData);
// // this.renderWordDistributionsGraphic(corpusData); this.renderFrequenciesGraphic(corpusData);
// }); this.renderBoundsGraphic(corpusData);
});
// TODO: Don't do this hgere // TODO: Don't do this hgere
cQiCorpus.updateDb(); cQiCorpus.updateDb();
this.enableActionElements(); this.enableActionElements();
...@@ -161,36 +162,53 @@ class CorpusAnalysisApp { ...@@ -161,36 +162,53 @@ class CorpusAnalysisApp {
} }
]; ];
let graphLayout = { let graphLayout = {
height: 600, // height: 600,
width: 900 // width: 900
}; };
Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout); let config = {responsive: true};
Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout, config);
} }
renderWordFrequenciesGraphic(corpusData) { renderFrequenciesGraphic(corpusData) {
let wordFrequenciesGraphicElement = document.querySelector('#word-frequencies-graphic'); let frequenciesTokenCategoryDropdownElement = document.querySelector('[data-target="frequencies-token-category-dropdown"]');
let words = Object.entries(corpusData.corpus.lexicon[0].freqs.word).sort((a, b) => b[1] - a[1]).slice(0, 5); let frequenciesTokenCategoryDropdownListElement = document.querySelector("#frequencies-token-category-dropdown");
let frequenciesGraphicElement = document.querySelector('#frequencies-graphic');
let texts = Object.entries(corpusData.text.lexicon); let texts = Object.entries(corpusData.text.lexicon);
frequenciesTokenCategoryDropdownListElement.addEventListener('click', (event) => {
frequenciesTokenCategoryDropdownElement.firstChild.textContent = event.target.innerHTML;
this.renderFrequenciesGraphic(corpusData);
});
let tokenCategory = frequenciesTokenCategoryDropdownElement.firstChild.textContent.toLowerCase();
let graphData = this.createFrequenciesGraphData(tokenCategory, texts, corpusData);
let graphLayout = {
barmode: 'stack',
type: 'bar'
};
let config = {responsive: true};
Plotly.newPlot(frequenciesGraphicElement, graphData, graphLayout, config);
}
createFrequenciesGraphData(category, texts, corpusData) {
let graphData = []; let graphData = [];
for (let word of words) { let sortedData = Object.entries(corpusData.corpus.lexicon[0].freqs[category]).sort((a, b) => b[1] - a[1]).slice(0, 5);
console.log(texts.map(text => text[1].freqs.word[word[0]]));
for (let item of sortedData) {
let data = { let data = {
x: texts.map(text => `${corpusData.lookups.text[text[0]].title} (${corpusData.lookups.text[text[0]].publishing_year})`), 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]]), y: texts.map(text => text[1].freqs[category][item[0]]),
name: corpusData.lookups.word[word[0]], name: corpusData.lookups[category][item[0]],
type: 'bar' type: 'bar'
}; };
graphData.push(data); graphData.push(data);
} }
let graphLayout = { return graphData;
height: 600,
width: 900,
barmode: 'stack',
type: 'bar'
};
Plotly.newPlot(wordFrequenciesGraphicElement, graphData, graphLayout);
} }
renderBoundsGraphic(corpusData) { renderBoundsGraphic(corpusData) {
...@@ -211,8 +229,8 @@ class CorpusAnalysisApp { ...@@ -211,8 +229,8 @@ class CorpusAnalysisApp {
}]; }];
let graphLayout = { let graphLayout = {
height: 600, // height: 600,
width: 2000, // width: 2000,
barmode: 'stack', barmode: 'stack',
type: 'bar', type: 'bar',
showgrid: false, showgrid: false,
...@@ -225,7 +243,9 @@ class CorpusAnalysisApp { ...@@ -225,7 +243,9 @@ class CorpusAnalysisApp {
showticklabels: false showticklabels: false
} }
}; };
let config = {responsive: true};
Plotly.newPlot(boundsGraphicElement, graphData, graphLayout); Plotly.newPlot(boundsGraphicElement, graphData, graphLayout, config);
} }
} }
app/templates/corpora/analysis.html.j2
+ 15
− 8
View file @ e194ce75
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="col s2"> <div class="col s2">
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white"> <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;"> <div class="card-content" style="padding:10px !important; text-align:center;">
<p><b>Number of tokens</b></p> <p><b>Tokens</b></p>
<span class="card-title corpus-num-tokens"></span> <span class="card-title corpus-num-tokens"></span>
</div> </div>
</div> </div>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div class="col s2"> <div class="col s2">
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white"> <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"> <div class="card-content" style="padding:10px !important; text-align:center">
<p><b>Number of sentences</b></p> <p><b>Sentences</b></p>
<span class="card-title corpus-num-s"></span> <span class="card-title corpus-num-s"></span>
</div> </div>
</div> </div>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<div class="col s2"> <div class="col s2">
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white"> <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"> <div class="card-content" style="padding:10px !important; text-align:center">
<p><b>Number of unique words</b></p> <p><b>Unique words</b></p>
<span class="card-title corpus-num-unique-words"></span> <span class="card-title corpus-num-unique-words"></span>
</div> </div>
</div> </div>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<div class="col s2"> <div class="col s2">
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white"> <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"> <div class="card-content" style="padding:10px !important; text-align:center">
<p><b>Number of unique lemmas</b></p> <p><b>Unique lemmas</b></p>
<span class="card-title corpus-num-unique-lemmas"></span> <span class="card-title corpus-num-unique-lemmas"></span>
</div> </div>
</div> </div>
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<div class="col s2"> <div class="col s2">
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white"> <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"> <div class="card-content" style="padding:10px !important; text-align:center">
<p><b>Number of unique pos</b></p> <p><b>Unique pos</b></p>
<span class="card-title corpus-num-unique-pos"></span> <span class="card-title corpus-num-unique-pos"></span>
</div> </div>
</div> </div>
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<div class="col s2"> <div class="col s2">
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white"> <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"> <div class="card-content" style="padding:10px !important; text-align:center">
<p><b>Number of unique simple_pos</b></p> <p><b>Unique simple_pos</b></p>
<span class="card-title corpus-num-unique-simple-pos"></span> <span class="card-title corpus-num-unique-simple-pos"></span>
</div> </div>
</div> </div>
...@@ -110,13 +110,20 @@ ...@@ -110,13 +110,20 @@
<div class="col s6"> <div class="col s6">
<div class="card hoverable"> <div class="card hoverable">
<div class="card-content"> <div class="card-content">
<span class="card-title">Word frequencies</span> <span class="card-title"><a class="dropdown-trigger btn" data-target="frequencies-token-category-dropdown">Word<i class="material-icons right">arrow_drop_down</i></a> Frequencies</span>
<ul id="frequencies-token-category-dropdown" class="dropdown-content">
<li><a data-token-category="word">Word</a></li>
<li><a data-token-category="lemma">Lemma</a></li>
<li><a data-token-category="pos">Pos</a></li>
<li><a data-token-category="simple_pos">Simple_pos</a></li>
</ul>
<p>within the texts of the 5 most frequent words in the corpus</p> <p>within the texts of the 5 most frequent words in the corpus</p>
<div id="word-frequencies-graphic"></div> <div id="frequencies-graphic"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card hoverable"> <div class="card hoverable">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment