Skip to content

Instantly share code, notes, and snippets.

@bessiec
Last active August 23, 2016 20:18
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 bessiec/7901f8fd88d750ad23f8 to your computer and use it in GitHub Desktop.
Save bessiec/7901f8fd88d750ad23f8 to your computer and use it in GitHub Desktop.
D3 Water Leaks in City of Los Angeles
<!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>
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