D3 Examples - CartoDB JS + D3 JS

xxxxxxxxxx
 
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset=utf-8 />
      <title>Leaflet, Mapbox and D3JS test</title>
      <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
      <script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
        <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
      <link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
        <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
      <style>
        
        body { margin:0; padding:0; }
        
        #map { 
          width: 1200px;
          height: 800px;
          margin: 50px auto;
        }
​
        svg { 
          position: relative; 
        }
​
        path {
          fill: #000;
          fill-opacity: 0;
          stroke: #fff;
          stroke-width: 1.5px;
        }
​
        path:hover {
          fill: hsl(340, 50%, 50%);
          fill-opacity: .4;
        }
​
      </style>
    </head>
    <body>
​
      <div id='map'></div>
​
      <script>
​
        /********************************************************
          MapBox JS code credit: 
          https://www.mapbox.com/mapbox.js/example/v1.0.0/plain-leaflet/  
        ********************************************************/
​
        var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/chenrick.k94zehfr/{z}/{x}/{y}.png');
​
        var params = {
          center: [0,0],
          minZoom: 2, 
          maxZoom: 4,
          zoom: 2,        
        };
​
        var map = L.map('map', params)
            .addLayer(mapboxTiles);
​
        /********************************************************
          CartoDB code credit: https://docs.cartodb.com/tutorials/create_map_cartodbjs.html
        ********************************************************/
​
        var CbdLayerUrl = "https://chenrick.cartodb.com/api/v2/viz/f8014f6c-343f-11e4-a181-0e230854a1cb/viz.json";
​
        cartodb.createLayer(map, CbdLayerUrl).on('done', function(layer) {
          init();
        })
        .addTo(map);
​
         /********************************************************
          D3 JS code credit: https://bost.ocks.org/mike/leaflet/  
        ********************************************************/
        function init(){
          /* set up the svg object in realtionship to the Leaflet map */
          var svg = d3.select(map.getPanes().overlayPane).append("svg"),
                g = svg.append("g").attr("class", "leaflet-zoom-hide");
​
          d3.json("ne_10m_time_zones.json", function(collection) {
            
            console.log("collection: ", collection);
​
            var transform = d3.geo.transform({point: projectPoint}),
                  path = d3.geo.path().projection(transform);
​
            var feature = g.selectAll("path")
                  .data(collection.features)
                .enter().append("path");
            
            map.on("viewreset", reset);
            reset();
​
            function reset(){
              var bounds = path.bounds(collection),
              topLeft = bounds[0],
              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] + ")");
​
              feature.attr("d", path);
            }             
​
            function projectPoint(x, y) {
              var point = map.latLngToLayerPoint(new L.LatLng(y, x));
              this.stream.point(point.x, point.y);
            }
​
          });
        }
​
      </script>
    </body>
  </html>
    