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('#ccffcc'), d3.rgb('#006600')]);
    var myColor = function (d) {
      return d == undefined ? d3.rgb("grey") : color (d) ;
    };
​
    /* slider part */
    var sliderDiv = d3.select ("body").append ("div") ;
    var slider = sliderDiv.append ("input")
        .attr ("id", "slider")
        .attr ("type", "range")
        .attr ("value", "1")
        .attr ("min", "1")
        .attr ("max", "52")
        .attr ("step", "1")
        .on ("input", function () { updateWeek (+this.value) ; }) ;
    
    var sliderPrint = sliderDiv.append ("span")
        .attr ("id", "week")
        .text ("week: 1") ;
    
    /* svg part */
        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");
    
    var json_data ;
    var week_list = [];
        d3.json("regions.json", function(json) {
      /* parsing data */
      d3.text ("GrippeFrance2014.csv", function (err,rawData) {
        var data = d3.dsvFormat (',').parse (rawData) ;
        data.forEach (function (d) {
          d.somme2014 = +d.somme2014 ;
        });
        week_list = Object.keys(data[0]) ;
        
        json.features.forEach (function (di) {
          var region = di.properties.nom ;
          data.forEach (function (dj) {
            if (dj.region === region) {
              di.numbers = dj ;
              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, 300 ]);
  
        /* svg part */
            svg.selectAll("path")
            .data(json.features)
          .enter()
          .append("path")
          .attr("d", path)
            .attr("fill", function (d) { 
            if (d.hasOwnProperty ("numbers"))
                return myColor (d.numbers[week_list[1]]) ; 
                else
              return myColor (undefined) ;})
            .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.numbers[week_list[1]] == undefined 
                         ? "donnée manquante" 
                         : d.numbers[week_list[1]]));
                })
            .on ("mouseout", function ()
            {
                tooltip.style ("display", "none");
                });
      });
      json_data = json ;
        });
    
    console.log(week_list);
​
    
    function updateWeek (week) {
      sliderPrint.text ("week: " + week) ;
      updateMap (week) ;
    }
    
    function updateMap (week) {
      console.log("tic");
      var carte = svg.selectAll("path")
            .data(json_data.features) ;
      carte
        .attr("class", "update")
            .attr("fill", function (d) { 
                console.log ("maj : "+ week);
            if (d.hasOwnProperty ("numbers"))
                return myColor (d.numbers[week_list[week]]) ; 
                else
              return myColor (undefined) ;})
        .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.numbers[week_list[week]] == undefined 
                     ? "donnée manquante" 
                     : d.numbers[week_list[week]]));
        })
        .on ("mouseout", function () {
            tooltip.style ("display", "none");
        });
        }
  </script>
</body>
​
    