sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-12 17:10:41 +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
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@ -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);
}
}