Skip to content

Instantly share code, notes, and snippets.

@arisatha

arisatha/index.html

Created October 1, 2015 05:39
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 arisatha/33f7ede3e699a85f7180 to your computer and use it in GitHub Desktop.
Save arisatha/33f7ede3e699a85f7180 to your computer and use it in GitHub Desktop.
Download ZIP
Evolution of Brussels municipalities water use
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart with Multiple Lines</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<link href='http://fonts.googleapis.com/css?family=Abel:700,400,300' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-color: #01665e;
font-family: 'Abel', sans-serif;
color: #dfc27d;
padding-left: 20px;
padding-top: 20px;
}
h1 {
font-size: 30px;
padding-left: 90px;
}
h2 {
font-size: 18px;
padding-left: 90px;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: #01665e;
}
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: #80cdc1;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: #dfc27d;
}
.grid .tick{
fill: none;
stroke: #80cdc1;
opacity: 0.1;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<h1>Water use of Brussels municipalities, a 25 year evolution &nbsp; </h1>
<h2>Water use, 1989-2014. Data were available from HYDROBRU (ex IBDE) archives and <a href="http://www.hydrobru.be/documents-a-telecharger/rapports-dactivites"style="color: #bf812d">activity reports</a></h2>
<script type="text/javascript">
//Dimensions and padding
var w = 900;
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");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
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");
//Configure line generator
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);
//Load data
d3.csv("wateruse.csv", function(data) {
//Data is loaded in, but we need to restructure it.
//Remember, each line requires an array of x/y pairs;
//that is, an array of arrays, like so:
//
// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
//
//We, however, are using 'year' as x and 'amount' as y.
//We also need to know which Municipality belongs to each
//line, so we will build an array of objects that is
//structured like this:
/*
[
{
Municipality: "Australia",
wateruse: [
{ year: 1961, amount: 90589.568 },
{ year: 1962, amount: 94912.961 },
{ year: 1963, amount: 101029.517 },
…
]
},
{
Municipality: "Bermuda",
wateruse: [
{ year: 1961, amount: 176.016 },
{ year: 1962, amount: 157.681 },
{ year: 1963, amount: 150.347 },
…
]
},
…
]
*/
//Note that this is an array of objects. Each object
//contains two values, 'Municipality' and 'wateruse'.
//The 'wateruse' value is itself an array, containing
//more objects, each one holding 'year' and 'amount' values.
//New array with all the years, for referencing later
var years = ["1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011","2012","2013","2014"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this Municipality's name and empty array
dataset[i] = {
Municipality: data[i].MunicipalityName,
wateruse: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the wateruse data array
//for this Municipality
dataset[i].wateruse.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.wateruse, function(d) {
return +d.amount;
});
}),
0
]);
//Make a group for each Municipality
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g");
//Append a title with the Municipality name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.Municipality;
});
//Within each group, create a new line/path,
//binding just the wateruse data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.wateruse ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "#deebf7")
.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);
// Adding tick lines grid
d3.selectAll("g.axis g.tick")
.append("line")
.attr("class", "grid")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", w - 200)
.attr("y2", 0);
// End tick lines grid
});
//End USA data load function
</script>
</body>
</html>
Raw
wateruse.csv
MunicipalityName Indicator 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Anderlecht water use 4861582 3937911 3974461 3937683 4361144 4038612 4145250 4025105 4004317 4060709 4111353 4172702 4261314 4253635 4524935 4634342 4492482 4679047 4548298 4592428 4676621 4988495 5038882 4623219 4985242 4918427
Auderghem water use 1510106 1519905 1479527 1577372 1498223 1594841 1592297 1526599 1482504 1477037 1490125 1491392 1478398 1489342 1518697 1483558 1455554 1437465 1475635 1458710 1421168 1412556 1479607 1506874 1447865 1477440
Berchem-Sainte-Agathe water use 866980 796790 817238 923748 815483 793589 798147 883836 851619 805079 810172 830889 847872 823077 822262 845924 849874 796189 845539 837157 892890 850351 879988 873068 887951 893041
Bruxelles water use 13950520 12016729 11579866 12075529 11339779 11835981 12300146 11460832 11295040 11195296 11231403 11809292 12039129 12126964 12584737 12835076 12049188 12062210 12181262 12273491 11872998 11287801 12429949 12660019 11976359 11474193
Etterbeek water use 2083167 2125987 2206628 2166252 2083483 2202810 2198942 2201247 2145725 2123300 2191442 2243173 2207662 2196896 2307554 2291737 2285864 2259285 2163887 2175107 2189505 2338891 2186572 2267821 2168804 2310456
Evere water use 1646626 1435545 1604591 1552755 1458288 1473521 1443038 1424539 1412472 1378773 1400474 1392430 1492993 1434850 1520653 1439276 1516052 1475409 1488189 1494125 1504437 1469436 1517539 1432724 1607681 1595260
Forest water use 2707082 2222074 2277922 2450648 2344871 2407290 2435334 2360054 2268337 2266981 2236817 2252503 2381357 2432244 2480214 2486507 2503036 2444693 2360375 2339587 2308028 2471094 2340352 2278530 2483845 2332316
Ganshoren water use 884131 825183 949502 885778 869210 850102 843570 859170 863988 842298 815407 835060 839388 854983 838441 865031 866356 855033 865468 862464 958823 784879 881029 893107 875849 892000
Ixelles water use 4343448 4358424 4649523 4667125 4521196 4343487 4392226 4300686 4341433 4334647 4203168 4491931 4644349 4652584 4718581 4734465 4725991 4760422 4611566 4559421 4541635 4621258 4655469 4795059 4658527 4762115
Jette water use 1773041 1838860 1873699 1777365 1699666 1787890 1805693 1728324 1685641 1697727 1727731 1723113 1764232 1811568 1843863 1839719 1880972 1808170 1823002 1817267 1896092 1967528 1875238 1841403 1975850 1992572
Koekelberg water use 628518 658482 668116 713987 697607 699959 686045 710358 696180 654459 707001 710541 747961 756348 762239 801636 791432 795087 773747 786372 798242 797902 820188 835531 791382 862480
Molenbeek-Saint-Jean water use 2944028 2876584 2999807 2990444 2965082 2978290 3125128 3147319 3080519 3087164 3141656 3269038 3374400 3429505 3526318 3679260 3623458 3571350 3542454 3571563 3717114 3786411 3758407 3797317 3501007 3771272
Saint-Gilles water use 2482259 2357860 2589149 2593809 2547280 2388470 2421374 2479350 2496071 2410694 2454439 2542723 2663149 2689482 2687652 2763557 2736965 2691176 2653563 2708330 2884361 2383187 2624887 2741386 2693971 2763763
Saint-Josse-ten-Noode water use 1547882 1237597 1315235 1281709 1223822 1292705 1313264 1299726 1238876 1248880 1284297 1326205 1404681 1400582 1469081 1465061 1446977 1452816 1493107 1522142 1476585 1642319 1420569 1448053 1531589 1545374
Schaerbeek water use 4167323 4522223 4876460 4804383 4906441 5226039 4511863 4716722 4807469 4787827 4579931 4942519 5206398 5136830 5159965 5278309 5403191 5415650 5209939 5372306 6087278 4719953 5644297 5535867 5360875 5486022
Uccle water use 4596141 4632503 4492998 4528563 4510916 4034294 4323555 4322945 4163600 4161906 4111971 4126117 4188861 4206717 4212988 4194550 4031131 4041981 3962552 3723563 3885978 3876165 3872654 3975212 3779824 4003251
Watermael-Boitsfort water use 1270028 1247020 1260045 1311469 1214171 1038347 1596997 1188657 1176687 1222092 1216445 1290324 1266235 1263177 1229035 1188312 1277509 1208216 1147357 958034 1275564 918899 1204976 1483048 1141538 1050626
Woluwe-Saint-Lambert water use 2794591 2675743 2700898 2627121 2722689 2671196 2661375 2557638 2593959 2464719 2536569 2479470 2571132 2532272 2575661 2542293 2534257 2512370 2558364 2489308 2506886 2571450 2485042 2555264 2639277 2601952
Woluwe-Saint-Pierre water use 1985892 2162534 2206476 2201991 2198604 1970470 2165954 2152081 2047100 2064307 2059608 2106181 2112390 2060712 2093147 2122111 2032638 2023954 2021962 1931960 1971863 1942611 1898242 1922910 1923506 1899310
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment