Create dendro.html

galenwilkerson · Aug 8, 2024 · 45d6fbe · 45d6fbe
1 parent 9908f2b
commit 45d6fbe
Showing 1 changed file with 95 additions and 0 deletions.
diff --git a/dendro.html b/dendro.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Dendrogram Example</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        .link {
+            fill: none;
+            stroke: #555;
+            stroke-opacity: 0.4;
+            stroke-width: 1.5px;
+        }
+
+        .node circle {
+            fill: #999;
+            stroke: steelblue;
+            stroke-width: 1.5px;
+        }
+
+        .node text {
+            font: 10px sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <svg width="800" height="600"></svg>
+    <script>
+        // Example data
+        const data = {
+            "name": "root",
+            "children": [
+                {
+                    "name": "child1",
+                    "children": [
+                        {"name": "grandchild1"},
+                        {"name": "grandchild2"}
+                    ]
+                },
+                {
+                    "name": "child2",
+                    "children": [
+                        {"name": "grandchild3"},
+                        {"name": "grandchild4"}
+                    ]
+                }
+            ]
+        };
+
+        const width = 800;
+        const height = 600;
+
+        const svg = d3.select("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .append("g")
+            .attr("transform", "translate(40,0)");
+
+        const clusterLayout = d3.cluster().size([height, width - 160]);
+        const root = d3.hierarchy(data);
+
+        clusterLayout(root);
+
+        // Right-angled (elbow) links
+        function elbow(d) {
+            return `M${d.y},${d.x}V${d.parent.x}H${d.parent.y}`;
+        }
+
+        // Links
+        svg.selectAll(".link")
+            .data(root.links())
+            .enter()
+            .append("path")
+            .attr("class", "link")
+            .attr("d", elbow);
+
+        // Nodes
+        const node = svg.selectAll(".node")
+            .data(root.descendants())
+            .enter()
+            .append("g")
+            .attr("class", "node")
+            .attr("transform", d => `translate(${d.y},${d.x})`);
+
+        node.append("circle")
+            .attr("r", 4.5);
+
+        node.append("text")
+            .attr("dy", 3)
+            .attr("x", d => d.children ? -8 : 8)
+            .style("text-anchor", d => d.children ? "end" : "start")
+            .text(d => d.data.name);
+    </script>
+</body>
+</html>