mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-03 20:02:47 +00:00
Add token category selection for freqs graph
This commit is contained in:
Inga Kirschnick
File diff suppressed because it is too large
Load Diff
@@ -34,25 +34,26 @@ class CorpusAnalysisApp {
|
||||
.then(
|
||||
cQiCorpus => {
|
||||
this.data.corpus = {o: cQiCorpus};
|
||||
this.data.corpus.o.getVisualizationData()
|
||||
.then(
|
||||
(data) => {
|
||||
console.log(data);
|
||||
this.renderGeneralCorpusInfo(data);
|
||||
this.renderTextInfoList(data);
|
||||
this.renderTextProportionsGraphic(data);
|
||||
this.renderWordFrequenciesGraphic(data);
|
||||
this.renderBoundsGraphic(data);
|
||||
}
|
||||
);
|
||||
// this.data.corpus.o.getCorpusData()
|
||||
// .then(corpusData => {
|
||||
// // this.renderGeneralCorpusInfo(corpusData);
|
||||
// // this.renderTextInfoList(corpusData);
|
||||
// // this.renderTextProportionsGraphic(corpusData);
|
||||
// // this.renderWordFrequenciesGraphic(corpusData);
|
||||
// // this.renderWordDistributionsGraphic(corpusData);
|
||||
// });
|
||||
// this.data.corpus.o.getVisualizationData()
|
||||
// .then(
|
||||
// (data) => {
|
||||
// console.log(data);
|
||||
// this.renderGeneralCorpusInfo(data);
|
||||
// this.renderTextInfoList(data);
|
||||
// this.renderTextProportionsGraphic(data);
|
||||
// this.renderWordFrequenciesGraphic(data);
|
||||
// this.renderBoundsGraphic(data);
|
||||
// }
|
||||
// );
|
||||
this.data.corpus.o.getCorpusData()
|
||||
.then(corpusData => {
|
||||
console.log(corpusData);
|
||||
this.renderGeneralCorpusInfo(corpusData);
|
||||
this.renderTextInfoList(corpusData);
|
||||
this.renderTextProportionsGraphic(corpusData);
|
||||
this.renderFrequenciesGraphic(corpusData);
|
||||
this.renderBoundsGraphic(corpusData);
|
||||
});
|
||||
// TODO: Don't do this hgere
|
||||
cQiCorpus.updateDb();
|
||||
this.enableActionElements();
|
||||
@@ -161,36 +162,53 @@ class CorpusAnalysisApp {
|
||||
}
|
||||
];
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 900
|
||||
// height: 600,
|
||||
// width: 900
|
||||
};
|
||||
Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout);
|
||||
let config = {responsive: true};
|
||||
|
||||
Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout, config);
|
||||
}
|
||||
|
||||
renderWordFrequenciesGraphic(corpusData) {
|
||||
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);
|
||||
renderFrequenciesGraphic(corpusData) {
|
||||
let frequenciesTokenCategoryDropdownElement = document.querySelector('[data-target="frequencies-token-category-dropdown"]');
|
||||
let frequenciesTokenCategoryDropdownListElement = document.querySelector("#frequencies-token-category-dropdown");
|
||||
let frequenciesGraphicElement = document.querySelector('#frequencies-graphic');
|
||||
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 = [];
|
||||
for (let word of words) {
|
||||
console.log(texts.map(text => text[1].freqs.word[word[0]]));
|
||||
let sortedData = Object.entries(corpusData.corpus.lexicon[0].freqs[category]).sort((a, b) => b[1] - a[1]).slice(0, 5);
|
||||
|
||||
for (let item of sortedData) {
|
||||
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]],
|
||||
y: texts.map(text => text[1].freqs[category][item[0]]),
|
||||
name: corpusData.lookups[category][item[0]],
|
||||
type: 'bar'
|
||||
};
|
||||
graphData.push(data);
|
||||
}
|
||||
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 900,
|
||||
barmode: 'stack',
|
||||
type: 'bar'
|
||||
};
|
||||
Plotly.newPlot(wordFrequenciesGraphicElement, graphData, graphLayout);
|
||||
|
||||
return graphData;
|
||||
}
|
||||
|
||||
renderBoundsGraphic(corpusData) {
|
||||
@@ -211,8 +229,8 @@ class CorpusAnalysisApp {
|
||||
}];
|
||||
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 2000,
|
||||
// height: 600,
|
||||
// width: 2000,
|
||||
barmode: 'stack',
|
||||
type: 'bar',
|
||||
showgrid: false,
|
||||
@@ -225,7 +243,9 @@ class CorpusAnalysisApp {
|
||||
showticklabels: false
|
||||
}
|
||||
};
|
||||
|
||||
let config = {responsive: true};
|
||||
|
||||
Plotly.newPlot(boundsGraphicElement, graphData, graphLayout);
|
||||
Plotly.newPlot(boundsGraphicElement, graphData, graphLayout, config);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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><b>Number of tokens</b></p>
|
||||
<p><b>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><b>Number of sentences</b></p>
|
||||
<p><b>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><b>Number of unique words</b></p>
|
||||
<p><b>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><b>Number of unique lemmas</b></p>
|
||||
<p><b>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><b>Number of unique pos</b></p>
|
||||
<p><b>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><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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,13 +110,20 @@
|
||||
<div class="col s6">
|
||||
<div class="card hoverable">
|
||||
<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>
|
||||
<div id="word-frequencies-graphic"></div>
|
||||
<div id="frequencies-graphic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
|
||||
Reference in New Issue
Block a user