bricedev/README.md

## README.md

      
        

                Raw

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

  

  

## france.json

      
        
            
              
              
            

                Raw

        
        
          
            
          
          
            
              france.json
            
          
        
      
    
    

          
    
      
      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