Old school D3 from simpler times

All examples By author By category About

Rade-Mathis

Full window Github gist

TP4

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .tooltip {
      	color: #000000;
        background-color: #ffffff;
        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 color = d3.scaleLinear()
    	.range([d3.rgb('#ffffff'), d3.rgb('#00cc58')]);
    var myColor = function (d) {
      return d == undefined ? d3.rgb("grey") : color (d) ;
    };

var svg = d3.select( "body" )
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );
    
   	var projection = d3.geoOrthographic()
    	.scale(3000) //Échelle
      .translate([width / 2, height / 2]) //Dimensions
   		.rotate([-1, -46]) //France au centre
   		.clipAngle(90)
   		.precision(.1);

var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
    var tooltip = d3.select("body").append("div")
    	.style("display", "none")
    	.attr("class", "tooltip");
    
		d3.json("regions.json", function(json) {
      
      d3.text ("GrippeFrance2014.csv", function (err,rawData) {
        var data = d3.dsvFormat (',').parse (rawData) ;
        data.forEach (function (d) {
          d.somme2014 = +d.somme2014 ;
        });
        
        json.features.forEach (function (di) {
          var region = di.properties.nom ;
          data.forEach (function (dj) {
            if (dj.region === region) {
              di.somme2014 = dj.somme2014 ;
            }
          });
        });
      	
        console.log(json);
        console.log(data);
        
        color.domain ([
          /*d3.min (json.features, function (d) {
        		return d.somme2014 ; }),
          d3.max (json.features, function (d) {
						return d.somme2014 ; }) ]);*/
          0, 2000 ]);
        
        console.log ("min = " + d3.min (json.features, function (d) {
        		return d.somme2014 ; }));
        console.log ("max = " + d3.max (json.features, function (d) {
        		return d.somme2014 ; }));
      
        
	    	svg.selectAll("path")
        	.data(json.features)
          .enter()
          .append("path")
          .attr("d", path)
        	.attr("fill", function (d) { 
          	return myColor (d.somme2014) ; })
        	.on("mousemove", function (d)
           	{
          		var mouse = d3.mouse(svg.node()).map(function(m) {
              	return parseInt(m) ; });
          		
          
          		tooltip
            		.attr('style', 'left:' + (mouse[0] + 15) + 'px;' 
                              + 'top:' + (mouse[1] - 35) + 'px')
              	.text(d.properties.nom + ": " 
                      + (d.somme2014 == undefined 
                         ? "donnée manquante" : d.somme2014));
        		})
        	.on ("mouseout", function ()
            {
          		tooltip.style ("display", "none");
        		});
        
			});
		});
  </script>
</body>

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