bricedev/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Great tutorial by Mike Bostock. Data from Natural Earth and insee.

  
## france.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              france.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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