Old school D3 from simpler times

All examples By author By category About

TLecailtel

Full window Github gist

Map of the flu in French regions in 2014

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { font-family:Arial;margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

.region: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;
    }
  </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().center([2.454071, 46.279229]).scale(2800)
    	.translate([width/2, height/2]);

var path = d3.geoPath()
    	.projection(projection);

var color = d3.scaleLinear()
    	.range(["white","red"]);
    
    var avoid_undefined = function(data) {
      if (isNaN(data)) {return "Non renseigné"; }
      else {return data; }
    }
    
d3.csv("GrippeFrance2014.csv", function(data) {
  
  color.domain([d3.min(data, function(d) {return +d.somme2014 }), d3.max(data, function(d) {return +d.somme2014 })]);
  
  d3.json("regions.json", function(json) {
    
    //On fusionne les donnees avec le GeoJSON des regions
    for (var i = 0; i < data.length; i++) {
      
      for (var j = 0; j < json.features.length; j++) {
        if(json.features[j].properties.nom == data[i].region) {
            
          var flu2014 = parseFloat(data[i].somme2014);
          json.features[j].properties.flu2014 = flu2014;
  
          };
        };
      };
    
    svg.selectAll("path").data(json.features).enter().append("path")
    	.attr("class","region")
      .attr("d", path)
      .attr("fill",function(d) {
      	var value = d.properties.flu2014;
      	if (value==null) {return "grey"; }
      	else {return color(value); }})
    	.attr("stroke","grey")
      .on('mousemove', function(d) {
      	var mouse = d3.mouse(svg.node()).map(function(d) {
          return parseInt(d);
        });
      tooltip.classed('hidden', false)
        .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
        .html(d.properties.nom + " : " + avoid_undefined(d.properties.flu2014));
    })
      .on('mouseout', function() {
      	tooltip.classed('hidden', true);
    });
  });
});
	
  </script>
</body>

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