Old school D3 from simpler times

All examples By author By category About

cherifabass

Full window Github gist

TP4

Built with blockbuilder.org

forked from aurelient's block:

forked from aurelient's block:

forked from cherifabass's block:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
        .province {
        fill: #000;
        stroke: #fff;
        stroke-width: 1px;
    }
    .province:hover {
        fill: #666;
    }
    .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;
    }
  </style>
</head>

<body>
  <script>
		var width = 700,
  		  height = 580;

var svg = d3.select( "body" )
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );

var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');    
    var projection = d3.geoConicConformal() // d3.geo.albersUsa avec d3 version 3
    			.translate([width/2, height/2])
          .center([0, 46.279229]).scale(2800);
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
		var color = d3.scaleQuantize()  
    .range(['#edf8fb','#ccece6','#99d8c9','#66c2a4','#41ae76','#238b45','#005824'])
    
    d3.csv("GrippeFrance2014.csv", function(data) {
      
    d3.json("Regions.json", function(json) {
        svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path") // “magie d3” : lien geojson
            .attr("d", path); // -> coordonnees ecran
               //On fusionne les donnees avec le GeoJSON des regions
        var max=0
  for (var i = 0; i < data.length; i++) {
  
    var dataregion= data[i].region;
    var region11= 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"]);
     console.log(region11)
     max= d3.max([region11,max])
     console.log(max)
    for (var j = 0; j < json.features.length; j++) {
      var jsonRegion = json.features[j].properties.nom
      
      if (dataregion == jsonRegion) {
               //On injecte la valeur de l'Etat dans le json
               json.features[j].properties.somme2014 = region11;
               break;
             }
      
     }
      
    }
      
      
    
    color.domain([
       		0, 
					max
       ])
      svg.selectAll("path")
          .style("fill", function(d) {
                  //on prend la valeur recuperee plus haut
                  var value = d.properties.somme2014;
                  if (value) {
                   // console.log(value, color(value))

return color(value)
                  } else {
                    // si pas de valeur alors en gris
                    return "#ccc";
                  }
                })
                 var provinces = svg.selectAll('.province')
                .data(json.features).enter();
            provinces.append('path')
                .attr('class', function(d) {
                    return 'province ' + d.properties.nom;
            });
 
            
      });

});
         
  </script>
</body>

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

https://d3js.org/topojson.v1.min.js