Skip to content

Instantly share code, notes, and snippets.

@amandabee

amandabee/contractor.json

Last active June 3, 2016 04:23
Show Gist options
  • Save amandabee/edf73bc0bbe131435c952f5ed47524a6 to your computer and use it in GitHub Desktop.
Save amandabee/edf73bc0bbe131435c952f5ed47524a6 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Demo
Raw
contractor.json
{
"name": "Contractors",
"children": [{
"name": "First Parent",
"children": [{
"name": "Child",
"size": 9330
},{
"name": "Child",
"size": 1000
}, {
"name": "Kid",
"size": 20995
}]
}, {
"name": "Second Parent",
"children": [{
"name": "Child PRODUCTIONS",
"size": 2000
}, {
"name": "Child.",
"size": 9904
}]
}, {
"name": "Third Parent",
"children": [{
"name": "Alfonzo Child",
"size": 8000
}, {
"name": "Child Network",
"size": 695
}, {
"name": "Child Spotlight",
"size": 30593
}, {
"name": "Kid",
"size": 5000
}
]
}, {
"name": "Fourth Parent",
"children": [{
"name": "Beacon Child",
"size": 30319
}]
}, {
"name": "Fifth Parent",
"children": [{
"name": "Child Consulting",
"size": 9994
}]
},
{
"name": "Sixth parent",
"children": [{
"name": "Child and Child",
"size": 50000
}, {
"name": "Some Kid",
"size": 180000
}]
}, {
"name": "Seventh Parent",
"children": [{
"name": "Hotbed Child",
"size": 22916
}, {
"name": "Child & Associates With A Super Long Name",
"size": 93000
}, {
"name": "Child",
"size": 316904
}, {
"name": "Child",
"size": 3330351
}, {
"name": "Child ",
"size": 15156
}]
}, {
"name": "Eighth Parent",
"children": [{
"name": "Child Inc",
"size": 676250
}]
}, {
"name": "Ninth Parent",
"children": [{
"name": "Child Foo LLC",
"size": 16422
}, {
"name": "Child Bar LLC",
"size": 87625
}]
}
]
}
Raw
demo_data.csv
station field_a field_b field_c field_d field_e field_f
Q3-07 1570 5 0 9815 270 0
Q4-07 1619 118 0 10200 1119 0
Q1-08 3997 241 0 22121 2315 0
Q2-08 1818 378 0 10644 1703 0
Q3-08 1678 419 0 11011 717 0
Q4-08 1619 806 0 11052 6892 0
Q1-09 3371 2940 0 22727 4363 0
Q2-09 1665 1521 0 11013 3793 0
Q3-09 1492 1689 0 10215 5208 0
Q4-09 1563 4606 0 10177 7367 0
Q1-10 3391 5578 0 20970 8737 0
Q2-10 1861 5445 0 10885 8752 0
Q3-10 1545 5334 2166 9406 8398 3270
Q4-10 1477 8822 2792 9051 14102 4188
Q1-11 3425 10468 4608 19446 16235 7331
Q2-11 1600 12298 2836 9017 18647 4694
Q3-11 1325 13311 6046 7535 20338 9246
Raw
election.csv
district candidate votes
Dist 1 Leticia Putte 3580
Dist 2 David Barron 1620
Dist 2 John Higginson 339
Dist 2 Walter Bannister 2866
Dist 3 Jose Castillo 8839
Dist 3 Juan Salas 727
Dist 3 Monica Garcia 6110
Dist 3 Roberto Soriano 9358
Dist 3 Monica Ratliff 9412
Dist 3 Mark Reed 4633
Dist 4 Jaime Lazo 4341
Dist 4 Karo Torossian 2375
Dist 4 Jackie David 1896
Dist 4 Ivy Taylor 1929
Dist 4 Carlos Lara 1921
Dist 4 Jaime Herrera 3192
Dist 5 Louie Mendoza 6699
Dist 5 Sean Buffington 4697
Dist 5 Carl Petersen 4936
Dist 5 Jorge Nuno 2679
Dist 5 Ricardo Benitez 1697
Dist 6 Venessa Martinez 4839
Dist 6 Bonnie Corwin 1807
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Contractors</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 8px;
margin: auto;
position: relative;
width: 960px;
}
#chart {
padding: 15px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var w = 1200 - 80,
h = 800 - 180,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([0, h]),
color = d3.scale.category20(),
root,
node;
var dollars = d3.format("^ $f");
var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.size; });
var svg = d3.select("#chart").append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
d3.json("contractor.json", function(data) {
node = root = data;
var nodes = treemap.nodes(root)
.filter(function(d) { return !d.children; });
var cell = svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
cell.append("svg:rect")
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy - 1; })
.style("fill", function(d) { return color(d.parent.name); });
cell.append("svg:text")
.attr("x", function(d) { return d.dx / 2; })
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name + dollars(d.size); })
.call(wrap, function(d) {d.dx });
d3.select(window).on("click", function() { zoom(root); });
d3.select("select").on("change", function() {
treemap.value(this.value == "size" ? size : count).nodes(root);
zoom(node);
});
});
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
function zoom(d) {
var kx = w / d.dx, ky = h / d.dy;
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
var t = svg.selectAll("g.cell").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
t.select("rect")
.attr("width", function(d) { return kx * d.dx - 1; })
.attr("height", function(d) { return ky * d.dy - 1; })
t.select("text")
.attr("x", function(d) { return kx * d.dx / 2; })
.attr("y", function(d) { return ky * d.dy / 2; })
.style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });
node = d;
d3.event.stopPropagation();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment