tlfrd · July 5, 2017 12:36
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/france.json b/france.json
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/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>