Skip to content

Instantly share code, notes, and snippets.

@nickpeihl

nickpeihl/expenditure-tree.html

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nickpeihl/6bd58afb50b2157d4693 to your computer and use it in GitHub Desktop.
Save nickpeihl/6bd58afb50b2157d4693 to your computer and use it in GitHub Desktop.
Download ZIP
Public Works Budget Bubbles
Raw
expenditure-tree.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.node circle {
fill: rgba(220,80,255,1);
stroke: rgba(147,2,183,1);
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: rgba(147,2,183,0.2);
}
</style>
<body>
<h2>Expenditures</h2>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 1024 - margin.right - margin.left,
height = 768 - margin.top - margin.bottom;
var i = 0;
// Set variable for converting dollars to image sizes
var sTransform = 100000
var tree = d3.layout.tree()
.size([height,width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("expenditures.json", function(error, treeData) {
if (error) return console.error(error);
root = treeData;
update(root);
});
function update(source){
var nodes = tree.nodes(root),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 180; });
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; });
nodeEnter.append("circle")
.attr("r", function(d){ return d.size/sTransform; });
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ?
(d.size/sTransform + 4) * -1 : d.size/sTransform +4 })
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1);
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
link
.style("stroke-width", function(d) { return d.target.size/(sTransform/2) });
}
</script>
</body>
</html>
Raw
expenditures.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
<body>
<h2>Expenditures</h2>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 20,
diameter = 960;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("expenditures.json", function(error, root) {
if (error) return console.error(error);
var focus = root,
nodes = pack.nodes(root),
view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.text(function(d) { return d.name; });
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
</html>
Raw
expenditures.json
{
"name": "Expenditures",
"children": [
{"name": "Ending Cash\n16%", "size": 1808143},
{"name": "Road and Street Maintenance\n34%","size": 3823890},
{"name": "Administration\n7%","size": 790737},
{"name": "Operations\n6%", "size": 692620},
{
"name": "Construction\n32%",
"size": 3518081,
"children": [
{"name": "PSE\n23%", "size": 795890},
{"name": "Construction (contract & county)\n69%", "size": 2425820},
{"name": "Admin and Overhead\n8%", "size": 296371}
]
},
{
"name": "Miscellaneous\n5%",
"size": 527675,
"children": [
{"name": "Capital Exp\n6%", "size": 30000},
{"name": "Transfers Out\n94%", "size": 497975}
]
}
]
}
Raw
revenue-tree.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.node circle {
fill: rgba(105,255,201,1);
stroke: rgba(23,204,139,1);
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: rgba(23,204,139,0.2);
}
</style>
<body>
<h2>Revenues</h2>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 1024 - margin.right - margin.left,
height = 768 - margin.top - margin.bottom;
var i = 0;
// Set variable for converting dollars to image sizes
var sTransform = 150000
var tree = d3.layout.tree()
.size([height,width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("revenue.json", function(error, treeData) {
if (error) return console.error(error);
root = treeData;
update(root);
});
function update(source){
var nodes = tree.nodes(root),
links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 180; });
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; });
nodeEnter.append("circle")
.attr("r", function(d){ return d.size/sTransform; });
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ?
(d.size/sTransform + 4) * -1 : d.size/sTransform +4 })
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1);
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", diagonal);
link
.style("stroke-width", function(d) { return d.target.size/(sTransform/2)});
}
</script>
</body>
</html>
Raw
revenue.json
{
"name": "Revenue",
"children": [
{"name": "Cash\n16%", "size": 1739463},
{
"name": "Property Tax\n32%",
"size": 4200000,
"children": [
{"name": "Property Tax Revenue\n85%", "size": 3557000},
{"name": "Less Diverted Road Tax\n15%", "color": "#D99694", "size": 650000}
]
},
{
"name": "Intergovernmental\n52%",
"size": 5778000,
"children": [
{"name": "Federal Grants\n33%", "color": "#FFD4FD", "size": 1908000},
{"name": "State Grants\n8%", "color": "#FFD4FD", "size": 450000},
{"name": "State MVFT\n18%", "size": 1020000},
{"name": "Capron\n42%", "size": 2400000}
]
},
{
"name": "Other\n1%",
"size": 77500,
"children": [
{"name": "Licenses/Permits", "size": 35000},
{"name": "Misc Rev", "size": 42500}
]
}
]
}
Raw
revenues.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
<body>
<h2>Revenues</h2>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 20,
diameter = 960;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("revenue.json", function(error, root) {
if (error) return console.error(error);
var focus = root,
nodes = pack.nodes(root),
view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) {
if(d.color) {
return d.color;
}
else {
return d.children ? color(d.depth) : null;
}
})
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.text(function(d) { return d.name; });
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment