D3 Examples - France Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style> 
    body { margin:2;
             position:fixed;
           top:0;
             right:0;
             bottom:0;
             left:0; 
             }
    .hidden { display: none;                
                    }
    div.tooltip { color: #222;
                            background-color: #fff;
                            padding: .5em;
                            text-shadow: #f5f5f5 0 1px 0;
                            border-radius: 2px;
                            opacity: 0.8;
                            position: absolute;
                            }
​
    
  </style>
</head>
​
<body>
  
  <div>
  <input id="slider" type="range" value="52" min="1" max="52" step="1" />
  <span id="week"> Choix de la semaine </span>
    </div>
  
  
 <script> 
 
   
   // les variables
        var width = 960,
          height = 580;
​
        var svg = d3.select( "body" ) // ajoute a l'objet "body" du DOM  un élément SVG avec
        .append( "svg" )                        // attributs width et height spécifiés. Cette opération
          .attr( "width", width )           // est stockée dans une variable 'svg' qu'on va pouvoir
          .attr( "height", height  );   // utiliser avec "svg.append("truc")..."
    
    // On rajoute un groupe englobant toute la visualisation pour plus tard
    
    var g = svg.append("g");
    
    // définit le type de projection sur plan 2D
    var projection = d3.geoConicConformal()
                                         .center([2.454071, 46.279229])
                                         .scale(2600);
​
    
    var regionFormat = d3.geoPath() // la variable spécifiant le format des 'path' générés
                                 .projection(projection);
    
    // On definit une echelle de couleur à l'affichage (via la fonction 'range')
        var color = d3.scaleQuantize()
                                    .range(["rgb(236,247,231)", 
                                    "rgb(179,228,194)",
                                                    "rgb(115,195,144)", 
                                    "rgb(49,164,118)", 
                                    "rgb(0,82,91)"])
                        .domain([0, 250]); // mettre [0, 350] pour un rendu comme le tp
     
     // couleur rouge entre les régions pour le fun
     var color2 = d3.scaleQuantize()
                                    .range(["rgb(255,255,255)", 
                                    "rgb(255,255,255)",
                                                    "rgb(186,184,94)", 
                                    "rgb(184,85,55)", 
                                    "rgb(163,43,0)"])
                        .domain([0, 253]); 
     
     
    var tooltip = d3.select('body') // définit l'ajout d'un élément 'div' au DOM
                                    .append('div')  // et stocke ceci dans une variable
                            .attr('class', 'hidden tooltip');
     
     
  
    
    // on définit un domaine de couleurs    
    //color.domain([
                //d3.min(data, function(d) { return parseFloat(d.somme2014); }),
                //d3.max(data, function(d) { return parseFloat(d.somme2014); })
        //]);
    
//      petit test d'avout de valeur dans un json  
//      d3.json("us-states.json", function(json) { 
//              json.features[5].properties.value = "Salut";
//              json.features[5].properties.value2 = "Salut ca va ?";
//              console.log(json.features[5].properties);
//    });
          
    
​
    d3.json("regions.json", function(json) {
    d3.csv("GrippeFrance2014.csv", function(data) { 
      
        var listeSemaines = Object.keys(data[0]);
​
      function drawMap(w) {
        
​
        //Ajout du nombre de malades sur le mois de novembre pour chaque région dans le                     //.json
                for (var j = 0; j < json.features.length; j++) {
                
 
           var NomRegion = json.features[j].properties.nom;
                   
          
           // récupération du nombre de malades du mois de novembre pour chaque NomRegion    
           for (var i = 0; i < data.length; i++) {   
             
               if (data[i].region == NomRegion) {
                        //On injecte la valeur de l'Etat dans le fichier 'json.features'
                    
                 //json.features[j].properties.value = parseFloat(data[i].somme2014);
                 
                     json.features[j].properties.value = Object.values(data[i])[w] ;
                       
                  
                  //  parseFloat(data[i]["02/11/14"])
                    //+ parseFloat(data[i]["09/11/14"])
                    //+ parseFloat(data[i]["16/11/14"])
                    //+ parseFloat(data[i]["23/11/14"])
                    //+ parseFloat(data[i]["30/11/14"]); 
                  //    }
                     
​
                  //json.features[j].properties.recapAnnee = Object.values(data[i]);
                 
                        //Pas besoin de chercher plus loin
                        break;
               } // fin du if
                }    // fin du for en 'i'            
            }                // fin du for en 'j' 
      
​
      
      
        
// fonction d'affichage des régions avec niveaux de couleur selon le nombre de malades
   carte = g.selectAll("path") // sélectionne tout les éléments 'path' du SVG      
                .data(json.features); // associe la i-eme ligne de la donnée "json.features"
                                                                 // au i-eme élément 'path' dans le SVG (meme si cet                                                                             // élément n'existe pas encore)  
        
        
        // code pour la creation de la carte quand les donnees sont chargees la 1e fois
       carte.enter() // permet de créer un nouvel élément 'path' pour chaque ligne de                                        // donnée non déjà affiliée à un 'path' existant: c'est le binding de 
                                 // donnée à des éléments du SVG, c'est une fonctionnalité de la 
                                 // méthode.data()
                .append("path") // lance la création des éléments 'path' manquants 
                .attr("class", "enter") // de classe 'enter'
                .attr("d", regionFormat) // associe a chaque "path" une forme, désignée par son                                                                        // attribut 'd', et qui est définie par 'regionFormat'
                // d3.select(this) ?
                .style("fill", function(d) { // applique un remplissage de chaque 'path' selon                                                                                   // le contenu de la ligne 'd' de la donnée                                                                                              // affiliée à chaque 'path'
                
                            var value = d.properties.value; //on prend la valeur recuperée plus haut            
​
                            if (value) {return color(value);} 
                else       {return "#ccc";}             // si pas de valeur alors en gris                                     
                }) // fin du style
                .attr("stroke", "white")
                //.attr("stroke", function(d) { // ajout des marges entre régions (couleur +                                                                                            // epaisseur)
                
                        //  var value = d.properties.valeur; 
           
                        //  if (value) {return color2(value);} 
            //  else       {return "white";}    
          
                //}) // fin du style) 
                .attr("stroke-width", 1)
            .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 + " : " + d.properties.value + " pour la semaine du Nouvel An" );
             }) // fin du onMouseMove
             .on('mouseout', function() {
                    tooltip.classed('hidden', true);
             }); // fin du onMouseOut
      
 
        
        
        
        
        
      // code en cas de mise a jour de la carte / de changement de semaine      
    carte.attr("class", "update")  
    
    //ou bien d.properties.valeur <--- d.properties.recapAnnee[w]
    
         .style("fill", function(d) {                   
                            var value = parseFloat(d.properties.value); 
           
                            if (value) {return color(value);} 
                else       {return "#ccc";}                                           
            }) // fin du style
    
                .attr("stroke", "white")
                .attr("stroke-width", 1)
            .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 + " : " + d.properties.value + " pour la semaine " + w );
             })
             .on('mouseout', function() {
                    tooltip.classed('hidden', true);
             });
  
    } // fin de la fonction drawMap
  
      drawMap(52);
      
      // update the elements
            function updateViz(w) {
                //console.log("update semaine " + w);
        d3.select('#week').html("Semaine du " + listeSemaines[w] );
                drawMap(w);  
            }
  
      // Action lors d'un mouvement du slider
      d3.select("#slider").on("input", function() {
                console.log("slider");  
        updateViz(+ this.value);
            }); // fin du d3.select(slider)
   
      
   });      // fin du d3.csv
   });    // fin du d3.json
         
 
  
     
     
    
    
  </script>
</body>
​
​
​
   
        
    
    
    