Andy Woodruff awoodruff

This is an attempt at a slightly D3-ish way of drawing a dot density map on a canvas element. In short, each polygon is drawn (invisibly) with a unique color, then random points are thrown at polygon bounding boxes and the pixel color is used for a point-in-polygon test. This example draws one dot for every 2 people in central Boston census blocks, for a total of approximately 132,000 dots.

	// creates GeoJSON features (using Turfjs) for square grid cells in the Mercator projection

	function grid(minX,minY,maxX,maxY,size){ // arguments are in projected mercator units; conversion functions below
	var x = minX,
	y = minY,
	cells = [],
	x0,
	y0,
	x1,
	y1;

	.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
	}
	.marker-cluster-small div {
	background-color: rgba(110, 204, 57, 0.6);
	}

	.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}

	<html>
	<head>
	<title>A Leaflet map!</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>

	<html>
	<head>
	<title>A Leaflet map!</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>

	<html>
	<head>
	<title>A Leaflet map!</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>