tlfrd/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A recreation of the first choropleth

  
## data.csv

          
            name
            illiteracy

            
              Ain
              10

            
              Aisne
              10

            
              Allier
              30

            
              Alpes-de-Haute-Provence
              10

            
              Hautes-Alpes
              10

            
              Alpes-Maritimes
              10

            
              Ardèche
              10

            
              Ardennes
              10

            
              Ariège
              10

            
              Aube
              4

            
              Aude
              10

            
              Aveyron
              10

            
              Bouches-du-Rhône
              10

            
              Calvados
              10

            
              Cantal
              30

            
              Charente
              10

            
              Charente-Maritime
              8

            
              Cher
              10

            
              Corrèze
              10

            
              Corse-du-Sud
              10

            
              Haute-Corse
              10

            
              Côte-d'Or
              10

            
              Côtes-d'Armor
              10

            
              Creuse
              10

            
              Dordogne
              10

            
              Doubs
              10

            
              Drôme
              10

            
              Eure
              10

            
              Eure-et-Loir
              4

            
              Finistère
              10

            
              Gard
              10

            
              Haute-Garonne
              10

            
              Gers
              10

            
              Gironde
              10

            
              Hérault
              10

            
              Ille-et-Vilaine
              10

            
              Indre
              10

            
              Indre-et-Loire
              8

            
              Isère
              10

            
              Jura
              10

            
              Landes
              10

            
              Loir-et-Cher
              8

            
              Loire
              10

            
              Haute-Loire
              30

            
              Loire-Atlantique
              10

            
              Loiret
              8

            
              Lot
              10

            
              Lot-et-Garonne
              10

            
              Lozère
              10

            
              Maine-et-Loire
              10

            
              Manche
              10

            
              Marne
              4

            
              Haute-Marne
              10

            
              Mayenne
              10

            
              Meurthe-et-Moselle
              10

            
              Meuse
              10

            
              Morbihan
              10

            
              Moselle
              10

            
              Nièvre
              10

            
              Nord
              7

            
              Oise
              10

            
              Orne
              10

            
              Pas-de-Calais
              7

            
              Puy-de-Dôme
              30

            
              Pyrénées-Atlantiques
              10

            
              Hautes-Pyrénées
              10

            
              Pyrénées-Orientales
              10

            
              Bas-Rhin
              7

            
              Haute-Rhin
              7

            
              Rhône
              10

            
              Haute-Saône
              10

            
              Saône-et-Loire
              10

            
              Sarthe
              10

            
              Savoie
              10

            
              Haute-Savoie
              10

            
              Paris
              4

            
              Seine-Maritime
              7

            
              Seine-et-Marne
              4

            
              Yvelines
              4

            
              Deux-Sèvres
              8

            
              Somme
              10

            
              Tarn
              10

            
              Tarn-et-Garonne
              10

            
              Var
              10

            
              Vaucluse
              10

            
              Vendée
              8

            
              Vienne
              8

            
              Haute-Vienne
              10

            
              Vosges
              10

            
              Yonne
              4

            
              Territoire de Belfort
              10

            
              Essonne
              4

            
              Hauts-de-Seine
              4

            
              Seine-Saint-Denis
              4

            
              Val-de-Marne
              4

            
              Val-d'Oise
              4

## france.json

      
Display the source blob

    
Display the rendered blob

    
    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>

.border{
  stroke-width:.3px;
  fill:none;
  stroke:#333;
}
svg {
  font: 10px sans-serif;
}
.caption{
  font-weight: bold;
  fill: black;
}
.key path {
  display: none;
}
.key line{
  stroke:#000;
  shape-rendering:crispEdges;
}

</style>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960;
var height = 500;

var colorArray = ['#000000', '#3f3f3f', '#7e7e7e', '#d3d3d3', 'white'];

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var color = d3.scaleThreshold()
  .domain([5, 8, 9, 20, 38])
  .range(colorArray);

// A position encoding for the key only.
var x = d3.scaleLinear()
  .domain([0, 38])
  .range([0, 200]);

var xAxis = d3.axisBottom()
  .scale(x)
  .tickSize(13)
  .tickValues(color.domain());

var projection = d3.geoAlbers()
  .center([2, 49.5])
  .rotate([-2.8, 3])
  .parallels([45, 55])
  .scale(2500)
  .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

d3.json("france.json", function(error1, france) {
	d3.csv("data.csv", function(error2, illiteracy) {
    if (error1) throw error1;
    if (error2) throw error2;

    var g = svg.append("g")
        .attr("class", "key")
        .attr("transform", "translate(40,40)");

    g.selectAll("rect")
      .data(color.range().map((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', d => x(d[0]))
      .attr('width', d => x(d[1]) - x(d[0]))
      .style('fill', d => color(d[0]));

    g.call(xAxis).append('text')
      .attr('class', 'caption')
      .attr('dy',-10)
    	.attr('dx', 30)
      .text('Illiteracy (%)');

    svg.selectAll('.departements')
      .data(topojson.feature(france, france.objects.regions).features)
      .enter().append('path')
      .attr('class', 'departements')
      .attr('d', path)
      .style('fill', (departement) => {
        var paringData = illiteracy.filter((illiteracy) => {
          return departement.properties.name === illiteracy.name;
        })[0];
        return paringData ? color(paringData.illiteracy) : color(0);
      });

    svg.append('path')
      .datum(topojson.mesh(france, france.objects.regions, (a, b) => { return a.properties.name !== b.properties.name || a === b; }))
      .attr('class','border')
      .attr('d', path);

  });
});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	name	illiteracy
	Ain	10
	Aisne	10
	Allier	30
	Alpes-de-Haute-Provence	10
	Hautes-Alpes	10
	Alpes-Maritimes	10
	Ardèche	10
	Ardennes	10
	Ariège	10
	Aube	4
	Aude	10
	Aveyron	10
	Bouches-du-Rhône	10
	Calvados	10
	Cantal	30
	Charente	10
	Charente-Maritime	8
	Cher	10
	Corrèze	10
	Corse-du-Sud	10
	Haute-Corse	10
	Côte-d'Or	10
	Côtes-d'Armor	10
	Creuse	10
	Dordogne	10
	Doubs	10
	Drôme	10
	Eure	10
	Eure-et-Loir	4
	Finistère	10
	Gard	10
	Haute-Garonne	10
	Gers	10
	Gironde	10
	Hérault	10
	Ille-et-Vilaine	10
	Indre	10
	Indre-et-Loire	8
	Isère	10
	Jura	10
	Landes	10
	Loir-et-Cher	8
	Loire	10
	Haute-Loire	30
	Loire-Atlantique	10
	Loiret	8
	Lot	10
	Lot-et-Garonne	10
	Lozère	10
	Maine-et-Loire	10
	Manche	10
	Marne	4
	Haute-Marne	10
	Mayenne	10
	Meurthe-et-Moselle	10
	Meuse	10
	Morbihan	10
	Moselle	10
	Nièvre	10
	Nord	7
	Oise	10
	Orne	10
	Pas-de-Calais	7
	Puy-de-Dôme	30
	Pyrénées-Atlantiques	10
	Hautes-Pyrénées	10
	Pyrénées-Orientales	10
	Bas-Rhin	7
	Haute-Rhin	7
	Rhône	10
	Haute-Saône	10
	Saône-et-Loire	10
	Sarthe	10
	Savoie	10
	Haute-Savoie	10
	Paris	4
	Seine-Maritime	7
	Seine-et-Marne	4
	Yvelines	4
	Deux-Sèvres	8
	Somme	10
	Tarn	10
	Tarn-et-Garonne	10
	Var	10
	Vaucluse	10
	Vendée	8
	Vienne	8
	Haute-Vienne	10
	Vosges	10
	Yonne	4
	Territoire de Belfort	10
	Essonne	4
	Hauts-de-Seine	4
	Seine-Saint-Denis	4
	Val-de-Marne	4
	Val-d'Oise	4
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.border{
	stroke-width:.3px;
	fill:none;
	stroke:#333;
	}
	svg {
	font: 10px sans-serif;
	}
	.caption{
	font-weight: bold;
	fill: black;
	}
	.key path {
	display: none;
	}
	.key line{
	stroke:#000;
	shape-rendering:crispEdges;
	}

	</style>
	<body>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 960;
	var height = 500;

	var colorArray = ['#000000', '#3f3f3f', '#7e7e7e', '#d3d3d3', 'white'];

	var svg = d3.select("svg")
	.attr("width", width)
	.attr("height", height);

	var color = d3.scaleThreshold()
	.domain([5, 8, 9, 20, 38])
	.range(colorArray);

	// A position encoding for the key only.
	var x = d3.scaleLinear()
	.domain([0, 38])
	.range([0, 200]);

	var xAxis = d3.axisBottom()
	.scale(x)
	.tickSize(13)
	.tickValues(color.domain());

	var projection = d3.geoAlbers()
	.center([2, 49.5])
	.rotate([-2.8, 3])
	.parallels([45, 55])
	.scale(2500)
	.translate([width / 2, height / 2]);

	var path = d3.geoPath()
	.projection(projection);

	d3.json("france.json", function(error1, france) {
	d3.csv("data.csv", function(error2, illiteracy) {
	if (error1) throw error1;
	if (error2) throw error2;

	var g = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(40,40)");

	g.selectAll("rect")
	.data(color.range().map((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', d => x(d[0]))
	.attr('width', d => x(d[1]) - x(d[0]))
	.style('fill', d => color(d[0]));

	g.call(xAxis).append('text')
	.attr('class', 'caption')
	.attr('dy',-10)
	.attr('dx', 30)
	.text('Illiteracy (%)');

	svg.selectAll('.departements')
	.data(topojson.feature(france, france.objects.regions).features)
	.enter().append('path')
	.attr('class', 'departements')
	.attr('d', path)
	.style('fill', (departement) => {
	var paringData = illiteracy.filter((illiteracy) => {
	return departement.properties.name === illiteracy.name;
	})[0];
	return paringData ? color(paringData.illiteracy) : color(0);
	});

	svg.append('path')
	.datum(topojson.mesh(france, france.objects.regions, (a, b) => { return a.properties.name !== b.properties.name \|\| a === b; }))
	.attr('class','border')
	.attr('d', path);

	});
	});

	</script>