bubbletea-v2/test.html at main · Software-Analytics-Visualisation-Team/bubbletea-v2 · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Hierarchical SVG with D3</title>
	<script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
	<script>
		// Function to draw a single circle (C) inside a group (<g>)
		function drawC(circleRadius, position) {
			const { x, y } = position;

			// Create a group for the circle
			const cGroup = d3.create('svg:g');

			// Add a circle to the group
			cGroup
				.append('circle')
				.attr('cx', x)
				.attr('cy', y)
				.attr('r', circleRadius)
				.attr('fill', 'steelblue')
				.attr('stroke', 'black');

			return cGroup;
		}

		// Function to draw a single rectangle (B) containing multiple circles
		function drawB(numCircles, circleRadius, boundingRect) {
			const { x, y, width, height } = boundingRect;

			// Create a group for this rectangle
			const bGroup = d3.create('svg:g');

			// Add a rectangle to the group
			bGroup
				.append('rect')
				.attr('x', x)
				.attr('y', y)
				.attr('width', width)
				.attr('height', height)
				.attr('fill', 'lightgray')
				.attr('stroke', 'black');

			// Generate positions for the circles
			for (let i = 0; i < numCircles; i++) {
				const circleX = Math.random() * (width - 2 * circleRadius) + x + circleRadius;
				const circleY = Math.random() * (height - 2 * circleRadius) + y + circleRadius;

				// Call drawC to create a single circle group and append it to the B group
				const cGroup = drawC(circleRadius, { x: circleX, y: circleY });
				bGroup.node().appendChild(cGroup.node());
			}

			return bGroup;
		}

		// Function to draw the top-level SVG (A) containing multiple rectangles
		function drawA(numBs, numCircles, bWidth, bHeight, circleRadius) {
			const svgWidth = 800;
			const svgHeight = 600;

			// Create the SVG element
			const svg = d3.create('svg')
				.attr('width', svgWidth)
				.attr('height', svgHeight);

			// Add a background rectangle
			svg
				.append('rect')
				.attr('width', svgWidth)
				.attr('height', svgHeight)
				.attr('fill', 'white')
				.attr('stroke', 'black');

			// Calculate positions for the B groups
			const cols = Math.ceil(Math.sqrt(numBs)); // Arrange in a grid
			const rows = Math.ceil(numBs / cols);
			const xSpacing = svgWidth / cols;
			const ySpacing = svgHeight / rows;

			for (let i = 0; i < numBs; i++) {
				const col = i % cols;
				const row = Math.floor(i / cols);

				const x = col * xSpacing + (xSpacing - bWidth) / 2;
				const y = row * ySpacing + (ySpacing - bHeight) / 2;

				// Call drawB to create each rectangle group
				const bGroup = drawB(numCircles, circleRadius, { x, y, width: bWidth, height: bHeight });
				svg.node().appendChild(bGroup.node());
			}

			return svg;
		}

		// Run the visualization
		const svgElement = drawA(
			6,             // Number of B groups
			10,            // Number of circles per B
			150,           // Width of each B rectangle
			100,           // Height of each B rectangle
			10             // Radius of each circle
		);

		// Append the SVG to the document body
		document.body.appendChild(svgElement.node());
	</script>
</body>

</html>