Last active
August 23, 2016 20:18
-
-
Save bessiec/7901f8fd88d750ad23f8 to your computer and use it in GitHub Desktop.
D3 Water Leaks in City of Los Angeles
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Line Chart with Two Lines</title> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script> | |
<style type="text/css"> | |
body { | |
background-color: white; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 10px 0 0 0; | |
} | |
svg { | |
background-color: white; | |
} | |
circle:hover { | |
fill: orange; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
g.highlight path { | |
stroke: steelblue; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Water Leaks in City of Los Angeles</h1> | |
<p>Water Leaks Yearly in LA City with each line representing a month in each year. <a href="https://data.lacity.org/A-Livable-and-Sustainable-City/Water-Leaks-in-the-City-of-Los-Angeles/jz5f-87wj">LA City Open Data</a> | |
<script type="text/javascript"> | |
//Dimensions and padding | |
var w = 700; | |
var h = 700; | |
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left | |
//Set up date formatting and years | |
var dateFormat = d3.time.format("%Y"); | |
var xScale = d3.time.scale() | |
.range([ padding[3], w - padding[1] - padding[3] ]); | |
var yScale = d3.scale.linear() | |
.range([ padding[0], h - padding[2] ]); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(15) | |
.tickFormat(function(d) { | |
return dateFormat(d); | |
}); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left"); | |
var line = d3.svg.line() | |
.x(function(d) { | |
return xScale(dateFormat.parse(d.year)); | |
}) | |
.y(function(d) { | |
return yScale(+d.amount); | |
}); | |
//Create the empty SVG image | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
d3.csv("lawaterleaks.csv", function(data) { | |
var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"]; | |
var dataset = []; | |
//Loop once for each row in data | |
for (var i = 0; i < data.length; i++) { | |
dataset[i] = { | |
month: data[i].Month, | |
leaks: [] | |
}; | |
//Loop through all the years | |
for (var j = 0; j < years.length; j++) { | |
// If value is not empty | |
if (data[i][years[j]]) { | |
dataset[i].leaks.push({ | |
year: years[j], | |
amount: data[i][years[j]] | |
}); | |
} | |
} | |
} | |
//Uncomment to log the original data to the console | |
console.log(data); | |
//Uncomment to log the newly restructured dataset to the console | |
console.log(dataset); | |
//Set scale domains | |
xScale.domain([ | |
d3.min(years, function(d) { | |
return dateFormat.parse(d); | |
}), | |
d3.max(years, function(d) { | |
return dateFormat.parse(d); | |
}) | |
]); | |
yScale.domain([ | |
d3.max(dataset, function(d) { | |
return d3.max(d.leaks, function(d) { | |
return +d.amount; | |
}); | |
}), | |
0 | |
]); | |
//Make a group for each country | |
var groups = svg.selectAll("g") | |
.data(dataset) | |
.enter() | |
.append("g"); | |
//Append a title with the country name (so we get easy tooltips) | |
groups.append("title") | |
.text(function(d) { | |
return d.Month; | |
}); | |
groups.selectAll("path") | |
.data(function(d) { | |
return [ d.leaks ]; | |
}) | |
.enter() | |
.append("path") | |
.attr("class", "line") | |
.attr("d", line) | |
.attr("fill", "none") | |
.attr("stroke", "steelblue") | |
.attr("stroke-width", 2); | |
//Axes | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (h - padding[2]) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (padding[3]) + ",0)") | |
.call(yAxis); | |
}); | |
//End USA data load function | |
</script> | |
</body> | |
</html> |
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
Month | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | 2014 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jan | 219 | 182 | 196 | 511 | 143 | 143 | 131 | 197 | 174 | 184 | 119 | ||
Feb | 120 | 121 | 119 | 112 | 115 | 125 | 142 | 79 | 89 | 86 | 85 | ||
Mar | 155 | 126 | 136 | 127 | 97 | 88 | 105 | 110 | 70 | 69 | 81 | ||
Apr | 125 | 117 | 94 | 114 | 78 | 86 | 70 | 53 | 62 | 60 | |||
May | 130 | 88 | 94 | 96 | 90 | 75 | 53 | 62 | 64 | 79 | |||
Jun | 179 | 101 | 90 | 84 | 127 | 111 | 78 | 80 | 67 | 79 | |||
Jul | 131 | 110 | 152 | 89 | 117 | 148 | 130 | 98 | 121 | 61 | 98 | ||
Aug | 97 | 166 | 129 | 138 | 111 | 125 | 125 | 103 | 100 | 96 | 96 | ||
Sep | 170 | 138 | 150 | 113 | 138 | 127 | 183 | 108 | 104 | 93 | 101 | ||
Oct | 153 | 153 | 123 | 125 | 136 | 108 | 134 | 94 | 93 | 89 | 114 | ||
Nov | 151 | 135 | 119 | 175 | 89 | 106 | 111 | 101 | 124 | 103 | 102 | ||
Dec | 279 | 181 | 183 | 346 | 121 | 180 | 192 | 151 | 253 | 148 | 145 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment