Skip to content

Instantly share code, notes, and snippets.

@arisatha

arisatha/Electricityuse.csv

Created September 15, 2015 02:47
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/8bf0adb8dac3ada6eac7 to your computer and use it in GitHub Desktop.
Save arisatha/8bf0adb8dac3ada6eac7 to your computer and use it in GitHub Desktop.
Download ZIP
Bar chart energy use of Brussels' municipalities
Raw
Electricityuse.csv
Municipality NaturalGasuse Electricityuse Wateruse Population Populationdensity Medianage Averageincomeperinh Officefloorarea area
Anderlecht 984522 418180 4985242 113462 6394.34 36.7 11261.46 524024.95 17.74
Auderghem 320704 115611 1447865 32350 3581.14 40.1 17696.27 321760.72 9.03
Berchem-Sainte-Agathe 176914 72438 887951 23410 7936.79 38.95 15046.42 90167.02 2.95
Bruxelles 2573584 1686285 11976359 168576 5170.1 36.23 11864.3 6428826.88 32.61
Etterbeek 450486 183664 2168804 46228 14678.71 37.31 13610.23 358748.68 3.15
Evere 290449 215504 1607681 37364 7445.83 38.89 13191.12 399182.19 5.02
Forest 545031 139242 2483845 54024 8646.42 37.56 13746.41 135030.32 6.25
Ganshoren 178241 52290 875849 23664 9638.24 40.52 15004.99 18431.33 2.46
Ixelles 926258 343715 4658527 84216 13273.6 37.65 14512.63 939731.17 6.34
Jette 406521 131501 1975850 49411 9797.29 38.52 14371.01 61758.5 5.04
Koekelberg 124386 44221 791382 21025 17932.2 35.78 12195.21 30600.32 1.17
Molenbeek-Saint-Jean 519024 212687 3501007 94653 16065.23 34.77 9844.19 402963.29 5.89
Saint-Gilles 445780 172708 2693971 50377 19953.36 35.73 11487.78 532159.4 2.52
Saint-Josse-ten-Noode 260427 183108 1531589 27207 23817.8 33.18 8241.88 958689.4 1.14
Schaerbeek 920251 331260 5360875 130587 16042.7 34.62 10906.66 751794.71 8.14
Uccle 912934 269110 3779824 80487 3513.18 41.67 18706.78 241409.7 22.91
Watermael-Boitsfort 290179 89269 1141538 24467 1891.83 42.44 19130.74 242765.6 12.93
Woluwe-Saint-Lambert 567628 240750 2639277 52592 7279.33 40.85 16403 412974.99 7.22
Woluwe-Saint-Pierre 434530 118082 1923506 40535 4579.51 41.91 18850.44 187846.65 8.85
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Electricity use</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #485975;
font-family: Helvetica, Arial, sans-serif;
color: #deebf7;
}
h1 {
font-size: 30px;
margin: 0;
}
h2 {
font-size: 18px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: #485975;
}
rect:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: #deebf7;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: #deebf7;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
.grid {
fill: none;
stroke: #deebf7;
opacity: 0.2;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<h1>Energy use of Brussels' municipalities &nbsp; </h1>
<p>Source: <a href="http://www.sibelga.be/uploads/assets/250/fr/1340092765968-Sibelga-rapport-annuel-2011.pdf" style="color: orange">SIBELGA</a>, 2011 &nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Electrity use of Brussels' municipalities &nbsp;</h2>
<script type="text/javascript">
var w = 1000;
var h = 600;
var padding = [ 20, 55, 30, 130 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svgElec = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Adding thousands separator (also add this function every time text is returned)
var thousands = d3.format(",");
d3.csv("Electricityuse.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.Electricityuse, +b.Electricityuse);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.Electricityuse;
}) ]);
heightScale.domain(data.map(function(d) { return d.Municipality; } ));
var rects = svgElec.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Municipality);
})
.attr("width", function(d) {
return widthScale(d.Electricityuse);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#deebf7")
.attr("opacity", 0.85)
.append("title")
.text(function(d) {
return d.Municipality + "'s electricity use is " + thousands(d.Electricityuse) + " MWh";
});
// Adding labels
var labels = svgElec.selectAll("text")
.data(data)
.enter()
.append("text");
labels.attr("x", function(d) {
return widthScale(d.Electricityuse) + padding[3] + 5;
})
.attr("font-size", "11px")
.attr("fill", "#deebf7")
.attr("y", function(d) {
return heightScale(d.Municipality) + padding[0] - 2 ;
})
.text(function(d) {
return thousands(d.Electricityuse);
});
// End labels
// Draw axis
svgElec.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svgElec.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
// End axis
// Adding tick lines grid
d3.selectAll("g.axis g.tick")
.append("line")
.attr("class", "grid")
.attr("x1", 0)
.attr("y1", -768)
.attr("x2", 0)
.attr("y2", 0);
// End tick lines grid
});
</script>
<p>&nbsp;</p>
<h2>Natural gas use of Brussels' municipalities &nbsp;</h2>
<script type="text/javascript">
var w = 1000;
var h = 600;
var padding = [ 20, 55, 30, 130 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svgGas = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// Adding thousands separator (also add this function every time text is returned)
var thousands = d3.format(",");
d3.csv("Electricityuse.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.NaturalGasuse, +b.NaturalGasuse);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.NaturalGasuse;
}) ]);
heightScale.domain(data.map(function(d) { return d.Municipality; } ));
var rects = svgGas.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Municipality);
})
.attr("width", function(d) {
return widthScale(d.NaturalGasuse);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#deebf7")
.attr("opacity", 0.85)
.append("title")
.text(function(d) {
return d.Municipality + "'s natural gas use is " + thousands(d.NaturalGasuse) + " MWh";
});
// Adding labels
var labels = svgGas.selectAll("text")
.data(data)
.enter()
.append("text");
labels.attr("x", function(d) {
return widthScale(d.NaturalGasuse) + padding[3] + 5;
})
.attr("font-size", "11px")
.attr("fill", "#deebf7")
.attr("y", function(d) {
return heightScale(d.Municipality) + padding[0] - 2 ;
})
.text(function(d) {
return thousands(d.NaturalGasuse);
});
svgGas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svgGas.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", -768)
.attr("x2", 0)
.attr("y2", 0);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment