TP5

forked from aurelient's block:

forked from satacroteam's block: TP4 grippe france

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <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>
<style>
  .axis path,
  .axis tick,
  .axis line {
      fill: none;
      stroke: #dddddd;
  }

.axis text {
      font-size: 12px;
      fill: #AAAAAA;
      font-weight: 400;
  }

.legendTitle {
      font-size: 14px;
      fill: #4F4F4F;
      font-weight: 300;
  }
body {
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  fill: #8C8C8C;
  text-align: left;
}
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #000000;
        background-color: #fff9fa;
        padding: .2em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.85;
        position: absolute;
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<div>
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="semaine">semaine</span>
</div>
<body>
  <script>

var width = 760,
   height = 500;
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
    var svg = d3.select( "body" )
     .append( "svg" )
     .attr( "width", width )
     .attr( "height", height );
    
    var g = svg.append( "g" ); 
    var max_feature = 0;
    var projection = d3.geo.conicConformal()
    .translate([width/2, height/2])
    .center([1.454071, 45.6]).scale(2800);
    
    var path = d3.geo.path()
                 .projection(projection);
    
     var color = d3.scale.linear()
        .domain([0,2000/3,2000])
        .range(["#56d65d", "#ce9b35","#851e0e"])
        .interpolate(d3.interpolateHcl);
          
    queue()   // permet de charger les fichiers de manière asynchrone
     .defer(d3.json, "us-states.json")
     .defer(d3.csv, "GrippeFrance2003-15.csv")
     .await(processData)

function processData(error, regions, grippe) {
      
      // On affecte les données aux régions
      var min = 0
      var max = 0  
    for(var data of grippe) {
        var dataRegion = data["regions"];
        var value = d3.values(data);

value.splice(0, 1);
        value.splice(value.length+1, 1);
console.log(value.length)
        // Recherche de la région dans le GeoJson
        for (var j = 0; j < regions.features.length; j++) {
          var jsonRegion = regions.features[j].properties.nom;
          if (dataRegion == jsonRegion) {
            //On injecte la valeur de la région dans le json
            regions.features[j].properties.values = value;
            value_temp = value
            tempmax = d3.max(value_temp.map(Number))
            if (tempmax > max) {max=tempmax}
            break;
            }
          }
       }
      max = 2600;
      drawMap(regions, 0)
      
      // Valeurs possibles du slider
      var week_slider = d3.keys(grippe[0]);
      d3.select('#slider').attr("max", week_slider.length-2)
      
      // Récupération de la valeur
      function updateViz(value){
      d3.select("#semaine").html("Semaine du " + week_slider[value])
      drawMap(regions, value)
      } 
      
      function drawMap(regions, currentWeek) {
        carte = svg.selectAll("path")
          .data(regions.features);

// Mise à jour de la carte
        carte
          .attr("class", "update")
          .style("fill", function(d) {
          try { var value1 = d.properties.values[currentWeek];
               
          }
          catch(err) { }
                    
          if (value1) {
            return color(value1);
          } else { 
            // si pas de valeur alors en gris
            return "#ccc";
          }})
.on('mousemove', function(d) {

});
        
        
        // Première carte
if (currentWeek == 0){
        carte.enter()
          .append("path")
          .attr("d", path)
          .attr("class", "enter")
              .style("fill", "##ccc");
          }}
      
      
      d3.select("#slider").on("input", function() {
updateViz(+this.value)
      })
      
      //Initialisation
      updateViz(1);

}
    // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
       
  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

// draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return Math.round(d);})

svg.append("text")  
  .attr("x", (width / 2)+50) 
	.attr("y", 450 )
	.attr("text-anchor", "middle") 
	.style("font-size", "18px") 
	.attr("fill","black")
	.text(" Carte de l'évolution de la grippe en France entre 2003 et 2015");
  </script>
</body>

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js