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; }
.ticks {
  font: 10px sans-serif;
}
​
.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}
​
.track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 10px;
}
​
.track-inset {
  stroke: #ddd;
  stroke-width: 8px;
}
​
.track-overlay {
  pointer-events: stroke;
  stroke-width: 50px;
  stroke: transparent;
  cursor: crosshair;
}
​
.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
}
  </style>
</head>
​
<body>
  <script>
        var width = 700,
          height = 580;
​
    
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
​
    
    
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
​
    var path = d3.geoPath().projection(projection);
    
    d3.csv("grippe.csv", function(d) {
            console.log(d["columns"][52].toString())
      
        // On stocke les id de chaque régio dans un dictionnaire dont les keys sont les noms des régions, comme ça, à partir du nom de la région on peut directement accéder à ses data
        
      var time = 1
      var name_to_grippe = new Array(d.length)
      
      function update_grippe(time_id)
      {
            for (var i = 0; i < d.length; i++) 
        {
          name_to_grippe[d[i]["region"]] = d[i][d["columns"][time_id].toString()]
        }
      }
      update_grippe(1)
      
      d3.json("regions.json", function(json) {
​
        paths = svg.selectAll("path")
         .data(json.features)
         .enter()
         .append("path")
         .attr("d", path)
         .attr("fill","rgb(0,0,100)")
         .on("click",function(){
            
            time += 1
            console.log(time)
            if (time > 52)
              {
                time = 1
              }
            update_grippe(time)
            update_areas()
        })
                function update_areas()
        {
          d3.selectAll("path").each(function(j,i){
          region = j.properties.nom
          n_grippe = name_to_grippe[region]
​
          // On est obligé de faire ce test car le limousin n'est pas présent dans le csv
          if (typeof n_grippe != 'undefined')
          {
            red_color = Math.floor( n_grippe )
            color = "rgb("+red_color+",0,100)"
            d3.select(this).attr("fill",color)
          }
        })
        }
        update_areas()
    
    var x = d3.scaleLinear()
    .domain([1, 52])
    .range([0, height/2])
    .clamp(true);
    
    var slider = svg.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" +width/5+ "," +height/4+ "),rotate(90)");
    
    slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() { hue(x.invert(d3.event.x)); }));
    
    var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("r", 9);
    
    function hue(h) {
  handle.attr("cx", x(h));
  update_grippe(Math.floor(h))
  update_areas()
        }
      })
    })
​
  </script>
</body>
​
    