Skip to content

Instantly share code, notes, and snippets.

@arisatha

arisatha/Electricityuse.csv

Created November 28, 2015 10:20
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/8c9d6894b17d30e91898 to your computer and use it in GitHub Desktop.
Save arisatha/8c9d6894b17d30e91898 to your computer and use it in GitHub Desktop.
Download ZIP
Population density of Brussels' municipalities
Raw
Electricityuse.csv
Municipality NaturalGasuse Electricityuse Wateruse Population Populationdensity Medianage Averageincomeperinh Officefloorarea area
Anderlecht 984522 418180 4985242 113462 6394 36.7 11261.46 524024.95 17.74
Auderghem 320704 115611 1447865 32350 3581 40.1 17696.27 321760.72 9.03
Berchem-Sainte-Agathe 176914 72438 887951 23410 7937 38.95 15046.42 90167.02 2.95
Bruxelles 2573584 1686285 11976359 168576 5170 36.23 11864.3 6428826.88 32.61
Etterbeek 450486 183664 2168804 46228 14679 37.31 13610.23 358748.68 3.15
Evere 290449 215504 1607681 37364 7446 38.89 13191.12 399182.19 5.02
Forest 545031 139242 2483845 54024 8646 37.56 13746.41 135030.32 6.25
Ganshoren 178241 52290 875849 23664 9638 40.52 15004.99 18431.33 2.46
Ixelles 926258 343715 4658527 84216 13274 37.65 14512.63 939731.17 6.34
Jette 406521 131501 1975850 49411 9797 38.52 14371.01 61758.5 5.04
Koekelberg 124386 44221 791382 21025 17932 35.78 12195.21 30600.32 1.17
Molenbeek-Saint-Jean 519024 212687 3501007 94653 16065 34.77 9844.19 402963.29 5.89
Saint-Gilles 445780 172708 2693971 50377 19953 35.73 11487.78 532159.4 2.52
Saint-Josse-ten-Noode 260427 183108 1531589 27207 23818 33.18 8241.88 958689.4 1.14
Schaerbeek 920251 331260 5360875 130587 16043 34.62 10906.66 751794.71 8.14
Uccle 912934 269110 3779824 80487 3513 41.67 18706.78 241409.7 22.91
Watermael-Boitsfort 290179 89269 1141538 24467 1892 42.44 19130.74 242765.6 12.93
Woluwe-Saint-Lambert 567628 240750 2639277 52592 7279 40.85 16403 412974.99 7.22
Woluwe-Saint-Pierre 434530 118082 1923506 40535 4580 41.91 18850.44 187846.65 8.85
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar Chart, Framed</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: lightGray;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 15px 0 10px 5px;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: white;
}
g.bar text {
font-size: 14px;
font-weight: bold;
text-anchor: end;
opacity: 0;
fill: white;
}
g.bar:hover rect {
fill: orange;
}
g.bar:hover text {
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10.5px;
margin: 0px 0 0px 5px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Population density of Brussels municipalities</h1>
<p>Brussels&rsquo; municipalities population density (inh/km²). <strong>Source:</strong> <a href="http://www.ibsa.irisnet.be/?set_language=fr">IBSA, 2011</a></p>
</div>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 30, 120 ]; //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");
//Now SVG goes into #container instead of body
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
var thousands = d3.format(",");
d3.csv("Electricityuse.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.Populationdensity, +b.Populationdensity);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.Populationdensity;
}) ]);
heightScale.domain(data.map(function(d) { return d.Municipality; } ));
//Bind data to groups (not bars directly)
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "bar");
//Add a rect to each group
var rects = groups.append("rect")
.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Municipality);
})
.attr("width", 0)
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue");
//Add a text element to each group
groups.append("text")
.attr("x", function(d) {
return padding[3] + widthScale(d.Populationdensity) - 3;
})
.attr("y", function(d) {
return heightScale(d.Municipality) + 17;
})
.text(function(d) {
return thousands(d.Populationdensity);
});
rects.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("width", function(d) {
return widthScale(d.Populationdensity);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment