ebola dots attempt #1

<!DOCTYPE html>

<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>

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

https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js