Old school D3 from simpler times

All examples By author By category About

Renaud-D-Harreville

Full window Github gist

TP4 Data viz france ESSAI UCBL 2017

Built with blockbuilder.org

forked from aurelient's block:

forked from aurelient's block: TP4 Data viz UCBL 2017

forked from Renaud-D-Harreville's block: TP4 Data viz UCBL 2017

forked from anonymous's block: TP4 Data viz UCBL 2017

forked from anonymous's block: TP4 Data viz UCBL 2017

forked from Renaud-D-Harreville's block: TP4 Data viz france UCBL 2017

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
  </style>
</head>

<body>
  <div>
  	<input id="slider" type="range" value="1" min="1" max="52" step="1" />
  <span id="week">week</span>
</div>
  <script>
    
    /****** Définition des variables globales ****/
    var dataGrippe;
    var geoJsonFrance;
    var width = 700,
  		  height = 580;

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

var carte;
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);

var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    // On definit une echelle de couleur
   var color = d3.scaleQuantize()  
         .range(["rgb(237,248,233)", "rgb(186,228,179)",
         "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]);
    color.domain([0, 2000]);
    
    d3.select("#slider").on("input", function() {
      d3.select('#week').html(" valeur de la semaine selectionnée ");
      console.log("lol");
      
			updateMap(+this.value);
		});
    
    
    /***** Recupération des données ******/
    
    d3.queue()
      .defer(d3.csv, "grippe.csv")
      .defer(d3.json, "france.json")
      .await(function(error, grippe, france) {
      if (error) {
        console.error('Oh dear, something went wrong: ' + error);
      }
      else {
        dataGrippe = grippe;
        geoJsonFrance = france;
        
        mergeAndDisplayData();
      }
    });
    
    
    /*********   fonctions d'execution    ********/
    
    
    function mergeAndDisplayData() {
      var sum = 0;
      for (var i = 0; i < dataGrippe.length; i++) {
          sum += +dataGrippe[i]["somme2014"];
        }
      
      for (var i = 0; i < dataGrippe.length; i++) {
          var total = +dataGrippe[i]["somme2014"];
          //console.log(data);
          var ratio = (total / sum) * 200 * 100;
          //var ratio = (+dataGrippe[i]["01/06/14"] * 2000 * 100) / total;
          //console.log(ratio);
          geoJsonFrance.features[i].properties["value"] = ratio;
        
        }
      carte = svg.selectAll("path")
    		.data(geoJsonFrance.features);
      
      carte.enter()
          .append("path")
          .style("fill", function(d) { return color(d.properties.value); })
      		.attr("class", "enter")
            .attr("d", path);
    	console.log("fini");
    }
    
    function updateMap(val) {
      console.log(val);
      for (var i = 0; i < dataGrippe.length; i++) {
          var total = +dataGrippe[i]["somme2014"];
          //var ratio = (total / sum) * 200 * 100;
          var ratio = (+dataGrippe[i]["01/06/14"] * 2000 * 100) / total;
          //console.log(ratio);
          geoJsonFrance.features[i].properties["value"] = ratio;
        
        }
      
      carte
        .style("fill", function(d) { return color(d.properties.value); }) 
    		.attr("class", "update")
        .attr("d", "path");
      	
    }

</script>
</body>

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