Jonas_Jones/multimodal_parliament_explorer_05_1
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bubble Chart for Topics works

Browse source
This commit is contained in:
vysitor 2025-03-17 21:08:10 +01:00
parent 5046f2bbe5
commit f5b5d7235c
3 changed files with 55 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/main/java/org/texttechnologylab/project/gruppe_05_1/rest/SpeechController.java
View file

@ -73,6 +73,7 @@ public class SpeechController {
// NLP: Topic
if ((speech.getNlp() != null) && (speech.getNlp().getTopics() != null)) {
Map<String, Double> topics = Topic.condenseTopicInformation(speech.getNlp().getTopics()); // Daten "verdichten"...
// ... und ersetzen
speech.getNlp().setTopics(
topics.entrySet().stream()
.map(me -> new Topic(me.getKey(), me.getValue(), null))

2
src/main/java/org/texttechnologylab/project/gruppe_05_1/website/templates/speech.ftl
View file

@ -14,6 +14,8 @@
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<header>
<h1>Rede von ${s.speakerName} <#if s.fraction??> (${s.fraction}) </#if> </h1>
</header>

52
src/main/java/org/texttechnologylab/project/gruppe_05_1/website/templates/topicsBubbleChart.ftl
View file

@ -0,0 +1,52 @@
<svg id="topicsBubblechart"></svg>
<script>
var topicsData = [
<#list condenseTopicInformation as topicTuple>
{ topic: "${topicTuple.topic}", score: "${topicTuple.score?string?replace(',', '.')}"} <#sep>,
</#list>
];
const topics_bc_width = 1000;
const topics_bc_height = 800;
fillOpacity = 0.5;
var svg = d3.select("#topicsBubblechart")
.attr("width", topics_bc_width)
.attr("height", topics_bc_height)
var topics_bc_color = d3.scaleOrdinal(d3.schemeCategory10);
var topics_bc_size = d3.scaleLinear().domain([1, 10]).range([30, 100]);
var bubbles = svg.selectAll("circle")
.data(topicsData)
.enter().append("circle")
.attr("r", d => topics_bc_size(d.score))
.attr("fill", d => topics_bc_color(d.topic))
.attr("fill-opacity", fillOpacity);
var topics_labels = svg.selectAll("text")
.data(topicsData)
.enter().append("text")
.attr("text-anchor", "middle")
.attr("font-size", d => (10 * d.score) + "px")
.attr("fill", "#000")
.text(d => d.topic);
var topics_bc_simulation = d3.forceSimulation(topicsData)
.force("charge", d3.forceManyBody().strength(5))
.force("center", d3.forceCenter(topics_bc_width / 2, topics_bc_height / 2))
.force("collision", d3.forceCollide(d => topics_bc_size(d.score) + 25))
.force("x", d3.forceX(topics_bc_width / 2).strength(0.1))
.force("y", d3.forceY(topics_bc_height / 2).strength(0.1));
topics_bc_simulation.on("tick", () => {
bubbles.attr("cx", d => d.x).attr("cy", d => d.y);
topics_labels.attr("x", d => d.x).attr("y", d => d.y);
});
</script>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After