D3 Examples

xxxxxxxxxx
 
<!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>
​
    