Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 300 lines (253 sloc) 7.36 KB
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
width: 618px;
margin: auto;
position: relative;
}
svg {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
position: absolute;
top: 40px;
left: 30px;
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
vertical-align: middle;
display: block;
padding-left: 15px;
}
.box {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--y path {
display: none;
}
.cities {
fill: none;
stroke: none;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: 1.5px;
}
.suburb {
stroke: rgba(104, 182, 76, 0.6);
}
.city {
stroke: rgba(86, 160, 213, 0.6);
}
.county {
stroke: rgba(155,25,0,1.0);
stroke-dasharray: 10,10;
}
.city_total {
/* stroke: rgba(86, 160, 213, 1.0);*/
stroke: #005;
stroke-dasharray: 10,10;
}
.suburbs_total {
stroke: #050;
stroke-dasharray: 10,10;
}
.city--hover {
stroke: #000;
}
.focus text {
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.voronoi path {
fill: none;
pointer-events: all;
}
.voronoi--show path {
stroke: red;
stroke-opacity: .2;
}
#form {
position: absolute;
top: 20px;
right: 30px;
}
#box2 {
position: absolute;
top: 60px;
}
</style>
<label id="box1"><input type="checkbox" checked> Show Cleveland</label>
<label id="box2"><input type="checkbox" checked> Show suburbs</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
var months,
monthFormat = d3.time.format("%Y-%m");
var margin = {top: 20, right: 30, bottom: 45, left: 40},
width = 618 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width-100]);
var y = d3.scale.linear().range([height, 0]);
var voronoi = d3.geom.voronoi()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); })
.clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// load the data!
d3.tsv("snap_norm.tsv", type, function(error, cities) {
x.domain(d3.extent(months));
y.domain([0.75, d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.value; }); })]).nice();
// label axes
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
);
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.svg.axis()
.scale(y)
.orient("left")
.ticks(8, "%"))
.append("text")
.attr("x", 4)
.attr("dy", ".32em")
.style("font-weight", "bold")
.text("Change in SNAP recipients");
svg.append("text")
.attr("x", 105)
.attr("y", 473)
.text("Visualization by the Poverty Center with data from NEO CANDO 2010+");
// labels for city, county, and suburbs
svg.append("text")
.attr("transform", "translate(" + (width+5-100) + "," + (y(cities.slice(-3)[0].values.slice(-1)[0].value)-5) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "rgba(155,25,0,1.0)")
.style("text-align", "right")
.text("Cuyahoga County");
svg.append("text")
.attr("transform", "translate(" + (width+5-100) + "," + y(cities.slice(-2)[0].values.slice(-1)[0].value-.02) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "#003")
.text("City of Cleveland");
svg.append("text")
.attr("transform", "translate(" + (width+5-100) + "," + y(cities.slice(-1)[0].values.slice(-1)[0].value) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "#030")
.text("Cleveland Suburbs");
var paths = svg.append("g")
.attr("class", "cities")
var voronoiGroup = svg.append("g")
.attr("class", "voronoi");
var cond1 = false,
cond2 = false;
redraw(cond1, cond2);
d3.select("#box1")
.property("disabled", false)
.on("change", function() {
cond1 = !cond1;
redraw(cond1, cond2);
});
d3.select("#box2")
.property("disabled", false)
.on("change", function() {
cond2 = !cond2;
redraw(cond1, cond2);
});
function redraw(cond1, cond2) {
// draw the lines for all cities/suburbs/total lines
vg = voronoiGroup.selectAll("path")
.data(voronoi(d3.nest()
.key(function(d) { return x(d.date) + "," + y(d.value); })
.rollup(function(v) { return v[0]; })
.entries(d3.merge(cities.map(function(d) { return d.values; })))
.map(function(d) { return d.values; })
.filter(function(d) {
if (cond1==false && cond2==false) {
return true
} else if (cond1==false && cond2==true) {
return d.city.group!='suburb'
} else if (cond1==true && cond2==false) {
return d.city.group!='city'
} else if (cond1==true && cond2==true) {
return ((d.city.group!='city') && (d.city.group!='suburb'))
}
})), function(d) { if (d.length>0) {return "M" + d.join("L") + "Z"} })
vg.exit().remove()
vg.enter().append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.datum(function(d) { return d.point; })
.on("mouseover", mouseover)
.on("mouseout", mouseout)
pt = paths.selectAll("path")
.data(cities
.filter(function(d) {
if (cond1==false && cond2==false) {
return true
} else if (cond1==false && cond2==true) {
return d.group!='suburb'
} else if (cond1==true && cond2==false) {
return d.group!='city'
} else if (cond1==true && cond2==true) {
return ((d.group!='city') && (d.group!='suburb'))
}
}), function(d) {return d.name;})
pt.exit().remove();
pt.enter().append("path")
.attr("d", function(d) { d.line = this; return line(d.values); })
.attr("class", function(d) {return d.group});
}
// highlight focus
var focus = svg.append("g")
.attr("transform", "translate(-100,-100)")
.attr("class", "focus");
focus.append("circle")
.attr("r", 3.5);
focus.append("text")
.attr("y", -10);
function mouseover(d) {
d3.select(d.city.line).classed("city--hover", true);
d.city.line.parentNode.appendChild(d.city.line);
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")");
focus.select("text").text(d.city.name);
}
function mouseout(d) {
d3.select(d.city.line).classed("city--hover", false);
focus.attr("transform", "translate(-100,-100)");
}
});
// parsing function
function type(d, i) {
if (!i) months = Object.keys(d).map(monthFormat.parse).filter(Number);
var city = {
name: d.Neighborhood,
group: d.Group,
values: null
};
city.values = months.map(function(m) {
return {
city: city,
date: m,
value: d[monthFormat(m)]
};
});
return city;
}
</script>
You can’t perform that action at this time.