France population by bricedev

index.html

<!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>

population.csv

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