Vizu_Part1_Map

forked from AminaSGitHub's block: test_Part_1_Modif FINAL ?

<!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');
    /************************************************************************/

// 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>

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