Last active
July 13, 2016 03:00
-
-
Save sirwart/f190a48bb743c3c0cf0d1a953bbfd4c0 to your computer and use it in GitHub Desktop.
San Francisco Zero Waste Data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
margin: 0; | |
font-family: "Helvetica Neue", Helvetica, Sans-Serif; | |
} | |
svg { | |
background-color: #fff; | |
} | |
.title { | |
font-size: 24px; | |
font-weight: bold; | |
fill: #35383b; | |
} | |
.subtitle { | |
fill: #6b6f73; | |
} | |
.line { | |
fill: none; | |
stroke: #5cb3ff; | |
stroke-width: 2px; | |
} | |
.y.axis .domain { | |
display: none; | |
} | |
.y.axis .tick line, | |
.x.axis .domain { | |
stroke: #e1e3e6; | |
shape-rendering: crispEdges; | |
} | |
.y.axis .tick text, | |
.x.axis .tick text { | |
font-size: 14px; | |
fill: #a4aab0; | |
} | |
.hover-marker { | |
fill: #5cb3ff; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
// Tweak these variables to customize the chart | |
var dataUrl = "https://numeracy.co/projects/1xTvf5A9Lbs/analysis.csv" | |
var xField = "Year" | |
var yField = "Landfilled" | |
var yFormatter = d3.format(",") | |
var title = "Yearly waste landfilled in San Francisco (Tons)" | |
var margin = {top: 100, right: 20, bottom: 48, left: 86}, | |
totalWidth = 960, | |
totalHeight = 500, | |
width = totalWidth - margin.left - margin.right, | |
height = totalHeight - margin.top - margin.bottom | |
var svg = d3.select("body").append("svg") | |
.attr("width", totalWidth) | |
.attr("height", totalHeight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
svg.append("text") | |
.attr("class", "title") | |
.attr("y", -52) | |
.text(title) | |
d3.csv(dataUrl, function(error, data) { | |
if (error) { | |
console.error("error", error) | |
return | |
} | |
data.sort(function(a, b) { return d3.ascending(+a[xField], +b[xField]) }) | |
var xScale = d3.scaleLinear() | |
.domain(d3.extent(data, function(d) { return +d[xField] })) | |
.range([0, width]) | |
var yDomain = d3.extent(data, function(d) { return +d[yField] }) | |
if (yDomain[0] > 0) { | |
yDomain[0] = 0 | |
} | |
var yScale = d3.scaleLinear() | |
.domain(yDomain) | |
.range([height, 0]) | |
var xAxis = d3.axisBottom(xScale) | |
.tickValues([+data[0][xField], +data[data.length - 1][xField]]) | |
.tickFormat(d3.format("0")) | |
.tickSize(0) | |
.tickPadding(16) | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
var yAxis = d3.axisLeft(yScale) | |
.ticks(3) | |
.tickSize(-width) | |
.tickPadding(16) | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
var line = d3.line() | |
.x(function(d) { return xScale(+d[xField]) }) | |
.y(function(d) { return yScale(+d[yField]) }) | |
svg.append("path") | |
.datum(data) | |
.attr("class", "line") | |
.attr("d", line) | |
// Set up hover interactions | |
var hoverMarker = svg.append("circle") | |
.attr("class", "hover-marker") | |
.attr("opacity", 0) | |
.attr("r", 5) | |
var hoverText = svg.append("text") | |
.attr("class", "subtitle") | |
.attr("y", -24) | |
var bisector = d3.bisector(function(d) { return +d[xField] }) | |
svg.append("rect") | |
.attr("width", width) | |
.attr("height", height) | |
.style("opacity", 0) | |
.on("mousemove", function() { | |
var x = Math.round(xScale.invert(d3.mouse(this)[0])) | |
var d = data[bisector.left(data, x)] | |
hoverMarker | |
.attr("cx", xScale(+d[xField])) | |
.attr("cy", yScale(+d[yField])) | |
.attr("opacity", 1) | |
hoverText | |
.text(yFormatter(+d[yField]) + " in " + d[xField]) | |
.attr("opacity", 1) | |
}) | |
.on("mouseleave", function() { | |
hoverMarker.attr("opacity", 0) | |
hoverText.attr("opacity", 0) | |
}) | |
}) | |
</script> | |
</body> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment