-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·159 lines (139 loc) · 4.4 KB
/
index.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Job-Plotter</title>
<script type="text/javascript" src="d3.v3.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.btn-group{
position: absolute;
z-index: 100;
text-align: center;
font-family: 'Oxygen', sans-serif;
}
.btn{
margin-left:40px;
}
.btn:hover{
opacity: 1;
border-bottom:3px solid #7ec0ee ;
}
button {
margin-left: 50px;
color: #B5B5CE;
font-size: 28px;
background:none;
border:none;
margin:0;
padding:0;
}
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
height: 25px;
padding: 2px;
font-size: 10px;
background: #FFFFE0;
border: 1px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default">Job 1</button>
<button type="button" class="btn btn-default">Job 2</button>
<button type="button" class="btn btn-default">Job 3</button>
</div>
<script type="text/javascript">
// div is appended to body when a state is moused over
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Width and height
var w = 1000;
var h = 700;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([1000]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Define quantize scale to sort data values into buckets of color
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)"]);
//Colors taken from colorbrewer.js, included in the D3 download
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
$.getJSON('https://jsonp.nodejitsu.com/?callback=?&url=http://38.110.19.68/jobmapping.php?action=get_job_data', function (data) {
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Merge the ag. data and GeoJSON
//Loop through once for each ag. data 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].jobs);
//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.value = 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("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value) {
//If value exists…
return getColor(value);
} else {
//If value is undefined…
return "#ccc";
}
})
.on("mouseover", function(d) {
d3.select(this).transition().duration(300).style("opacity", 1);
div.transition().duration(300)
.style("opacity", 1)
div.text(d.properties.name + ":"+ "\n" + d.properties.value)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY -30) + "px");
})
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
};
});
});
</script>
</body>
</html>