Plotting map data using d3, Leaflet, and Open Street Map

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Leaflet + Open Street Map</title>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        
        <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <style>
            #map-container {
                height: 450px;
                width: 700px;
            }
            div {
                display: inline-block;
            }
            #map-legend {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="map-container"></div>
        <div id="map-legend"></div>

// Load some data and add it to the map!
            d3.csv('./nyc-crime-subset.csv', function(error, crimeData) {

colorScale  = d3.scale.category10();

var radiusScale = d3.scale.linear()
                    .domain([0, d3.max(crimeData, function(crime) { return +crime.TOT; })])
                    .range([1, 10]);

var geoJSONCrimeFeatures = [];

crimeData.forEach(function(crime, i) {
                    var info = "<span style='color:" + colorScale(crime.CR) + "'><b>" +
                                 crime.CR.toLowerCase() + "</b></span><br/>" +
                                 "count: <b>" + crime.TOT + "</b>, " +
                                 "date: <b>" + crime.MO + "/" + crime.YR + "</b>"

makeCrimeMap(geoJSONCrimeFeatures);
            });

var makeCrimeMap = function(geoJSONCrimeFeatures) {
                // L = Leaflet name space, pass it the id of our container
                // Define URL for fetching map tiles, and cite source
                var map       = L.map("map-container"),
                    bwOsmURL  = "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
                    osmAttrs  = "Map data © <a href='https://openstreetmap.org'>OpenStreetMap</a>";

var osmTiles = new L.TileLayer(bwOsmURL, {
                    minZoom: 8,
                    maxZoom: 16,
                    attribution: osmAttrs
                });

// Center view on ~NYC
                var nycCoord  = new L.LatLng(40.75, -73.9);

map.setView(nycCoord, 11); // latlng, zoom level
                map.addLayer(osmTiles);

L.geoJson(geoJSONCrimeFeatures, {
                    style: function (feature) {
                        return {
                            color:       '#000',
                            opacity:     0,
                            radius:      feature.properties.radius,
                            fillColor:   feature.properties.color,
                            fillOpacity: 0.7
                        };
                    },
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup(feature.properties.info);
                    },
                    pointToLayer: function (feature, latlng) {
                        return L.circleMarker(latlng);
                    }

}).addTo(map);

// Add legend with d3
                var legendWidth  = 250,
                    legendHeight = 150;

var legend = d3.select('#map-legend').append('svg')
                    .attr('width', legendWidth)
                    .attr('height', legendHeight);

var legends = legend.selectAll(".legend")
                    .data(colorScale.domain())
                  .enter().append("g")
                    .attr("class", "legend")
                    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

// draw legend colored rectangles
                legends.append("rect")
                    .attr("x", legendWidth - 18)
                    .attr("width", 18)
                    .attr("height", 18)
                    .style("fill", colorScale);

// draw legend text
                legends.append("text")
                    .attr("x", legendWidth - 24)
                    .attr("y", 9)
                    .attr("dy", ".35em")
                    .style("text-anchor", "end")
                    .text(function(d) { return d.toLowerCase(); })
            };
        </script>
    </body>
</html>

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

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

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

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