forked from e-/Multiclass-Density-Maps
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfred-test.html
135 lines (108 loc) · 5.68 KB
/
fred-test.html
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
<!doctype html>
<html>
<head>
<title>Fred tests ts</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
</head>
<body style="background:#ffc;">
<div id="container0" style="display:inline-block;position:relative; width:512px; height:280px">
<img style="position:absolute" id="img1" src="data/census.snappy_a.png"/>
<img style="position:absolute" id="img2" src="data/census.snappy_b.png"/>
<img style="position:absolute" id="img3" src="data/census.snappy_h.png"/>
<img style="position:absolute" id="img4" src="data/census.snappy_o.png"/>
<img style="position:absolute" id="img5" src="data/census.snappy_w.png"/>
<canvas style="position:absolute" id="canvas0" width="512" height="280"></canvas>
</div>
<canvas style="position:relative" id="canvas1" width="512" height="280"></canvas>
<div id='debugdiv'></div>
<table id="table0" border="1" style="border-collapse:collapse;background:white">
<tr><th>State ID</th><th>Asian</th><th>Black</th><th>Hispanic</th><th>Other</th><th>white</th></tr>
</table>
<script src="dist/fred-test.js"></script>
<script>
d3.json("data/us.json", function(error, us) {
if (error) throw error;
// remove alaska, Hawai and puerto-rico
us.objects.states.geometries.splice(49, 4);
let allstate = topojson.feature(us, us.objects.states);
//console.log(d3.geoBounds(allstate) );
// One projection for the whole USA
let projection = d3.geoMercator().fitSize([512, 280], allstate);
let canvas = d3.select("#canvas0").node();
let context = canvas.getContext("2d"),
gp = d3.geoPath(projection);
let path = gp.context(context);
for (let j=1; j<=48; j++){
// render just one state
let onestate = topojson.feature(us, us.objects.states.geometries[j]); // Florida
context.clearRect(0, 0, canvas.width, canvas.height);
path(onestate);
let bb = gp.bounds(onestate);
context.fillStyle="rgba(0, 0, 0, 1.0)";
context.fill();
context.beginPath();
// now make the compositing to extract pixels from the image toward a new canvas
var base = d3.select("#table0");
var tr1 = base.append("tr");
var td0 = tr1.append("td").text(j);
for (let i=1; i<=5; i++) {
var td1 = tr1.append("td");
var canvas1 = td1.append("canvas").attr("width", Math.ceil(bb[1][0]-bb[0][0])).attr("height", Math.ceil(bb[1][1]-bb[0][1]));
var context1 = canvas1.node().getContext("2d");
context1.translate(-bb[0][0], -bb[0][1]);
context1.drawImage(d3.select("#canvas0").node(),0,0);
context1.globalCompositeOperation="source-in";
context1.drawImage(d3.select("#img"+i).node(),0,0);
}
}
onestate = topojson.feature(us, us.objects.states.geometries[48]); // Florida
// let's clear that and draw something nice in the canvas used as a mask !
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// render all the us = all the counties
context.strokeStyle="rgba(255, 255, 0, 0.3)";
path(topojson.mesh(us));
context.stroke();
context.beginPath();
// render just one state = NY
path(topojson.mesh(us, us.objects.states.geometries[12]));
context.fillStyle="rgba(0, 128, 0, 0.5)";
context.fill();
context.beginPath();
// render just one state = Mass
path(topojson.mesh(us, us.objects.states.geometries[16]));
context.fillStyle="rgba(0, 0, 128, 0.5)";
context.fill();
context.beginPath();
// render just one state = California
path(topojson.mesh(us, us.objects.states.geometries[21]));
context.fillStyle="rgba(64, 64, 0, 0.5)";
context.fill();
context.beginPath();
// render just one state = Texas
path(topojson.mesh(us, us.objects.states.geometries[41]));
context.fillStyle="rgba(0, 64, 64, 0.5)";
context.fill();
context.beginPath();
// render just one state = Florida
path(topojson.mesh(us, us.objects.states.geometries[48]));
context.fillStyle="rgba(64, 0, 64, 0.5)";
context.fill();
context.beginPath();
context.beginPath();
//render just florida in Big !
// another projection for just Florida
let projection2 = d3.geoMercator().fitSize([512, 280], onestate);
let gp2 = d3.geoPath(projection2);
let path2 = gp2.context(context);
path2(onestate);
context.fillStyle="rgba(128, 0, 0, 0.5)";
context.fill();
});
let user = new Student("Jean-Daniel", "M.", "Fekete");
d3.select("#debugdiv").style('background', '#fdd');
d3.select("#debugdiv").node().append("fred says "+greeter(user));
</script>
</body>
</html>