Skip to content

Instantly share code, notes, and snippets.

@arisatha

arisatha/Electricityuse.csv

Created December 3, 2015 23:29
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/a1fee745a6dd90b4715d to your computer and use it in GitHub Desktop.
Save arisatha/a1fee745a6dd90b4715d to your computer and use it in GitHub Desktop.
Download ZIP
Mapping the Urban Metabolism of Brussels
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>Choropleth</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
font-family: "nyt-cheltenham",georgia,Lucida sans,
"times new roman",times,serif;
}
#container {
width: 700px;
height: 850px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h2 {
font-size: 28px;
border-top: solid 8px #222222;
border-bottom: solid 8px #222222;
}
p {
font-size: 14px;
line-height: 18px;
padding: 20px;
border-bottom: solid 2px #222222;
}
path text {
text-anchor: center;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: AliceBlue;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
div.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container">
<h2> Mapping the Urban Metabolism of Brussels </h2>
<p> How much Brussels municipalities consume in 2011 ?
</br>
</br>
On the map below you can choose to see how Brussels municipalities compare
in terms of electricity use (in MWh), natural gas use (in MWh) or water use (m³).
</br>
</br>
As you can see electricity, natural gas and water use have a similar spatial pattern.</p>
<button id="ele">Eletricity use</button>
<button id="gas">Natural gas use</button>
<button id="wat">Water use</button>
</div>
<script type="text/javascript">
//eletricity of ele data to map
//Width and height
var w = 700;
var h = 850;
//Define quantize scale to sort data values into
var colele = d3.scale.linear()
.domain([0 , 90000 , 150000 , 270000 , 400000 , 1686285 ])
.range(["#ffffd4", "#fee391", "#fec44f", "#fe9929", "#d95f0e", "#993404"]);
var colgas = d3.scale.linear()
.domain([0 , 200000 , 320000 , 500000 , 1000000 , 2573584 ])
.range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);
var colwat = d3.scale.linear()
.domain([0 , 1205000 , 1900000 , 2650000 , 6000000 , 11976359])
.range(["#eff3ff", "#c6dbef", "#9ecae1", "#6baed6", "#3182bd", "#08519c"]);
//Define map projection
var projection = d3.geo.conicConformal()
.center([4.37, 50.84])
.scale(220000)
.translate([350, 300]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
// div for the tooltip
var div = d3.select("#container").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Create SVG
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("output.geojson", function(json) {
//Load in ele data
d3.csv("Electricityuse.csv", function(data) {
//Set input domain for color scale
//colele.domain([
// d3.min(data, function(d) { return +d[eletricity]; }),
// d3.max(data, function(d) { return +d[eletricity]; })
//]);
//loop through data to add properties
for (var ii=0;ii<data.length;ii++) {
for (var jj=0;jj<json.features.length;jj++) {
// matching key is id
if (data[ii].Municipality==json.features[jj].properties.NAME_FRE) {
//Copy the data value into the GeoJSON
json.features[jj].properties.Elec = +data[ii].Electricityuse ;
json.features[jj].properties.Gas = +data[ii].NaturalGasuse;
json.features[jj].properties.Water = +data[ii].Wateruse;
}
} // end loop jj
} // end loop ii
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("class","Municipality")
.attr("fill","#ccc")
}); //End d3.csv()
}); //End d3.json()
d3.select("#ele").on("click", function() {
svg.selectAll(".Municipality")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.properties.NAME_FRE + "<br/>" +d.properties.Elec +" MWh")
.style("left", (d3.event.pageX +5) + "px")
.style("top", (d3.event.pageY +5) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg.selectAll(".Municipality")
.transition()
.attr("fill",function(d){
return colele(d.properties.Elec)});
})
d3.select("#gas").on("click", function() {
svg.selectAll(".Municipality")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.properties.NAME_FRE + "<br/>" +d.properties.Gas+" MWh")
.style("left", (d3.event.pageX+5) + "px")
.style("top", (d3.event.pageY +5) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg.selectAll(".Municipality")
.transition()
.attr("fill",function(d){
return colgas(d.properties.Gas)});
})
d3.select("#wat").on("click", function() {
svg.selectAll(".Municipality")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.properties.NAME_FRE + "<br/>" +d.properties.Water+" m³")
.style("left", (d3.event.pageX +5) + "px")
.style("top", (d3.event.pageY +5) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg.selectAll(".Municipality")
.transition()
.attr("fill",function(d){return colwat(d.properties.Water)});
})
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
output.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment