-
Notifications
You must be signed in to change notification settings - Fork 0
/
index3.html
143 lines (99 loc) · 3.53 KB
/
index3.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
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>murder map</title>
<script type="text/javascript" src="d3.v3.js"></script>
<style type="text/css">
.cities {
fill: blue;
font-size: 18px;
text-anchor: middle;
font-family: Helvetica;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 950;
var h = 500;
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale(800);
var color = d3.scale.quantize()
.range(["rgb(237,248,233)", "rgb(186,228,179)",
"rgb(116,196,118)", "rgb(49,163,84)","rgb(0,109,44)"]);
//Define default path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in murder rates data
d3.csv("murders.csv", function(data) {
//Set input domain for color scale
color.domain([
d3.min(data, function(d) { return d.murder_rate; }),
d3.max(data, function(d) { return d.murder_rate; })
]);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Merge the murders and GeoJSON
//Loop through once for each murder value
for (var i = 0; i < data.length; i++) {
//Grab state name
var dataState = data[i].state;
//Grab data value, and convert from string to float
var dataValue = parseFloat(data[i].murder_rate);
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
//Copy the data value into the JSON
json.features[j].properties.murder_rate = dataValue;
//Stop looking through the JSON
break;
}
}
}
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke","white")
.style("fill", function(d) {
//Get data value
var value = d.properties.murder_rate;
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "#000";
}
});
//Load in cities data
d3.csv("us-cities.csv", function(data) {
svg.selectAll(".cities")
.data(data)
.enter().append("circle")
.attr("class","cities")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", function(d) { return d.population/100000 })
.style("fill","black");
});
});
});
</script>
</body>
</html>