D3 Examples - Vizu_Part1

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    h1 {
      text-align : center;
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      position: relative;
        left: 30px;
        border: 3px solid   #B0E0E6;
    }
​
    .province {
        fill: #000;
        stroke: #fff;
        stroke-width: 1px;
    }
    .province:hover {
       
    }
    .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;
    }
    .hiddenViz {
        display: none;
    }
    div.tooltipViz {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
  </style>
</head>
​
<body>
​
  <h1>Comparison of the quality of TER flows</h1>
  <div>
    <input id="sliderYear" type="range" value="1" min="1" max="5" step="1" />
    <span id="year">year </span>
  </div>
   <div>
    <input id="slider" type="range" value="1" min="1" max="12" step="1" />
    <span id="month">month </span>
  </div>
  <script>
  
        
        var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
    var carte;
    
    // French map 
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2500);
   
    
    // On definie une echelle de couleur
        var color = d3.scaleQuantize()  
                .range(["rgb(213,239,204)", 
                  "rgb(169,221,160)", 
                  "rgb(94,186,97)", 
                  "rgb(42,141,71)", 
                  "rgb(0,91,36)"]);
    var nbrColors = 5;
    var minG = 0 , maxG = 0; // Used for legend
     /*Area containing the name and the value of each region*/
    var tooltip = d3.select('body')
                                    .append('div')
                                    .attr('class', 'hidden tooltip');
    /****************************** HISTO *****************************************/
    var tooltipViz = d3.select('body')
                            .append('div')
                            .attr('class', 'hiddenViz tooltipViz');
    /************************************************************************/
​
 
  
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);     
    
   d3.csv("TER_France2013_2017.csv", function(data) {
     
         var jsonF;
         var listDates = Object.keys(data[0]);
         var listYears  = []; // Will contain [2013,2014,2015,2016]
             var listMonths  = []; // Will contain [Janvier,...,Decembre]
         var currentYear = 1;  //"2013";
         var currentMonth = 1; //"Janvier";
            //console.log("Liste des dates :" + String(listDates[5]));
                // console.log("DATA " + Object.values(data[0])[0]);
       //  console.log("data[1]" +Object.values(data[listDates[1]]));
                /*Begin legend*/
                var element;
                minG = parseFloat(Object.values(data[0])[1]);
                maxG = parseFloat(Object.values(data[0])[1]);
           for (var i = 0; i < data.length; i++) {
             for(var j = 1; j < listDates.length-4; j++){
               //console.log("ELEMENT : ===> data : "+Object.values(data[i])[j]);
                element = parseFloat(Object.values(data[i])[j]);
              if (element < minG ){
                minG = element;
              } 
              if (element > maxG ){
                maxG = element;
              }
             }
           }
     // console.log("MAX =  : "+maxG + " MIN =  : "+ minG);
                 pas = (maxG - minG)/nbrColors;
             //console.log("Pas "+ pas);
     drawLegende(minG, maxG,pas);
                /*End legend*/
     
         for(var m = 1; m< listDates.length; m++){
           var datee = listDates[m].split(" ");
            //console.log("Date ====> "+ datee[1]);//listMonths
           // console.log("Date ====> "+ listMonths)
            if (listYears.findIndex(p => p == datee[1]) === (-1)) {
                                listYears.push(datee[1]);
            }
            if (listMonths.findIndex(p => p == datee[0]) === (-1)) {
              if(datee[0] != "Somme2013" && datee[0] != "Somme2014" && datee[0] != "Somme2015" && datee[0] != "Somme2016" && datee[0] != "Somme2017"){
                                listMonths.push(datee[0]);
              }
            }
           
         }  
        d3.json("regions.json", function(json) {
            // first value for slider
            var first = listDates[1].split(" ");
          // first value for sliderYear
            var firstYear = listYears[0];
            var firstMonth = listMonths[0];
            //d3.select('#month').html(first[0]);
            d3.select('#month').html(firstMonth);
            d3.select('#year').html(firstYear);
            // update the month in slider
            d3.select("#slider").on("input", function() {
              //currentMonth = listMonths[this.value-1];
              currentMonth = +this.value; 
              //console.log("currentMonth" + currentMonth);
              updateViz(+this.value);
            });
          
            d3.select("#sliderYear").on("input", function() { 
             //currentYear = listYears[this.value-1];
              currentYear = +this.value;
             // console.log("currentYear" + currentYear);
              updateViz2(+this.value);
            });
          
        //On fusionne les donnees avec le GeoJSON des regions
        for (var i = 0; i < data.length; i++) {
          // Find the name of the region in csv file
          var dataState = data[i].region;
          //console.log("DataState : " + dataState )
            for (var j = 0; j< json.features.length; j++){
            // Find the name of the region in json file
            var jsonState = json.features[j].properties.nom;//
            if (dataState == jsonState) {
              json.features[j].properties.tab =  Object.values(data[i]);
              //console.log(json.features[j].properties.tab);
                //stop because result found
               break;
            }
          }
        }
         
 
       var path = svg.selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", path);
        
        jsonF = json; 
        drawMap(currentMonth, currentYear);  
          
        }); // End of "regions.json"
      
      //update elements 
        function updateViz(val){
        d3.select('#month').html(listMonths[val-1]);
        drawMap(currentMonth, currentYear); 
        };
      
      function updateViz2(valY){
        d3.select('#year').html(listYears[valY-1]);
        drawMap(currentMonth, currentYear); 
      };
           
      // Draw the mapvar 
​
      function drawMap(monthBis, yearBis){
        var nbr;
        var currentDate = 12*(yearBis-1)+monthBis ;
        //fevrier 2017 => 2017 = 5 fevrier 2 ====> 12*(yearBis-1)+monthBis
        // console.log("cu rrentDate ==========> " + currentDate);
        /********************************** Histo ************************************/
        var colorH = d3.scaleOrdinal(d3.schemeCategory2);
        var moyFrance = 0;
        var valRegion;
        var nbrReg = 0;
        for (var i = 0; i < data.length; i++) {
          if(Object.values(data[i])[currentDate]){
            moyFrance+= parseFloat(Object.values(data[i])[currentDate]);
            nbrReg++;
            //console.log("REGION "+Object.values(data[i])[0] +"   "+ nbrReg);
          }          
        }
        moyFrance = parseFloat(moyFrance/nbrReg).toFixed(2);
        /************************************************************************/
        //Set input domain for color scale
            color.domain([ minG,maxG]);
              
        carte = svg.selectAll("path")
           .data(jsonF.features);
        carte
          .on('mousemove', function(d) {
                        if( d.properties.tab == undefined || d.properties.tab == "NaN"){
                        nbr = "undefined";
                    }else { 
                      nbr = d.properties.tab[currentDate]; 
                }
                var mouse = d3.mouse(svg.node()).map(function(d) {
                 return parseInt(d);
              });
          
              tooltip.classed('hidden', false)
                     .attr('style', 'left:' + (mouse[0] + 50) +
                             'px; top:' + (mouse[1] - 35) + 'px')
                     .html(d.properties.nom + ":" + parseFloat(nbr).toFixed(2)+ " %");
 /*******************************HISTO***************************************/
              var dataHist ;
              if(isNaN(parseFloat(nbr).toFixed(2))){
                valRegion = 0 ;
              }else{
                valRegion = parseFloat(nbr).toFixed(2);
              };
                dataHist = [moyFrance, valRegion];
            console.log("VALUES : "+ dataHist);
             tooltipViz.classed('hiddenViz', false)
                     .attr('style', 'left:' +5+'px; top:' +150 + 'px')
                     .html(" ");
                var svgHisto = d3.select( "div.tooltipViz" )
                .append( "svg" )
                .attr( "width", 200 )
                .attr( "height", 200 );////////////////////////////
          var g = svgHisto.append("g").attr("transform", "translate(100, 0)");
           var x = d3.scaleLinear().range([0, 200]).domain([0, dataHist.length]);
                 var y = d3.scaleLinear().range([0, 100]).domain([0, d3.max(dataHist)]);
           g.selectAll("text").data(dataHist).enter().append("text")
            .text(function(d,i) { if(i==0){return "National "+d+"%   ";}else{return "Regional "+d+"%";} })
            .attr("y", 200)
            .attr("x", function(d, i) { return x(i)-20; })
            .style("font-size", 12)
            .style("text-anchor", "middle")
            .style("font-family", "monospace");
         
          g.selectAll("rect").data(dataHist).enter().append("rect")
            .attr("x", function(d, i) { return x(i)-100; })
            .attr("y", function(d) { return 170-y(d); })
            .attr("height", function(d) { return y(d); })
            .attr("width", 200 / dataHist.length - 50 )
            .style("fill", function(d, i){ if(i==1) {return "#f05f40";}else {return"red";}});
​
                   // Add axis X
​
          svgHisto.append("g")
              .attr("transform", "translate(0," + 170 + ")")
              .call(d3.axisBottom(x));
​
          // Add the Y Axis
          svgHisto.append("g")
              .call(d3.axisLeft(y));
          
         /* svgHisto.append("g").append("rect")
                        .attr("x", "France")
                        .attr("y", 10);
          
             svgHisto.append("g")
                     .attr("class", "axis axis--x")
                     .attr("transform", "translate(0," + 100 + ")")
                     .call(d3.axisBottom(x));
             // text label for the x axis
             svgHisto.append("text") 
                     .style("text-anchor", "middle")
                     .text("France   Region")
                     .style("font-size", "15px")
                     .style("Font-Weight","Bold");*/ /**********************************************************************/
​
              })
            .on('mouseout', function() {
              tooltip.classed('hidden', true);
          
              /********************************HISTO*************************************/
                tooltipViz.classed('hiddenViz',true)                                                                            /**************************************************************/
              });
        
        //code in case of update of the map / change of month 
        carte 
         .attr('class', function(d) {
                return 'province ' + d.properties.code;
             })
         .attr('d', path)
         .style("fill", function(d) {
                // get value found above
                var tab = d.properties.tab;
                    if (tab && tab[currentDate] != "") {
                  // console.log("tabbbbb ==>" + tab[currentDate]);
                    return color(tab[currentDate]);
                } else { 
                    // if no value then color with Grey
                    return "#ccc";
                }
                
                
            });
          
      }; // End of drawMap//
   
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
            /*Function to add legende */
      function drawLegende(min, max,pas){
          var c = color;
          var limites = [];
          c.domain([min,max]);
            //console.log("limites Avant : "+ limites);
          var bool;
          for(var it=min; it<max; it = it+pas){
            limites.push(it);
          }
                    //console.log("limites Apres : "+ limites);//
          var legend = svg.selectAll(".legend")
                          .data(limites)
                          .enter()
                          .append("g")
                          .attr("class", "legend")
                          .attr("transform", function(d, i) {
                              return "translate(0," + i * 20 + ")"; 
                          });
​
          legend.append("rect")
                .attr("x", width - 18)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function(d) { return color(d); });
​
          legend.append("text")
                .attr("x", width - 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function(d) { var dPas = d+ pas; return parseFloat(d).toFixed(2) + " %-" + parseFloat(dPas).toFixed(2)+ " %" ; }); 
          
        
      } 
​
   }); // End of "d3.csv..
​
 
​
  </script>
​
</body>
​
    