-
Notifications
You must be signed in to change notification settings - Fork 1
/
state-choropleth.html
58 lines (51 loc) · 1.49 KB
/
state-choropleth.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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.states {
fill: none;
stroke: #000;
stroke-linejoin: round;
}
/*first parameter (response)*/
.q00-9 { fill:rgb(247,251,255); }
.q01-9 { fill:rgb(222,235,247); }
.q02-9 { fill:rgb(198,219,239); }
.q03-9 { fill:rgb(158,202,225); }
.q04-9 { fill:rgb(107,174,214); }
.q05-9 { fill:rgb(66,146,198); }
.q06-9 { fill:rgb(33,113,181); }
.q07-9 { fill:rgb(8,81,156); }
.q08-9 { fill:rgb(8,48,107); }
/*second parameter (predicted)*/
.q10-9 { fill:rgb(255, 245, 235); }
.q11-9 { fill:rgb(254, 230, 206); }
.q12-9 { fill:rgb(253, 208, 162); }
.q13-9 { fill:rgb(253, 174, 107); }
.q14-9 { fill:rgb(253, 141, 60); }
.q15-9 { fill:rgb(241, 105, 19); }
.q16-9 { fill:rgb(217, 72, 1); }
.q17-9 { fill:rgb(166, 54, 3); }
.q18-9 { fill:rgb(127, 39, 4); }
/*third parameter (difference)*/
.q20-9 { fill:rgb(247, 252, 245); }
.q21-9 { fill:rgb(229, 245, 224); }
.q22-9 { fill:rgb(199, 233, 192); }
.q23-9 { fill:rgb(161, 217, 155); }
.q24-9 { fill:rgb(116, 196, 118); }
.q25-9 { fill:rgb(65, 171, 93); }
.q26-9 { fill:rgb(35, 139, 69); }
.q27-9 { fill:rgb(0, 109, 44); }
.q28-9 { fill:rgb(0, 68, 27); }
#map path:hover {
fill: red;
fill-opacity: 0.7;
}
</style>
<h3 id="caption">Hover over a state:</h3>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script src="stateprevalence.js"></script>
<!-- <script src="barchart.js"></script> -->
</body>