Skip to content

Commit 1f6bb22

Browse files
BrinbriBrinbri
committed
Created a colapseable Tree diagram that is interactive and works! Will add more segments to each branch in next commit.
1 parent 42522a1 commit 1f6bb22

File tree

2 files changed

+157
-31
lines changed

2 files changed

+157
-31
lines changed

‎GovMap.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,5 @@
2424
{"name": "Supreme Court", "value": 25}
2525
]
2626
}
27-
2827
]
2928
}

‎Govmap.html‎

Lines changed: 157 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,179 @@
11
<!doctype html>
22
<html>
33

4+
<meta charset="utf-8">
5+
<style>
6+
7+
.node {
8+
cursor: pointer;
9+
}
10+
11+
.node circle {
12+
fill: #fff;
13+
stroke: steelblue;
14+
stroke-width: 1.5px;
15+
}
16+
17+
.node text {
18+
font: 10px sans-serif;
19+
}
20+
21+
.link {
22+
fill: none;
23+
stroke: #ccc;
24+
stroke-width: 1.5px;
25+
}
26+
27+
</style>
428
<head>
529
<title>Project Civics GovMap</title>
6-
<script src="http://d3js.org/d3.v4.min.js"></script>
730
</head>
831

932
<body>
33+
<script src="https://d3js.org/d3.v3.min.js"></script>
34+
<script>
35+
36+
var margin = {top: 20, right: 120, bottom: 20, left: 120},
37+
width = 960 - margin.right - margin.left,
38+
height = 800 - margin.top - margin.bottom;
39+
40+
var i = 0,
41+
duration = 750,
42+
root;
43+
44+
var tree = d3.layout.tree()
45+
.size([height, width]);
46+
47+
var diagonal = d3.svg.diagonal()
48+
.projection(function(d) { return [d.y, d.x]; });
49+
50+
var svg = d3.select("body").append("svg")
51+
.attr("width", width + margin.right + margin.left)
52+
.attr("height", height + margin.top + margin.bottom)
53+
.append("g")
54+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
55+
56+
d3.json("GovMap.json", function(error, GovMap) {
57+
if (error) throw error;
58+
59+
root = GovMap;
60+
root.x0 = height / 2;
61+
root.y0 = 0;
62+
63+
function collapse(d) {
64+
if (d.children) {
65+
d._children = d.children;
66+
d._children.forEach(collapse);
67+
d.children = null;
68+
}
69+
}
1070

11-
<script>
71+
root.children.forEach(collapse);
72+
update(root);
73+
});
1274

13-
var color = d3.scale.category10();
75+
d3.select(self.frameElement).style("height", "800px");
1476

15-
var canvas = d3.select("body")
16-
.append("svg")
17-
.attr("width", 500)
18-
.attr("height", 500);
77+
function update(source) {
1978

20-
d3.json("GovMap.json", function (data) {
79+
// Compute the new tree layout.
80+
var nodes = tree.nodes(root).reverse(),
81+
links = tree.links(nodes);
2182

22-
var treemap = d3.layout.treemap()
23-
.size([500,500])
24-
.nodes(data)
25-
var cells = canvas.selectAll(".cell")
26-
.data(treemap)
27-
.enter()
28-
.append("g")
29-
.attr("class", "cell")
83+
// Normalize for fixed-depth.
84+
nodes.forEach(function(d) { d.y = d.depth * 180; });
3085

31-
cells.append("rect")
32-
.attr("x", function (d) { return d.x; })
33-
.attr("y", function (d) { return d.y; })
34-
.attr("width", function (d) { return d.dx; })
35-
.attr("height", function (d) { return d.dy; })
36-
.attr("fill", function (d) { return d.children ? null : color(d.parent.name); })
37-
.attr("stroke", "#fff")
86+
// Update the nodes…
87+
var node = svg.selectAll("g.node")
88+
.data(nodes, function(d) { return d.id || (d.id = ++i); });
3889

39-
cells.append("text")
40-
.attr("x", function(d) { return d.x + d.dx / 2})
41-
.attr("y", function(d) { return d.y +d.dy / 2 })
42-
.attr("text-anchor","middle")
43-
.text(function (d) { return d.name; })
90+
// Enter any new nodes at the parent's previous position.
91+
var nodeEnter = node.enter().append("g")
92+
.attr("class", "node")
93+
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
94+
.on("click", click);
4495

45-
console.log(treemap);
96+
nodeEnter.append("circle")
97+
.attr("r", 1e-6)
98+
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
4699

100+
nodeEnter.append("text")
101+
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
102+
.attr("dy", ".35em")
103+
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
104+
.text(function(d) { return d.name; })
105+
.style("fill-opacity", 1e-6);
106+
107+
// Transition nodes to their new position.
108+
var nodeUpdate = node.transition()
109+
.duration(duration)
110+
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
111+
112+
nodeUpdate.select("circle")
113+
.attr("r", 4.5)
114+
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
115+
116+
nodeUpdate.select("text")
117+
.style("fill-opacity", 1);
118+
119+
// Transition exiting nodes to the parent's new position.
120+
var nodeExit = node.exit().transition()
121+
.duration(duration)
122+
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
123+
.remove();
124+
125+
nodeExit.select("circle")
126+
.attr("r", 1e-6);
127+
128+
nodeExit.select("text")
129+
.style("fill-opacity", 1e-6);
130+
131+
// Update the links…
132+
var link = svg.selectAll("path.link")
133+
.data(links, function(d) { return d.target.id; });
134+
135+
// Enter any new links at the parent's previous position.
136+
link.enter().insert("path", "g")
137+
.attr("class", "link")
138+
.attr("d", function(d) {
139+
var o = {x: source.x0, y: source.y0};
140+
return diagonal({source: o, target: o});
141+
});
142+
143+
// Transition links to their new position.
144+
link.transition()
145+
.duration(duration)
146+
.attr("d", diagonal);
147+
148+
// Transition exiting nodes to the parent's new position.
149+
link.exit().transition()
150+
.duration(duration)
151+
.attr("d", function(d) {
152+
var o = {x: source.x, y: source.y};
153+
return diagonal({source: o, target: o});
47154
})
155+
.remove();
156+
157+
// Stash the old positions for transition.
158+
nodes.forEach(function(d) {
159+
d.x0 = d.x;
160+
d.y0 = d.y;
161+
});
162+
}
163+
164+
// Toggle children on click.
165+
function click(d) {
166+
if (d.children) {
167+
d._children = d.children;
168+
d.children = null;
169+
} else {
170+
d.children = d._children;
171+
d._children = null;
172+
}
173+
update(d);
174+
}
48175

49-
</script>
176+
</script>
50177

51178
</body>
52179

0 commit comments

Comments
 (0)