asianAmericans/dotDensity.html at main · CenterForSpatialResearch/asianAmericans · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html>
<head>
	<title>Dot density map</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script src="top10Tracts.js"></script>
</head>
<body>

<script>

	var width = window.innerWidth*2,
	height = window.innerHeight*2;

// invisible map of polygons
var polyCanvas = d3.select("body")
	.append("canvas")
	.attr("width",width)
	.attr("height",height)
	.style("display","none");

// using this div to crop the map; it has messy edges
var container = d3.select("body")
	.append("div")
	.style({
		"position": "relative",
		"width": (width-20) + "px",
		"height": (height-20) + "px",
		"overflow": "hidden"
	});

// canvas for dot map
var dotCanvas = container.append("canvas")
	.attr("width",width)
	.attr("height",height)
	.style({
		"position": "absolute",
		"top": "-100px",
		"left": "-100px"
	});

var projection = d3.geo.albers()
	.rotate([71.083,0])
	.center([0,42.3581])
	.parallels([40,44])
	.scale(4000000)
	.translate([width / 2, height / 2]);

var path = d3.geo.path().projection(projection);

var polyContext = polyCanvas.node().getContext("2d"),
	dotContext = dotCanvas.node().getContext("2d");

var features;


d3.select(dotContext.canvas).call(d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", ({transform}) => zoomed(transform)));

function zoomed(transform) {
  context.save();
  context.clearRect(0, 0, width, height);
  context.translate(transform.x, transform.y);
  context.scale(transform.k, transform.k);
  context.beginPath();
  for (const [x, y] of data) {
    context.moveTo(x + r, y);
    context.arc(x, y, r, 0, 2 * Math.PI);
  }
  context.fill();
  context.restore();
}

d3.json( "blocks.json", function(error, blocks){
	features = topojson.feature(blocks, blocks.objects.massblocks_central).features;

	// draw the polygons with a unique color for each
	var i=features.length;
	while(i--){
		var r = parseInt(i / 256),
			g = i % 256;
		drawPolygon( features[i], polyContext, "rgb(" + r + "," + g + ",0)" );
	};

	// pixel data for the whole polygon map. we'll use color for point-in-polygon tests.
	var imageData = polyContext.getImageData(0,0,width,height);

	// now draw dots
	i=features.length;
	var totalPopulation = 0
	while(i--){

		var pop = features[i].properties.POP10*50// / 2;	// one dot = 2 people
		totalPopulation+=pop
		if ( !pop ) continue;

		var bounds = path.bounds(features[i]),
			x0 = bounds[0][0],
			y0 = bounds[0][1],
			w = bounds[1][0] - x0,
			h = bounds[1][1] - y0,
			hits = 0,
			count = 0,
			limit = pop*10,	// limit tests just in case of infinite loops
			x,
			y,
			r = parseInt(i / 256),
			g = i % 256;

		// test random points within feature bounding box
		while( hits < pop-1 && count < limit ){	// we're done when we either have enough dots or have tried too many times
			x = parseInt(x0 + Math.random()*w);
			y = parseInt(y0 + Math.random()*h);

			// use pixel color to determine if point is within polygon. draw the dot if so.
			if ( testPixelColor(imageData,x,y,width,r,g) ){
				drawPixel(x,y,0,153,204,255);	// #09c, vintage @indiemaps
				hits++;
			}
			count ++;
		}
	}

	console.log(totalPopulation)
});

function testPixelColor(imageData,x,y,w,r,g){
	var index = (x + y * w) * 4;
	return imageData.data[index + 0] == r && imageData.data[index + 1] == g;
}

function drawPolygon( feature, context, fill ){
	var coordinates = feature.geometry.coordinates;
	context.fillStyle = fill || "#000";
	context.beginPath();
	coordinates.forEach( function(ring){
		ring.forEach( function(coord, i){
			var projected = projection( coord );
			if (i == 0) {
                context.moveTo(projected[0], projected[1]);
            } else {
                context.lineTo(projected[0], projected[1]);
            }
		});
	});
	context.closePath();
	context.fill();
}

// there are faster (or prettier) ways to draw lots of dots, but this works
function drawPixel (x, y, r, g, b, a) {
	dotContext.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
	dotContext.fillRect( x, y, 1, 1 );
}

</script>

</body>
</html>