D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .region {
        fill: #000;
        stroke: #fff;
        stroke-width: 0.4px;
    }
​
    .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;
    }
    
  </style>
</head>
​
<body>
  <div>
    <input id="slider" type="range" value="1" min="1" max="52" step="1" />
    <span id="date">NA</span>
    </div>
  <script>
    
        var width = 850,
            height = 600;
​
        var svg = d3.select( "body" )
                .append( "svg" )
                .attr( "width", width )
                .attr( "height", height );
    
    var tooltip = d3.select('body')
                                    .append('div')
                            .attr('class', 'hidden tooltip');
    
    // Une variable pour le nombre de semaines
    var numberOfWeeks = 0;
    
    // Une variable pour la semaine a afficher
    var displayedWeek = 1;
    
    // Une variable pour le slider  
​
    var projection = d3.geo.conicConformal()
                       .center([0, 44.74])
                       .scale(3000)
                       .translate([width/2, height/2]);
​
    var path = d3.geo.path()
                 .projection(projection);
   
    // On definit une echelle de couleur
    var color = d3.scale.quantize()
                                .range(["#fff5f0","#fee0d2","#fcbba1","#fc9272",
"#fb6a4a","#ef3b2c","#cb181d","#99000d"]);
    
    // Un objet JSON pour contenir les regions avec les info de grippe
    var regionsGrippe = {};
    
    // Un tableau pour stocker les noms des colonnes correspondant a des dates
    var weeksDates = new Array();
    // Un tableau pour stocker les valeurs max de grippe
    var maxByWeek = new Array();
    // Un tableau pour stocker les valeurs min de grippe
    var minByWeek = new Array();
    // Une variable pour le maximum global
    var globalMax = 0;
    
    // Chargement des données
    queue()   // permet de charger les fichiers de manière asynchrone
        .defer(d3.json, "regions.json")
        .defer(d3.csv, "GrippeFrance2003-15.csv")
        .await(processData);  
    // une fois les fichiers chargé, la fonction processData
    // est appelée avec les fichiers en arguments
    
    function processData(error,francejson,grippedata) {
          // chargement des données de grippes
      
            for (i = 0; i < grippedata.length; i++) {
          // Nom de l'etat
          var dataState = grippedata[i].region;       
          // Un tableau pour chaque date des données grippe
          var valueByDate = new Array();
          // Le nombre de semaines
          var numberOfDates = 0;
          // Les colonnes
          var headerNames = d3.keys(grippedata[0]);
          // On itere sur les mois
          headerNames.forEach(function(column) {         
            var date = dateFormat.parse(column); 
​
            //si la colonne est une date
            if(date != null) { 
              var grippeValue = parseFloat(grippedata[i][column]);
              numberOfDates ++;
              if (grippeValue > globalMax) {
                globalMax = grippeValue;
              }
              if(!maxByWeek[numberOfDates] || maxByWeek[numberOfDates] <    grippeValue) {
                maxByWeek[numberOfDates] = grippeValue;
                                 
              }
              if(!minByWeek[numberOfDates] || minByWeek[numberOfDates] >    grippeValue) {                
                if(grippeValue < maxByWeek[numberOfDates]){
                  minByWeek[numberOfDates] = grippeValue;
                }
                // Si il n'y a pas suffisament de données
                else
                    minByWeek[numberOfDates] = maxByWeek[numberOfDates] - 1;
                                 
              }
                            weeksDates[numberOfDates] = date; 
              valueByDate[numberOfDates] =(parseFloat(grippeValue));          
            }
            }); 
          
          // On met a jour le nombre de semaine si besoin
          if (numberOfDates > numberOfWeeks)
            numberOfWeeks = numberOfDates;
        
          //Recherche de l'etat dans le GeoJSON
          for (var j = 0; j < francejson.features.length; j++) {
            var jsonState = francejson.features[j].properties.nom;
            
            if (dataState == jsonState) {
              //On injecte la valeur de l'Etat dans le json
              francejson.features[j].properties.grippeByDate = valueByDate;
​
              //Pas besoin de chercher plus loin
              break; 
            }         
            }               
        };
      
      // On set le max du slider
      d3.select('#slider').attr("max", numberOfWeeks);
​
      //color.domain([minByWeek[displayedWeek], maxByWeek[displayedWeek]]);
      color.domain([0, globalMax]);
      
      d3.select('#date').html(dateFormat(weeksDates[displayedWeek]));
      // Ajout du tooltip et des interactions
      svg.selectAll("path")
            .data(francejson.features)
          .enter()
          .append("path")
          .attr("d", path)
            .style("stroke", "grey") 
            // colorer la map
            .style("fill", colorer)
​
        
            //Mise en place du tooltip
            .attr('class', function(d) {
                return 'region ' + d;
            })
            .attr('d', path)
            .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] + 15) +
          'px; top:' + (mouse[1] - 35) + 'px')
          .html(d.properties.nom + " " + "</br>Grippe : " + (d.properties.grippeByDate ? String(d.properties.grippeByDate[displayedWeek]) : "Undefined"))
        })
        .on('mouseout', function() {
            tooltip.classed('hidden', true);
            svg.selectAll("path")
                .data(francejson.features)
            .transition().duration(200)
                .style("opacity", 1);
        })
        .on('mouseover', function() {
            var stateUnderMouse = this;
            svg.selectAll("path")
                .data(francejson.features)
            .transition()
            .duration(200)
            .style('opacity',function () {
                    return (this === stateUnderMouse) ? 1.0 : 0.5;
                    });
        });
      
      // On sauvegarde les fichier JSON modifié
      regionsGrippe = francejson;
            drawLegend();
            
    };
    
    // On definit une fonction pour colorer la carte
    var colorer = function(d) {    
                                var grippe = d.properties.grippeByDate;
                            if (grippe && color(grippe[displayedWeek])) {
                        return color(grippe[displayedWeek]);
                    } else {
                      // si pas de valeur alors en gris
                      return "#ccc";
                    }
                            };
    
    // On ajoute un listener sur le slider
    d3.select("#slider").on("input", function() {
      displayedWeek = +this.value;
      console.log("slider update "+displayedWeek);
            updateViz(+this.value);
    });
    
    function updateViz(dateValue) {
      //color.domain([minByWeek[displayedWeek], maxByWeek[displayedWeek]]);
      d3.select('#date').html(dateFormat(weeksDates[displayedWeek]));
      drawMap(regionsGrippe, dateValue);     
    };
    
    // On définit une fonction pour mettre à jour la vue
    function drawMap(json, currentWeek) {
      carte = svg.selectAll("path").data(json.features);
      
      // code en cas de mise a jour de la carte / de changement de semaine
      carte.style("fill", colorer);  
    }
    
    function drawLegend(){
            // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.range())
    .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", function(d) { return d;});
​
  // draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return (color.invertExtent(d));})
    };
    
    //Format de la date
    var dateFormat = d3.time.format('%d/%m/%y');
    var i = 0;
        
​
  </script>
</body>
​
​
    