sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-25 10:54:18 +00:00
Code Issues Projects Releases Wiki Activity

Add token category selection for freqs graph

Browse Source
This commit is contained in:
Inga Kirschnick 2023-06-21 17:05:36 +02:00
parent 19e01d6709
commit e194ce7541
3 changed files with 17739 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17725
app/static/js/CorpusAnalysis/CQiClient.js
View File

File diff suppressed because it is too large Load Diff

98
app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
View File

@ -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 {
} }
]; ];
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 {
}]; }];
let graphLayout = { let graphLayout = {
height: 600, // height: 600,
width: 2000, // width: 2000,
barmode: 'stack', barmode: 'stack',
type: 'bar', type: 'bar',
showgrid: false, showgrid: false,
@ -226,6 +244,8 @@ class CorpusAnalysisApp {
} }
}; };
Plotly.newPlot(boundsGraphicElement, graphData, graphLayout); let config = {responsive: true};
Plotly.newPlot(boundsGraphicElement, graphData, graphLayout, config);
} }
} }

23
app/templates/corpora/analysis.html.j2
View File

@ -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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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">