Skip to content

Instantly share code, notes, and snippets.

@bricedev
Last active April 27, 2017 07:37
Show Gist options
  • Save bricedev/97c53d6ed168902239f7 to your computer and use it in GitHub Desktop.
Save bricedev/97c53d6ed168902239f7 to your computer and use it in GitHub Desktop.
France population
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.border {
stroke-width: .3px;
fill: none;
stroke: #333;
}
.caption {
font-weight: bold;
}
.key path {
display: none;
}
.key line {
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
var width = 960,
height = 500,
formatNumber = d3.format("s");
var color = d3.scale.threshold()
.domain([250000, 500000, 750000, 1000000, 1250000,1500000,1750000])
.range(["#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]);
var x = d3.scale.linear()
.domain([77156, 2579208])
.range([0, 300]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(13)
.tickValues(color.domain())
.tickFormat(function(d) { return formatNumber(d); });
var projection = d3.geo.albers()
.center([0, 49.5])
.rotate([-2.8, 3])
.parallels([45, 55])
.scale(2500)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select('body').append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(" + 40 + "," + 40 + ")");
g.selectAll("rect")
.data(color.range().map(function(currentColor) {
var d = color.invertExtent(currentColor);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]); })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.style("fill", function(d) { return color(d[0]); });
g.call(xAxis).append("text")
.attr("class", "caption")
.attr("y", -6)
.text("Population");
queue()
.defer(d3.json, "france.json")
.defer(d3.csv, "population.csv")
.await(ready);
function ready(error, france, population) {
var regions = svg.selectAll(".departements")
.data(topojson.feature(france, france.objects.regions).features)
.enter().append("path")
.attr("class", "departements")
.attr("d", path)
.style("fill",function(departement){
var paringData = population.filter(function(population){ return departement.properties.name === population.name; })[0];
return paringData ? color(paringData.population) : color(0);
});
svg.append("path")
.datum(topojson.mesh(france, france.objects.regions, function(a, b) { return a.properties.name !== b.properties.name || a === b; }))
.attr("class","border")
.attr("d", path);
};
</script>
name population
Ain 603827
Aisne 541302
Allier 342729
Alpes-de-Haute-Provence 160959
Hautes-Alpes 138605
Alpes-Maritimes 1081244
Ardèche 317277
Ardennes 283110
Ariège 152286
Aube 303997
Aude 359967
Aveyron 275813
Bouches-du-Rhône 1975896
Calvados 685262
Cantal 147577
Charente 352705
Charente-Maritime 625682
Cher 311694
Corrèze 242454
Corse-du-Sud 145846
Haute-Corse 168640
Côte-d'Or 525931
Côtes-d'Armor 594375
Creuse 122560
Dordogne 415168
Doubs 529103
Drôme 487993
Eure 588111
Eure-et-Loir 430416
Finistère 899870
Gard 718357
Haute-Garonne 1260226
Gers 188893
Gironde 1463662
Hérault 1062036
Ille-et-Vilaine 996439
Indre 230175
Indre-et-Loire 593683
Isère 1215212
Jura 261294
Landes 387929
Loir-et-Cher 331280
Loire 749053
Haute-Loire 224907
Loire-Atlantique 1296364
Loiret 659587
Lot 174754
Lot-et-Garonne 330866
Lozère 77156
Maine-et-Loire 790343
Manche 499531
Marne 566571
Haute-Marne 182375
Mayenne 307031
Meurthe-et-Moselle 733124
Meuse 193557
Morbihan 727083
Moselle 1045146
Nièvre 218341
Nord 2579208
Oise 805642
Orne 290891
Pas-de-Calais 1462807
Puy-de-Dôme 635469
Pyrénées-Atlantiques 656608
Hautes-Pyrénées 229228
Pyrénées-Orientales 452530
Bas-Rhin 1099269
Haut-Rhin 753056
Rhône 1744236
Haute-Saône 239695
Saône-et-Loire 555999
Sarthe 565718
Savoie 418949
Haute-Savoie 746994
Paris 2249975
Seine-Maritime 1251282
Seine-et-Marne 1338427
Yvelines 1413635
Deux-Sèvres 370939
Somme 571211
Tarn 377675
Tarn-et-Garonne 244545
Var 1012735
Vaucluse 546630
Vendée 641657
Vienne 428447
Haute-Vienne 376058
Vosges 378830
Yonne 342463
Territoire de Belfort 143348
Essonne 1225191
Hauts-de-Seine 1581628
Seine-Saint-Denis 1529928
Val-de-Marne 1333702
Val-d'Oise 1180365
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment