D3 gradient dots on Mapbox GL JS

Showing the use of D3 and Mapbox Gl JS with dots with gradient styling which makes it appear 3d.

Forked from previous gist's

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

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />

<body>
  <div id="map"></div>
  <script>
  mapboxgl.accessToken = 'pk.eyJ1IjoiY2piYXNzaW4iLCJhIjoiY2lnbnl5M2JlMDBkY21ma284MHpmYjdycSJ9.hCuiySWxJTct7nZvXRsiEQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v8',
    center: [-0.1,51.5119112],
      zoom: 10,
      pitch: 75
});
    
    map.scrollZoom.disable()
    map.addControl(new mapboxgl.Navigation());

// Setup our svg layer that we can manipulate with d3
    var container = map.getCanvasContainer()
    var svg = d3.select(container).append("svg")

grads.append("stop")
        .attr("offset", "0%")
        .style("stop-color", "white");

grads.append("stop")
        .attr("offset", "100%")
        .style("stop-color",  function(d) { return "#c51b8a"; });
      
      dots.enter().append("circle").classed("dot", true)
      .attr("r", 1)
      .style("fill", function(d,i) {
            return "url(#grad)";
        })
      .transition().duration(1000)
      .attr("r", 4)
      
      function render() {
        dots
        .attr({
          cx: function(d) { 
            var x = project(d).x;
            return x
          },
          cy: function(d) { 
            var y = project(d).y;
            return y
          },
        })
      }

// re-render our visualization whenever the view changes
      map.on("viewreset", function() {
        render()
      })
      map.on("move", function() {
        render()
      })

// render our initial visualization
      render()
    })

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js