Skip to content

Commit f478812

Browse files
BrinbriBrinbri
authored
Merge pull request #1 from ProjectCivics/tree-map
Tree map
2 parents a2b55d4 + 1f6bb22 commit f478812

File tree

3 files changed

+306
-0
lines changed

3 files changed

+306
-0
lines changed

‎.gitignore‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# -----------------------------------------------------------------
2+
# .gitignore
3+
# Bare Minimum Git
4+
# http://ironco.de/bare-minimum-git/
5+
# ver 20170502
6+
#
7+
# From the root of your project run
8+
# curl -O https://gist.githubusercontent.com/salcode/10017553/raw/.gitignore
9+
# to download this file
10+
#
11+
# This file is tailored for a general web project, it
12+
# is NOT optimized for a WordPress project. See
13+
# https://gist.github.com/salcode/b515f520d3f8207ecd04
14+
# for a WordPress specific .gitignore
15+
#
16+
# This file specifies intentionally untracked files to ignore
17+
# http://git-scm.com/docs/gitignore
18+
#
19+
# NOTES:
20+
# The purpose of gitignore files is to ensure that certain files not
21+
# tracked by Git remain untracked.
22+
#
23+
# To ignore uncommitted changes in a file that is already tracked,
24+
# use `git update-index --assume-unchanged`.
25+
#
26+
# To stop tracking a file that is currently tracked,
27+
# use `git rm --cached`
28+
#
29+
# Change Log:
30+
# 20170502 unignore composer.lock
31+
# 20170502 ignore components loaded via Bower
32+
# 20150326 ignore jekyll build directory `/_site`
33+
# 20150324 Reorganized file to list ignores first and whitelisted last,
34+
# change WordPress .gitignore link to preferred gist,
35+
# add curl line for quick installation
36+
# ignore composer files (vendor directory and lock file)
37+
# 20140606 Add .editorconfig as a tracked file
38+
# 20140418 remove explicit inclusion
39+
# of readme.md (this is not an ignored file by default)
40+
# 20140407 Initially Published
41+
#
42+
# -----------------------------------------------------------------
43+
44+
# ignore all files starting with . or ~
45+
.*
46+
~*
47+
48+
# ignore node/grunt dependency directories
49+
node_modules/
50+
51+
# ignore composer vendor directory
52+
/vendor
53+
54+
# ignore components loaded via Bower
55+
/bower_components
56+
57+
# ignore jekyll build directory
58+
/_site
59+
60+
# ignore OS generated files
61+
ehthumbs.db
62+
Thumbs.db
63+
64+
# ignore Editor files
65+
*.sublime-project
66+
*.sublime-workspace
67+
*.komodoproject
68+
69+
# ignore log files and databases
70+
*.log
71+
*.sql
72+
*.sqlite
73+
74+
# ignore compiled files
75+
*.com
76+
*.class
77+
*.dll
78+
*.exe
79+
*.o
80+
*.so
81+
82+
# ignore packaged files
83+
*.7z
84+
*.dmg
85+
*.gz
86+
*.iso
87+
*.jar
88+
*.rar
89+
*.tar
90+
*.zip
91+
92+
# -------------------------
93+
# BEGIN Whitelisted Files
94+
# -------------------------
95+
96+
# track these files, if they exist
97+
!.gitignore
98+
!.editorconfig

‎GovMap.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "US GOVERNMENT",
3+
"value": 100,
4+
"children": [
5+
{
6+
"name": "Legislative",
7+
"value": 75,
8+
"children":[
9+
{"name": "Senate", "value": 25},
10+
{"name": "House of Representatives ", "value": 25}
11+
]
12+
},
13+
{
14+
"name": "Executive",
15+
"value": 75,
16+
"children":[
17+
{"name": "President", "value": 25}
18+
]
19+
},
20+
{
21+
"name": "Judicial",
22+
"value": 75,
23+
"children":[
24+
{"name": "Supreme Court", "value": 25}
25+
]
26+
}
27+
]
28+
}

‎Govmap.html‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!doctype html>
2+
<html>
3+
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>
28+
<head>
29+
<title>Project Civics GovMap</title>
30+
</head>
31+
32+
<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+
}
70+
71+
root.children.forEach(collapse);
72+
update(root);
73+
});
74+
75+
d3.select(self.frameElement).style("height", "800px");
76+
77+
function update(source) {
78+
79+
// Compute the new tree layout.
80+
var nodes = tree.nodes(root).reverse(),
81+
links = tree.links(nodes);
82+
83+
// Normalize for fixed-depth.
84+
nodes.forEach(function(d) { d.y = d.depth * 180; });
85+
86+
// Update the nodes…
87+
var node = svg.selectAll("g.node")
88+
.data(nodes, function(d) { return d.id || (d.id = ++i); });
89+
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);
95+
96+
nodeEnter.append("circle")
97+
.attr("r", 1e-6)
98+
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
99+
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});
154+
})
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+
}
175+
176+
</script>
177+
178+
</body>
179+
180+
</html>

0 commit comments

Comments
 (0)