TP#4: grippe et régions françaises

URL de la page blockbuilder : http://blockbuilder.org/tblondelle/49ce327730ac219f30acbfa7ea09b682

Par Thomas Blondelle, 3 décembre 2017

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;right:0;bottom:0;left:0; 
      background-color: #0e2c33 
    }
		
    h1 {
      color: white
    }

.hidden {
        display: none;
    }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
       }

.ticks {
	  font: 10px sans-serif;
	}

.track,
	.track-inset,
	.track-overlay {
	  stroke-linecap: round;
	}

.track {
	  stroke: #000;
	  stroke-opacity: 0.3;
	  stroke-width: 10px;
	}

.track-inset {
	  stroke: #ddd;
	  stroke-width: 8px;
	}

.track-overlay {
	  pointer-events: stroke;
	  stroke-width: 50px;
	  stroke: transparent;
	  cursor: crosshair;
	}

.handle {
	  fill: #fff;
	  stroke: #000;
	  stroke-opacity: 0.5;
	  stroke-width: 1.25px;
	}

</style>

</head>

<body>

// Layout 
    var margin = {
    	top: 20,
        bottom: 20,
    	left: 20,
        right: 20
    },
        width = 960,
        height = 500;

// Elements of SVG
    var title = d3.select('body').append('h1')
        .attr("class", "title")

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)

var slider = svg.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + margin.top + "," + margin.left + ")");

var map = svg.append("g")
        .attr("class", "map")
        .attr("transform", "translate(" + margin.top + "," + margin.left*2 + ")");

var tooltip = d3.select('body').append('div')
        .attr('class', 'hidden tooltip');

// Variables for maps
    var projection = d3.geoConicConformal()
        .center([2.4, 44.3])
        .scale(2000);

var path = d3.geoPath() // mapping des donnees
            .projection(projection);

// Variables for range.
    var color = d3.interpolateRdYlGn
    
	var x = d3.scaleLinear()
	    .range([0, width])
	    .clamp(true);

// Others
    var fields = [],
        index = 0;

var clean_data;

d3.csv("GrippeFrance2014.csv", function(data) {

// Set slider maximum.
		data["columns"].forEach(function(d){
			if (d !== "region" && d !== "somme2014"){
				fields.push(d)
			}
		})	
    
		x.domain([0, fields.length - 1])

d3.json("regions.json", function(json) {

for (var i = 0; i < data.length; i++) {
        var regionNom = data[i].region;
        var dataValue = data[i];

//Recherche de la region dans le GeoJSON
        for (var j = 0; j < json.features.length; j++) {
          var regionProperties = json.features[j].properties;
          if (regionProperties.nom == regionNom) {
            //On injecte la valeur de l'Etat dans le json
            regionProperties.value = dataValue;
            //Pas besoin de chercher plus loin
            break;
          }
        }
      }

//console.log("data");
      //console.log(data);
      //console.log("json");
      console.log(json);

map.selectAll("g.map").data(json.features).enter()
        .append("path")
        .attr("d", path)
        .style("fill", "#ccc")
        .on('mousemove', function(d) {
          var mouse = d3.mouse(svg.node()).map(function(d) {
            return parseInt(d);
          });
          tooltip.classed('hidden', false)
            .attr('style', 'left:' + (mouse[0]) +
                  'px; top:' + (mouse[1] + 30 ) + 'px')

function print_map(index){
        var maxi = d3.max(data, function(d) { return +d[fields[index]]})

map.selectAll("g.map > path")
          .transition()
          .style("fill", function(d,i){
            var value = d.properties.value;
            if (value){
              return color(1 - value[fields[index]]/maxi)
            } else {                 
              return "#ccc";            
            };
          })
        }

slider.append("line")
            .attr("class", "track")
            .attr("x1", x.range()[0])
            .attr("x2", x.range()[1])
          .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-inset")
          .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-overlay")
            .call(d3.drag()
                .on("start.interrupt", function() {
                    console.log("oui");
                    slider.interrupt(); })
                .on("start drag", function() {
          				action_slider(x.invert(d3.event.x));
        				}));

var handle = slider.insert("circle", ".track-overlay")
            .attr("class", "handle")
            .attr("r", 9);

function action_slider(h) {
            handle.attr("cx", x(h));
            index = parseInt(h)
            print_map(index)
            title.html("Number of cases of flu on the " + fields[index]);
        }

title.html("Number of cases of flu on the " + fields[index]);

print_map(1);

});
});
	
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js