mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-14 16:55:42 +00:00
Script fix + small optical changes
This commit is contained in:
parent
d6e17e1554
commit
19e01d6709
@ -42,16 +42,17 @@ class CorpusAnalysisApp {
|
||||
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.getCorpusData()
|
||||
// .then(corpusData => {
|
||||
// // this.renderGeneralCorpusInfo(corpusData);
|
||||
// // this.renderTextInfoList(corpusData);
|
||||
// // this.renderTextProportionsGraphic(corpusData);
|
||||
// // this.renderWordFrequenciesGraphic(corpusData);
|
||||
// // this.renderWordDistributionsGraphic(corpusData);
|
||||
// });
|
||||
// TODO: Don't do this hgere
|
||||
cQiCorpus.updateDb();
|
||||
this.enableActionElements();
|
||||
@ -142,6 +143,7 @@ class CorpusAnalysisApp {
|
||||
|
||||
textData.push(resource);
|
||||
}
|
||||
|
||||
corpusTextInfoList.add(textData);
|
||||
|
||||
let textCountChipElement = document.querySelector('.text-count-chip');
|
||||
@ -160,7 +162,7 @@ class CorpusAnalysisApp {
|
||||
];
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 600
|
||||
width: 900
|
||||
};
|
||||
Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout);
|
||||
}
|
||||
@ -169,8 +171,10 @@ class CorpusAnalysisApp {
|
||||
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) {
|
||||
console.log(texts.map(text => text[1].freqs.word[word[0]]));
|
||||
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]]),
|
||||
@ -182,30 +186,46 @@ class CorpusAnalysisApp {
|
||||
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 600,
|
||||
width: 900,
|
||||
barmode: 'stack',
|
||||
type: 'bar'
|
||||
};
|
||||
Plotly.newPlot(wordFrequenciesGraphicElement, graphData, graphLayout);
|
||||
}
|
||||
|
||||
renderWordDistributionsGraphic(corpusData) {
|
||||
// let wordDistributionGraphicElement = document.querySelector('#word-distributions-graphic');
|
||||
// var trace1 = {
|
||||
// x: [1, 2, 3, 4],
|
||||
// y: [10, 11, 12, 13],
|
||||
// mode: 'markers',
|
||||
// marker: {
|
||||
// size: [40, 60, 80, 100]
|
||||
// }
|
||||
// };
|
||||
// var data = [trace1];
|
||||
// var layout = {
|
||||
// title: 'Marker Size',
|
||||
// showlegend: false,
|
||||
// height: 500,
|
||||
// width: 600
|
||||
// };
|
||||
// Plotly.newPlot(wordDistributionGraphicElement, data, layout);
|
||||
renderBoundsGraphic(corpusData) {
|
||||
let boundsGraphicElement = document.querySelector('#bounds-graphic');
|
||||
|
||||
let graphData = [];
|
||||
let texts = Object.entries(corpusData.text.lexicon);
|
||||
|
||||
graphData = [{
|
||||
type: 'bar',
|
||||
x: texts.map(text => text[1].bounds[1] - text[1].bounds[0]),
|
||||
y: texts.map(text => corpusData.lookups.text[text[0]].title),
|
||||
base: texts.map(text => text[1].bounds[0]),
|
||||
text: texts.map(text => `${corpusData.lookups.text[text[0]].title} (${corpusData.lookups.text[text[0]].publishing_year})`),
|
||||
orientation: 'h',
|
||||
hovertemplate: '%{base} - %{x} <br>%{y}',
|
||||
showlegend: false
|
||||
}];
|
||||
|
||||
let graphLayout = {
|
||||
height: 600,
|
||||
width: 2000,
|
||||
barmode: 'stack',
|
||||
type: 'bar',
|
||||
showgrid: false,
|
||||
xaxis: {
|
||||
rangemode: 'nonnegative',
|
||||
autorange: true
|
||||
},
|
||||
yaxis: {
|
||||
autorange: true,
|
||||
showticklabels: false
|
||||
}
|
||||
};
|
||||
|
||||
Plotly.newPlot(boundsGraphicElement, graphData, graphLayout);
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fast-json-patch/3.1.1/fast-json-patch.min.js" integrity="sha512-5uDdefwnzyq4N+SkmMBmekZLZNmc6dLixvVxCdlHBfqpyz0N3bzLdrJ55OLm7QrZmgZuhLGgHLDtJwU6RZoFCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js" integrity="sha512-93wYgwrIFL+b+P3RvYxi/WUFRXXUDSLCT2JQk9zhVGXuS2mHl2axj6d+R6pP+gcU5isMHRj1u0oYE/mWyt/RjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js" integrity="sha512-HTENHrkQ/P0NGDFd5nk6ibVtCkcM7jhr2c7GyvXp5O+4X6O5cQO9AhqFzM+MdeBivsX7Hoys2J7pp2wdgMpCvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js" charset="utf-8"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.2/plotly.min.js" integrity="sha512-dAXqGCq94D0kgLSPnfvd/pZpCMoJQpGj2S2XQmFQ9Ay1+96kbjss02ISEh+TBNXMggGg/1qoMcOHcxg+Op/Jmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
{%- assets
|
||||
filters='rjsmin',
|
||||
|
@ -98,27 +98,31 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s4">
|
||||
<div class="col s6">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text proportions within the corpus</span>
|
||||
<span class="card-title">Proportions</span>
|
||||
<p>of texts within the corpus</p>
|
||||
<div id="text-proportions-graphic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="col s6">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Word frequencies</span>
|
||||
<p>within the texts of the 5 most frequent words in the corpus</p>
|
||||
<div id="word-frequencies-graphic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Word distributions</span>
|
||||
<div id="word-distributions-graphic"></div>
|
||||
<span class="card-title">Text Bounds</span>
|
||||
<div id="bounds-graphic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user