-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (130 loc) · 5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<title>Zoomable Non-Overlapping Bubble Chart with D3.js</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#chart-container {
position: relative;
width: 100%;
height: 100%;
}
#chart-title {
position: absolute;
top: 20px;
left: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
color: #333;
}
.bubble {
fill: rgb(255, 255, 255);
stroke: #333;
pointer-events: all; /* Allow the bubbles to receive mouse events */
}
.label {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; /* Initial font size, adjust as needed */
text-anchor: middle;
pointer-events: none;
}
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body style="background-image:url(b_background/sunset_blurred.jpg)">
</body>
<body>
<div id="chart-container">
<h1 id="chart-title">We are AHC</h1>
</div>
<script>
const dataset = [
{ id: 1, radius: 120, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
{ id: 2, radius: 85, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
{ id: 3, radius: 60, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
{ id: 4, radius: 42, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
{ id: 5, radius: 30, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
{ id: 6, radius: 22, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
{ id: 7, radius: 15, logoUrl: "https://upload.wikimedia.org/wikipedia/commons/4/4a/STAWAG_Logo.svg" },
// 1: Hauptsponsor, 2: 7m, 3: KE, 4: LE, 5: Deluxe Supporter, 6: Premium Supporter, 7: Basic Supporter
// Add more data points as needed
];
const width = window.innerWidth;
const height = window.innerHeight;
const minRadius = 5; // Set the minimum bubble radius after zooming in
const svg = d3.select("#chart-container")
.append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.zoom()
.scaleExtent([1, 10]) // Set the zoom scale range (minimum 1, maximum 10)
.on("zoom", zoomed));
const container = svg.append("g"); // Create a container to group the bubbles
const simulation = d3.forceSimulation(dataset)
.force("charge", d3.forceManyBody().strength(-100))
.force("collision", d3.forceCollide().radius(d => d.radius + 1).strength(2)) // Increased strength value
.force("x", d3.forceX().x(d => Math.max(d.radius, Math.min(width - d.radius, d.x))))
.force("y", d3.forceY().y(d => Math.max(d.radius, Math.min(height - d.radius, d.y))))
.force("center", d3.forceCenter(width / 2, height / 2));
const bubbles = container.selectAll(".bubble")
.data(dataset)
.enter()
.append("circle")
.attr("class", "bubble")
.attr("r", d => d.radius)
.attr("fill", "steelblue")
.on("click", handleClick) // Add click event listener
.call(drag(simulation)); // Add drag behavior to the bubbles
const logos = container.selectAll(".logo")
.data(dataset)
.enter()
.append("image")
.attr("class", "logo")
.attr("x", d => d.x - d.radius * 0.6) // Adjust the position of the logo inside the bubble
.attr("y", d => d.y - d.radius * 0.6) // Adjust the position of the logo inside the bubble
.attr("width", d => d.radius * 1.2) // Adjust the size of the logo relative to the bubble size
.attr("height", d => d.radius * 1.2) // Adjust the size of the logo relative to the bubble size
.attr("href", d => d.logoUrl); // Set the path to the SVG logo
function handleClick(d) {
// Add your desired action when a bubble is clicked
console.log(`Bubble ${d.id} clicked!`);
}
function drag(simulation) {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
function zoomed(event) {
container.attr("transform", event.transform); // Apply zoom transform to the container
const currentZoom = event.transform.k;
}
simulation.on("tick", () => {
bubbles.attr("cx", d => d.x)
.attr("cy", d => d.y);
logos.attr("x", d => d.x - d.radius * 0.6) // Update the position of the logo during simulation
.attr("y", d => d.y - d.radius * 0.6); // Update the position of the logo during simulation
});
</script>
</body>
</html>