Skip to content

Instantly share code, notes, and snippets.

@arisatha

arisatha/Electricityuse.csv

Created September 20, 2015 14:35
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/5bd5c4e0b07a51934209 to your computer and use it in GitHub Desktop.
Save arisatha/5bd5c4e0b07a51934209 to your computer and use it in GitHub Desktop.
Download ZIP
Electricity vs. Population: any correlation?
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;
padding-left: 20px;
padding-top: 20px;
}
h1 {
font-size: 20px;
margin: 0;
}
h2 {
font-size: 18px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: #485975;
}
circle: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;
}
.grid .tick{
fill: none;
stroke: #deebf7;
opacity: 0.2;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 340px;
height: 30px;
padding: 2px;
font: 14px sans-serif;
color: #deebf7;
background: orange;
border: 0px;
border-radius: 4px;
/* pointer-events: none; This line needs to be removed */
}
</style>
</head>
<body>
<h1>Electricity use vs. Population in Brussels municipalities: any correlation? &nbsp; </h1>
<p>Source: Electricity use <a href="http://www.sibelga.be/uploads/assets/250/fr/1340092765968-Sibelga-rapport-annuel-2011.pdf" style="color: orange">SIBELGA</a>, 2011; Population <a href="http://www.ibsa.irisnet.be/fichiers/chiffres/1.1_population_evolution.xls" style="color: orange">IBSA</a>, 2011 &nbsp; </p>
<p>&nbsp;</p>
<br>This graph presents the relationship between electricity use and the number of inhabitants in Brussels Capital Region municipalities. </br>
<br>While it is visible that most municipalities are grouped at the bottom left part of the graph and seem to have a high correlation coefficient, there is an outliar at the top right corner. This municipality (Brussels) is by far the largest and has a number of offices that distort this graph. </br>
<br>By hovering your mouse on the data points you can read the exact values (Electricity use and Population) of each municipality. This option is still a bit shaky at the moment.</br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript">
// Set the dimensions of the canvas / graph
var w = 1000;
var h = 600;
var padding = [ 20, 55, 60, 100 ]; //Top, right, bottom, left margins
//range of xScale
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
//range of xScale
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//setting the x-axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
//setting the y-axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// Define 'div' for tooltips
var div = d3.select("body")
.append("div") // declare the tooltip div
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0); // set the opacity to nil
//setting the svg canvas (width and height are defined before)
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(",");
function make_x_axis() {
return d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
}
function make_y_axis() {
return d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(9)
}
//getting the data
d3.csv("Electricityuse.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.Electricityuse, +b.Electricityuse);
});
//setting the domain of xScale (min and max)
xScale.domain([
d3.min(data, function(d) {
return +d.Population;
}),
d3.max(data, function(d) {
return +d.Population;
})
]);
//setting the domain of yScale (min and max)
yScale.domain([
d3.max(data, function(d) {
return +d.Electricityuse;
}),
d3.min(data, function(d) {
return +d.Electricityuse;
})
]);
var circles = svgElec.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.Population)
})
.attr("cy", function(d) {
return yScale(d.Electricityuse)
})
.attr("r", 7)
.attr("fill", "#deebf7")
.attr("opacity", 0.85)
// when the mouse moved over this code is executed on the div element (initiates the introduction of the tooltip)
.on("mouseover", function(d) {
div.transition()
.duration(50)
.style("opacity", 0);
div.transition()
.duration(600)
.style("opacity", .95);
div .html(
// The first <a> tag
d.Municipality + "'s electricity use is " + thousands(d.Electricityuse) + " MWh" +
// closing </a> tag
"<br/>" + " and its population is " + thousands(d.Population)+ " inhabitants")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
// when the mouse moved off this code is executed on the div element
.on("mouseout", function(d) {
div.transition()
.duration(100)
.style("opacity", 0);
});
// Draw axis
svgElec.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]+ 10) + ")")
.call(xAxis);
svgElec.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] -10) + ",0)")
.call(yAxis);
// End axis
svgElec.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + (h - padding[2]+ 10) + ")")
.call(make_x_axis()
.tickSize(-h+68, 0, 0)
.tickFormat("")
);
svgElec.append("g")
.attr("class", "grid")
.attr("transform", "translate(" + (padding[3] -10) + ")")
.call(make_y_axis()
.tickSize(-w + 245, 0, 0)
.tickFormat("")
);
// Adding tick x-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 x-lines grid
// Add the text label for the X axis
svgElec.append("text")
.attr("transform",
"translate(" + (w/2) + " ," +
(h - 10) + ")")
.style("text-anchor", "middle")
.text("Electricity use")
.attr("fill", "#deebf7");
// Add the text label for the Y axis
svgElec.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("x", padding[0] - (h / 2))
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Population")
.attr("fill", "#deebf7");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment