Viz_Part2_Compare

forked from AminaSGitHub's block: Compare ?

<!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: 0px;
    	border: 1px solid 	#B0E0E6;
    }
    svgR {
      position: relative;
    	left: 0px;
    	border: 3px solid 	#B0E0E6;
    }

.province {
        fill: #000;
        stroke: #fff;
        stroke-width: 1px;
    }
    .province:hover {
        opacity: 0.5;
    }
    .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;
    }
    div.tooltipR {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
    .provinceR {
        fill: #000;
        stroke: #fff;
        stroke-width: 1px;
    }
    .provinceR:hover {
        opacity: 0.5;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="svgL" style="float:left;width:50%;">  
      <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>
    </div>
    <div class="svgR" style="float:left;width:50%;">
      <div> 
          <input id="sliderYearR" type="range" value="1" min="1" max="5" step="1" />
          <span id="yearR">year </span>
        </div>
        <div>
          <input id="sliderR" type="range" value="1" min="1" max="12" step="1" />
          <span id="monthR">month </span>
        </div>
    </div>
  </div>  
  <script>
    /***************************** FIRST *******************************/

var width = 500,
  		  height = 580;

var svg = d3.select( "body" ).selectAll("div.svgL")
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );
    var carte;
    var minG,maxG,pas;
    // French map 
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2500)
    .translate([300,300]);
   
    
    // 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;
     /*Area containing the name and the value of each region*/
    var tooltip = d3.select('body')
    								.append('div')
    								.attr('class', 'hidden tooltip');
           
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);

// On rajoute un groupe englobant toute la visualisation pour plus tard
    var g = svg.append( "g" );     
    
   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";
          /*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++){
             	element = parseFloat(Object.values(data[i])[j]);
              if (element < minG ){
                minG = element;
              } 
              if (element > maxG ){
                maxG = element;
              }
             }
           }
    			 pas = (maxG - minG)/nbrColors;
     			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]);
              }
            }
         }
        //console.log("YEa?????????rs : ==>" + listYears[0]);
     	  //console.log("YEa?????????rs : ==>" + listMonths[1]);
    	
      	
      	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;
            }
          }
        }
         
 
        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 map
      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);
        
        //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);
              });
          	//console.log(" 1 : =>" + mouse[0]);
              tooltip.classed('hidden', false)
                     .attr('style', 'left:' + (mouse[0] + 15) +
                             'px; top:' + (mouse[1] - 35) + 'px')
                     .html(d.properties.nom + ":" + parseFloat(nbr).toFixed(2)+ " %");
                      
              })
         	.on('mouseout', function() {
              tooltip.classed('hidden', 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";
                }
                
                
            });
        
        //fist time of coloring the map
        carte.selectAll("path")
            .enter()
            .data(jsonF.features)
            .append("path")
            .attr("class", "enter")
            .attr("d", path)
            .style("fill", function(d) {
                  // get value found above
                  var tab = d.properties.tab;
          				// console.log("tabbbb ==>" + tab[currentDate]);
                  if (tab && 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..

/***************************** 2nd *******************************/
  
		var svgR = d3.select( "body" ).selectAll("div.svgR")
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );
    var carteR;
    
    // French map 
    var projectionR = d3.geoConicConformal().center([2.454071,46.279229]).scale(2500).translate([300,300]);
   
     /*Area containing the name and the value of each region*/
    var tooltipR = d3.select('body')
    								.append('div')
    								.attr('class', 'hiddenR tooltipR');
           
    var pathR = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projectionR);

d3.csv("TER_France2013_2017.csv", function(dataR) {
      	 var jsonFR;
      	 var listDatesR = Object.keys(dataR[0]);
      	 var listYearsR  = []; // Will contain [2013,2014,2015,2016]
     		 var listMonthsR  = []; // Will contain [Janvier,...,Decembre]
      	 var currentYearR = 1;  //"2013";
      	 var currentMonthR = 1; //"Janvier";
      	 for(var m = 1; m< listDatesR.length; m++){
           var dateeR = listDatesR[m].split(" ");
            if (listYearsR.findIndex(p => p == dateeR[1]) === (-1)) {
								listYearsR.push(dateeR[1]);
            }
            if (listMonthsR.findIndex(p => p == dateeR[0]) === (-1)) {
              if(dateeR[0] != "Somme2013" && dateeR[0] != "Somme2014" && dateeR[0] != "Somme2015" && dateeR[0] != "Somme2016" && dateeR[0] != "Somme2017"){
								listMonthsR.push(dateeR[0]);
              }
            }
         }
    	
      	
      	d3.json("regions.json", function(jsonR) {
        	// first value for slider
            var firstR = listDatesR[1].split(" ");
          // first value for sliderYear
            var firstYearR = listYearsR[0];
          	var firstMonthR = listMonthsR[0];
            //d3.select('#month').html(first[0]);
            d3.select('#monthR').html(firstMonthR);
          	d3.select('#yearR').html(firstYearR);
            // update the month in slider
            d3.select("#sliderR").on("input", function() {
              //currentMonth = listMonths[this.value-1];
              currentMonthR = +this.value; 
              //console.log("currentMonth" + currentMonth);
              updateVizR(+this.value);
            });
          
            d3.select("#sliderYearR").on("input", function() { 
             //currentYear = listYears[this.value-1];
              currentYearR = +this.value;
             // console.log("currentYear" + currentYear);
              updateViz2R(+this.value);
            });
          
        //On fusionne les donnees avec le GeoJSON des regions
      	for (var i = 0; i < dataR.length; i++) {
          // Find the name of the region in csv file
          var dataStateR = dataR[i].region;
          //console.log("DataState : " + dataState )
        	for (var j = 0; j< jsonR.features.length; j++){
            // Find the name of the region in json file
            var jsonStateR = jsonR.features[j].properties.nom;//
            if (dataStateR == jsonStateR) {
           	  jsonR.features[j].properties.tab =  Object.values(dataR[i]);
              //console.log(json.features[j].properties.tab);
             	//stop because result found
               break;
            }
          }
        }
         
 
        svgR.selectAll("path")
          .data(jsonR.features)
          .enter()
          .append("path")
          .attr("d", path);
        
        jsonFR = jsonR; 
        drawMapR(currentMonthR, currentYearR);  
        }); // End of "regions.json"
      
      //update elements 
    	function updateVizR(val){
      	d3.select('#monthR').html(listMonthsR[val-1]);
      	drawMapR(currentMonthR, currentYearR); 
    	};
      
      function updateViz2R(valY){
        d3.select('#yearR').html(listYearsR[valY-1]);
        drawMapR(currentMonthR, currentYearR); 
      };
           
      // Draw the map
      function drawMapR(monthBisR, yearBisR){
        var nbrR;
        var pasR;
        var minR = 0, maxR=0;
        var currentDateR = 12*(yearBisR-1)+monthBisR ;
        //fevrier 2017 => 2017 = 5 fevrier 2 ====> 12*(yearBis-1)+monthBis
        // console.log("cu rrentDate ==========> " + currentDate);
        
        //Set input domain for color scale
        	color.domain([minG,maxG]);
        
        
        carteR = svgR.selectAll("path")
           .data(jsonFR.features);
        carteR
          .on('mousemove', function(d) {
    					if(d.properties.tab == undefined || d.properties.tab == "NaN"){
           				nbrR = "undefined";
        			}else { 
             		  nbrR = d.properties.tab[currentDateR]; 
              	}
          		var mouse = d3.mouse(svgR.node()).map(function(d) {
                 return parseInt(d);
              });
          
              tooltipR.classed('hidden', false)
                     .attr('style', 'left:' + (mouse[0] + width) +
                             'px; top:' + (mouse[1] - 35) + 'px')
                     .html(d.properties.nom + ":" + parseFloat(nbrR).toFixed(2)+ " %");
                      
              })
         	.on('mouseout', function() {
              tooltipR.classed('hidden', true);
              });
        
        //code in case of update of the map / change of month 
       	carteR 
         .attr('class', function(d) {
                return 'provinceR ' + d.properties.code;
             })
         .attr('d', path)
         .style("fill", function(d) {
                // get value found above
                var tabR = d.properties.tab;
          			if (tabR && tabR[currentDateR] != "") {
                  // console.log("tabbbbb ==>" + tab[currentDate]);
                    return color(tabR[currentDateR]);
                } else { 
                   	// if no value then color with Grey
                    return "#ccc";
                }
                
                
            });
        
        //fist time of coloring the map
        carteR.selectAll("path")
            .enter()
            .data(jsonFR.features)
            .append("path")
            .attr("class", "enter")
            .attr("d", path)
            .style("fill", function(d) {
                  // get value found above
                  var tabR = d.properties.tab;
          				// console.log("tabbbb ==>" + tab[currentDate]);
                  if (tabR && tabR[currentDateR] != "") {  
                      return color(tabR[currentDateR]);
                  } else { 
                      // if no value then color with Grey 
                      return "#ccc";
                  }
              });
	      
      }; // End of drawMap//
     
   }); // End of "d3.csv..
  </script>
</body>

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