Great tutorial by Mike Bostock. Data from Natural Earth and insee.
France population
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