D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    div.tooltip {
    position: absolute;
    text-align: center;
    color: black;
    width: 275px;
    height: 37px;
    padding: 2px;
    font: 12px sans-serif;
    background: grey;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
        sliderContainer {
            position: relative;
            top: 900px;
        }
        
  </style>
  <div id="sliderContainer">
        <input id="timeslide" type="range" value="1" min="1" max="52"  step="1"/>
        <span id="range">time slider</span>
  </div>
​
</head>
​
<body>
  <script>
     var inputValue = null;
    var parseTime = d3.timeParse("%d/%m/%Y");
       var width = 700, height = 580;
   var svg = d3.select( "body" ).append( "svg" )
         .attr( "width", width )
         .attr( "height", height );
   var g = svg.append( "g" ); 
   var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
   var path = d3.geoPath().projection(projection);
   // On definit une echelle de couleur
    var col=[ '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d','#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728','#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#c49c94'];
    
   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)"]);
   // Chargement des donnees
    var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
     var time = new Array();
   d3.csv("GrippeFrance2014.csv", function(data) {
         //Set input domain for color scale
         color.domain([
             d3.min(data, function(d) { return d.value; }), 
             d3.max(data, function(d) { return d.value; })
         ]);
         d3.json("regions.json", function(json) {
           
        
​
           
         
           for (var i = 0; i < data.length; i++) {
             var sum =  0 ;
            //Nom de l'etat
            var dataState = data[i].region;
​
            //Valeur associee a l'etat        
            var dataValue = parseFloat(data[i].somme2014);
            //Recherche de l'etat dans le GeoJSON
             
        for (var key in data[i]){
          time.push(key);
     var attrName = key;
       
    if(key != 'region' && key != 'somme2014' && key.includes('/11/14')){
        var attrValue = data[i][key];
                        sum += parseInt(attrValue,10);
          
​
            for (var j = 0; j < json.features.length; j++) {
              
                var jsonState = json.features[j].properties.nom;
                if (dataState == jsonState) {
                    //On injecte la valeur de l'Etat dans le json
                    json.features[j].properties.value = dataValue;
                  json.features[j].properties.sum = sum;
                        
                                          
                }
              
            }    
          }          
        }
        
             
           
           } 
           
           
    
           
             
         g.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr('class', 'department')
        .attr("d", path)
                     .style("fill", function(d) {
                //on prend la valeur recuperee plus haut
                var value = d.properties.sum;
              
                if (value > 150) {
                  
                    return '#008910';
                } 
           
           else   if (value > 100 && value < 150) {
                  
                    return '#00b214';
                } 
                  else   if (value > 70 && value < 100) {
                  
                    return '#00f91d';
                }
                      else   if (value > 30 && value < 70) {
                  
                    return '#42fe58';
                }
                      else   if (value <30) {
                  
                    return '#7aff89';
                }
           else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            })
        .on("mouseover", function(d) {
                
                
            div.transition()        
                .duration(200)
                .style("opacity", .9);      
            div.html(
                  "Région : " + d.properties.nom + "<br>" + 
            "sum of november =" + d.properties.sum)  
                .style("left", (d3.event.pageX + 30) + "px")     
                .style("top", (d3.event.pageY - 30) + "px")
                    
        })
        
        .on("mouseout", function(d) {
            div.transition()
                .duration(500)
                .style("opacity", 0);
            div.html("")
                .style("left", "0px")
                .style("top", "0px")
                
        })
        var weeksArray = Object.keys(data[0]);
​
      d3.select("#timeslide").on("input", function() {
        update(+this.value);
        updateViz(+this.value);
    });
           
    // update the elements
    function updateViz(value) {
        console.log("update " + "value");
        d3.select('#week').html(weeksArray[value]);
        drawMap(value);  
    }
           
           function drawMap(currentWeek) {
  carte = svg.selectAll("path")
    .data(json.features);
​
  // code en cas de mise a jour de la carte / de changement de semaine
  carte
    .attr("class", "update")
​
​
  // code pour la creation de la carte quand les donnees sont chargees la 1e fois.
  carte.enter()
    .append("path")
    .attr("class", "enter")
    
}
    function update(value) {
        document.getElementById("range").innerHTML=time[value];
        inputValue = time[value];
        d3.selectAll("path")
            .style("fill", timeMatch(value));
    }
​
    function timeMatch(value) {
       
        if (time[value].includes('/01/14') ){
​
            return '#ffbb78';
          
        }
        
          else  if (time[value].includes('/02/14') ){
​
              return '#ff75b0';
            
        }
            else  if (time[value].includes('/03/14')){
         return '#faff7a';
        }
             
          else  if (time[value].includes('/04/14')){
         return '#a6ff7a';
        }
            else  if (time[value].includes('/05/14')){
         return '#7afffc';
        }
               else  if (time[value].includes('/06/14')){
         return '#425efe';
        }
            else  if (time[value].includes('/07/14')){
         return '#009e12';
        }
             
          else  if (time[value].includes('/08/14')){
         return '#c77aff';
        }
            else  if (time[value].includes('/09/14')){
         return '#977aff';
        }           else  if (time[value].includes('/10/14')){
         return '#00c61d';
        }
               else  if (time[value].includes('/11/14')){
         return '#ff7a89';
        }
            else  if (time[value].includes('/12/14')){
         return '#603000';
        }
             
       
        else {
           return '#5aa02b' ;
        }
      
      
    }
​
    function initialState(data){
                return '#cb181d'
     
    }
           
    });
});
   
​
​
  </script>
</body>
​
    