dots on a map - Velo'v - v6

This is a simple setup of Leaflet (via Mapbox) with d3 to show dots on a map. This can serve as a base for many interesting geographically based visualizations

Nice overview of using d3 + Leaflet. I found this slightly simpler to use than Mike's classic post.

Built with blockbuilder.org

forked from enjalot's block: dots on a map: setup

forked from arimocro's block: dots on a map: setup

forked from abelande's block: dots on a map - Velo'v

forked from abelande's block: dots on a map - Velo'v - v2

forked from anonymous's block: dots on a map - Velo'v - v2

forked from anonymous's block: dots on a map - Velo'v - v3

forked from abelande's block: dots on a map - Velo'v - v3

forked from abelande's block: dots on a map - Velo'v - v4

forked from abelande's block: dots on a map - Velo'v - v5

forked from abelande's block: dots on a map - Velo'v - v6

forked from hls1138's block: dots on a map - Velo'v - v6

<!doctype html>
<html>

<head>
  <title>Many many many Points with D3 and leaflet</title>
  <meta charset="utf-8">

</head>

<body>
  <div id="map"></div>
	<div id="rightbox" class="box right-box"><div class="box-title">Informations</div></br><span style="font-style:italic;">Survolez une station</span></div> 
    <svg xmlns="https://www.w3.org/2000/svg" width="100px" height="100px" />
  </div>

//adds an SVG element to Leaflet’s overlay pane
      var svg = d3.select(leafletMap.getPanes().overlayPane).append("svg");
      
      //On crée une variable pour une infobulle
    //on l'attache au body pcq c'est là qu'est la carte et les données
  //  var tooltip = d3.select('body').append('div')
    //        .attr('class', 'hidden tooltip');  
      
      //G element added to translate the SVG elements so that the top-left corner of the SVG, ⟨0,0⟩, corresponds to Leaflet’s layer origin
      var g = svg.append("g").attr("class", "leaflet-zoom-hide");
      
      // Use Leaflet to implement a D3 geometric transformation.
      function projectPoint(x, y) {
        var point = leafletMap.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
      } // function projectPoint
      
			//Create a d3.geo.path to convert GeoJson to SVG
      var transform = d3.geoTransform({point: projectPoint});
      var path = d3.geoPath().projection(transform);
      leafletMap.on('moveend', mapmove);
      
      var div = d3.select("#rightbox");

redrawSubset(geoData.features);

function redrawSubset(subset) {
        path.pointRadius(3); // * size of dots);

//D3 mechanism for fitting SVG to the layer
        var bounds = path.bounds(stations);
        var topLeft = bounds[0];
        var bottomRight = bounds[1];

svg.attr("width", bottomRight[0] - topLeft[0])
          .attr("height", bottomRight[1] - topLeft[1])
          .style("left", topLeft[0] + "px")
          .style("top", topLeft[1] + "px");

g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

//      var start = new Date();

//Create path elements for each of the features
        var features = g.selectAll("path")
          .data(stations.features)
       		.enter().append("path")
          features.attr("d", path).attr("class", "points");
	        features.style("fill-opacity", function(d) {
					var value = d.properties.idstation;	         
           //console.log(d.properties.idstation.length);
            if (d.group) {
            return (d.group * 0.1) + 0.2
          } // if dgroup
            
        }) //features.style
          
          //infobulle
            // Quand la souris passe au-dessus d'une station
             .on('mousemove', function(d) {
               // console.log(d) // Check element to show: .properties.nom AND .properties.value         
                var mouse = d3.mouse(svg.node()).map(function(d) {
                // console.log(d)
                  return parseInt(d); 
                }); // mapfunction d
         //       tooltip.classed('hidden', false)
                  // modification du CSS
          //        .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
                  // Ajout des infos sur la stations basées sur le fichier geoJson
                  div.html('<div class="box-title">Informations</div></br>'+'Numéro de station : <span style="font-weight:bold;">'+d.properties.idstation + '</span><br/>Bornes : <span style="font-weight:bold;">'+ d.properties.BORNES +'</span><br/>Station : <span style="font-weight:bold;">'+d.properties.nom +'</span><br/>Commune : <span style="font-weight:bold;">'+ d.properties.commune);
              }) //mousemove function
              .on('mouseout', function() {
         //       tooltip.classed('hidden', true);
            }); // mouseout

} //function redrawsubwet

function mapmove(e) {
        //remove all points
        d3.selectAll(".points").remove();
        redrawSubset(geoData.features);
      } // function mapmove
  
    }) //json   
  }); //csv
    
// ajout des lines 
var svg = d3.select("body")
    .append("svg")
    .attr("width",500)
    .attr("height",500);

var path = svg.append("path")
   .attr("d","M 100 350 l 150 -300")
   .attr("fill","none")
   .attr("stroke","black");

var circle = svg.append("circle")
   .attr("r",5)
   .attr("cx",100)
   .attr("cy",350);
    
    
 // avec x et y des coordonées dans le svg pas dans la géo

var pathEl = path.node();
for(var i=0;i<pathEl.getTotalLength();i++){
    var pt = pathEl.getPointAtLength(i);
    circle.transition()
        .duration(3500)
        .attr("cx",pt.x)
        .attr("cy",pt.y);
}
    
    
  </script>
</body>

</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js to a secure url

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

https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js