D3 Examples - Europe

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
    .country:hover{
      opacity: 0.94;
    }
    button {
  position: absolute;
  top: 20px;
  left: 20px;
}
    .vranger {
      position: relative;
        transform: rotate(270deg);
            -moz-transform: rotate(270deg); /*do same for other browsers if required*/
                        }
    .leg {
      position: absolute;
            top: 285;
      left: 850;
            }
    .alt {
      position: relative;
            top: 54;
      left: 41;
            }
  </style>
</head>
​
<body>
  <button>Reset</button>
    <div class = "leg">
  <input id="slider" type="range" class="vranger" value="1" min="1" max="100" step="10" />
  <span id="Altitude" class = "alt">Altitude</span>
</div>
  <script>
    var width = 837,
        height = 580,
        zoom = d3.zoom().scaleExtent([2/3 , 8])
            q = queue();
    
                
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
        .call(zoom.on("zoom", zoomed));
        
   var g = svg.append("g");
    
       
    var tooltip = d3.select('body').append('div').attr('class', 'tooltip')
                                .style("opacity", 0);
​
    var projection = d3.geoConicConformal()
                                   .center([ 7.0, 46.0 ]) //comment centrer la carte, longitude, latitude
                                   .translate([ width/2, height/2 ])
                                   .scale([ width/0.416333181655765 ])
                                 .rotate([0,0]);
    
    var path = d3.geoPath().projection(projection);
    
            q.defer(d3.json, "europe.geojson")
            q.defer(d3.csv, "datas.csv")
            .await(processData);
    
        // On definit une echelle de couleur
    var color = d3.scaleQuantile().domain([0,40]) 
         .range(["rgb(0,244,106)", "rgb(61,255,61)", "rgb(227,255,50)", "rgb(255,173,50)", "rgb(255,10,34)"])
    
    function processData(error,world,datas) {
      if (error) throw error;
      
      g.selectAll("path")
            .data(world.features)
            .enter()
            .append("path")
                    .classed('country',true)
            .attr("d", path)
            .style("fill","#00154c")
                  .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    tooltip.style("opacity",.9)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.name);
                })
                    .on("mouseout", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", 0)});
      
              g.append("path")
            .attr("id", "graticule")
            .attr("fill", "none")
            .attr("stroke", "#777")
            .attr("stroke-width", 0.5)
            .attr("stroke-opacity", 0.5)
            .attr("d", path(d3.geoGraticule10()));
      
      // points  
      
            valeurs = []
            n = datas.length
      for(var i =0;i<n;i++){
        valeurs.push(Object.values(datas[i])[0].split(";").reverse())
      }
      
      var circle = g.selectAll("circle")
        .data(valeurs).enter()
        .append("circle")
        .attr("r", "2px")
        .attr("fill", function(d) {return color(d.slice(2))})
    .attr("cx", function(d) {return projection(d.slice(0,2))[0]})
    .attr("cy",function(d) {return projection(d.slice(0,2))[1]})
    .attr("opacity", .9)
    .attr("stroke", "black")
    .attr("stroke-width", 0.217862701056)
    .attr("stroke-opacity", 0.2);
    }
    
  function zoomed() {
  g.attr("transform", d3.event.transform);
}
    
  </script>
</body>
​
    