D3 Examples - ebola dots attempt #1

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
​
    <style>
        body {margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
​
<body>
    <div id="map"></div>
    <script>
        L.mapbox.accessToken = 'pk.eyJ1IjoiYXNtaW5qYSIsImEiOiJjaXppaXNxbmgwMnc1MzNueWk5dnNiNDFqIn0.mZwTQ0XdcWxeglg7OpW7jA'
​
        //Setup our Leaflet map using Mapbox.js
        var map = L.mapbox.map('map', 'mapbox.pencil', {
                maxZoom: 17,
                minZoom: 3
            })
            .setView([8.7832, 34.5085], 1);
​
​
        function project(latlng) {
            var array = [+latlng.lat, +latlng.lng]
            var point = map.latLngToLayerPoint(L.latLng(latlng));
​
            return point;
        }
​
        // Setup our svg layer that we can manipulate with d3
        var svg = d3.select(map.getPanes().overlayPane)
            .append("svg");
        var g = svg.append("g").attr("class", "leaflet-zoom-hide");
​
        d3.json("ebola.json", function(err, data) {
​
            var ebola = g.selectAll("circle").data(data)
            ebola.enter()
                .append("circle")
​
​
            function update() {
                // We need to reposition our SVG and our containing group when the map
                // repositions via zoom or pan
                // https://github.com/zetter/voronoi-maps/blob/master/lib/voronoi_map.js
                var bounds = map.getBounds();
                var topLeft = map.latLngToLayerPoint(bounds.getNorthWest())
                var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast())
                console.log(bounds, topLeft, bottomRight)
                svg.style("width", map.getSize().x + "px")
                    .style("height", map.getSize().y + "px")
                    .style("left", topLeft.x + "px")
                    .style("top", topLeft.y + "px");
                g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")");
​
                ebola.attr({
                    cx: function(d) {
                        return project(d).x},
                    cy: function(d) {
                        return project(d).y},
                    r: 5
                })
            }
            update();
​
            map.on("viewreset", function() {
                update();
            })
            map.on("move", update)
​
        })
    </script>
</body>
    