Mapping points with Leaflet + D3 (v4) + Canvas

This version uses D3.V4 + Canvas
Full data set is too big for a gist/block, but is with source code here.

<!DOCTYPE html>
<html>
<head>
	<title>Map of parking meters in San Francisco, built with d3.js with leaflet.js</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="L.CanvasLayer.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
     
</head>
<body>

<h1>Leaflet + Canvas</h1>
<div id="mapid" style="width: 800px; height: 600px"></div>

// initialize Leaflet map, and set initial zoom and coordinatess
var mymap = L.map('mapid').setView([37.77139, -122.44486], 13);

//-----------------------------------------------------------
// NOTE: You'll need to get your own access Token from Mapbox
//       Dev account sign up is easy and free, with some dev Tokens included
//		 https://www.mapbox.com/help/define-access-token/
//-----------------------------------------------------------
// add basemap layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.light',
    accessToken: 'pk.eyJ1Ijoia3Jpc3RpbmhlbnJ5IiwiYSI6ImNqMWdxMjd5aDAwM28zM2xtaGV2azYwcjYifQ.NTJiOqcnhP-_3etf4aZYmQ'
}).addTo(mymap);

// drawing on canvas layer from https://github.com/Sumbera/gLayers.Leaflet
//var data = [[37.77139, -122.44486]];
var data = dataset;

var canvasLayer = L.canvasLayer()
            .delegate(this) // -- if we do not inherit from L.CanvasLayer we can setup a delegate to receive events from L.CanvasLayer
            .addTo(mymap);
      
function onDrawLayer(info) {
    //console.log("draw ")
    //console.log(info.zoom)
    var dotSize = 10/info.zoom
    var alpha = .9;  //0.2 + (info.zoom/100)*3;
    //console.log(alpha)
    var ctx = info.canvas.getContext('2d');
    ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);

for (var i = 0; i < dataset.length; i++) {

var d = dataset[i];
    	//console.log(d)
    	if (info.bounds.contains([d.loc[0], d.loc[1]])) {
    		ctx.fillStyle = "rgba(" + d.color[0] + "," + d.color[1] + "," + d.color[2] + "," + alpha + ")";
    		
            dot = info.layer._map.latLngToContainerPoint([d.loc[0], d.loc[1]]);
            
            ctx.beginPath();
            ctx.arc(dot.x, dot.y, dotSize, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }

}
};

function strToLocation(s){
		var arr = s.slice(1,-1).split(',');
		arr[0] = parseFloat(arr[0]);
		arr[1] = parseFloat(arr[1]);
		return arr;
	}

capColors = {
		"Grey": {"hex":'#999', "rgb": [153, 153, 153]},
		"Green": {"hex": '#FF0', "rgb": [31, 168, 31]},
		"Yellow": {"hex":'yellow', "rgb": [255, 255, 0]},
		"Black": {"hex": 'black', "rgb": [20, 20, 20]},
		"Red": {"hex": 'red', "rgb": [206, 8, 8]},
		"Brown": {"hex": 'brown', "rgb": [112, 86, 20]},
		"Purple": {"hex": 'purple', "rgb": [61, 20, 112]},
		"Undefined": {"hex": '#ccc', "rgb": (204, 204, 204)}

}

function getCapColor(d){
		return capColors[d['CAP_COLOR']];
	}

// Get data
var datafile = "Parking_meters_sm.csv"; 
var dataset = [];
d3.csv(datafile, function(data){

ids = d3.map(data, function(d){return d['RATEAREA'];}).keys()
		console.log(ids);

caps = d3.map(data, function(d){return d['CAP_COLOR']}).keys();
		console.log(caps)

data.forEach(function(d) {

d.loc = strToLocation(d['LOCATION']);
			
			try{
				d.LatLng = new L.LatLng(d.loc[0], d.loc[1]);
			} catch(err) {
				console.log('error', d.LatLng, err)
			}

d.color = getCapColor(d).rgb

//d.color = getColor(d, ids);
			//var i = ids.indexOf(d['RATEAREA'])

//console.log(d.loc, d.color)
		})

dataset = data;
		canvasLayer.drawLayer();

})

</script>
</body>
</html>

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

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js

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