Last active
October 31, 2017 11:35
-
-
Save sara-maria/1cdfe8c7f3ccc8e46f8f400451abbc7d to your computer and use it in GitHub Desktop.
Spinning globe with city markers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<!-- Declare the character set of the document --> | |
<meta charset="UTF-8"> | |
<!-- Support IE9-IE10 --> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<!-- Set the viewport --> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!-- Javascripts --> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body { | |
overflow:visible; | |
background: #454545; | |
position: relative; | |
} | |
svg { | |
position: absolute; | |
left: 0; | |
top: 0; | |
} | |
.city { | |
fill: rgb(255, 255, 193); | |
stroke: rgb(142, 142, 21); | |
stroke-width: 0.4; | |
} | |
.highlight { | |
fill: rgb(205, 39, 235); | |
stroke: rgb(226, 47, 211); | |
} | |
</style> | |
<script type="text/javascript"> | |
var margin = 0, | |
width = 800 - margin, | |
height = 500 - margin; | |
function draw(geo_data) { | |
var svg = d3.select("body").select("#content").select("svg") | |
.attr("width", width + margin) | |
.attr("height", height + margin); | |
///////////////////////////////////////////////////////////////////////////////////////////// | |
///////////////////////////////////////////////////////////////////////////////////////////// | |
// DRAW GLOBE | |
// Based on: http://bl.ocks.org/PatrickStotz/1f19b3e4cb848100ffd7 | |
///////////////////////////////////////////////////////////////////////////////////////////// | |
///////////////////////////////////////////////////////////////////////////////////////////// | |
var earthcolor = d3.rgb("rgb(105, 113, 142)"); | |
var countryfillcolor = d3.rgb("rgb(84, 139, 84)"); | |
var countrystrokecolor = d3.rgb("rgb(25, 64, 224)"); | |
var projection = d3.geo.orthographic() | |
.scale(200) | |
.translate([width / 2, height / 2]) | |
.clipAngle(90) | |
//.precision(0.2); | |
var pathproj = d3.geo.path().projection(projection); | |
// drawing a sphere as landmass | |
var g = svg.append("g"); | |
g.append("path") | |
.datum({type: "Sphere"}) | |
.attr("class", "sphere") | |
.attr("d", pathproj) | |
.attr("fill", earthcolor); | |
// drawing the worldmap | |
var map = svg.append('g').selectAll('path') | |
.attr("class", "fill") | |
.data(geo_data.features) | |
.enter() | |
.append('path') | |
.attr('d', pathproj) | |
.style('fill', countryfillcolor) //country fill | |
.style('stroke', countrystrokecolor) | |
.style('stroke-width', .5) | |
.style('opacity',.8); | |
///////////////////////////////////////////////////////////////////////////////// | |
//draw, spin, and highlight the cities on the world | |
function plot_points(data) { | |
// Add city points to map! | |
// JSON object (instead of circles) for points allowed to be clipped at "backside" of earth: | |
svg.append('g') | |
.selectAll("path") | |
.data(data,function(d,i){ return d.id }) | |
.enter() | |
.append("path") | |
.datum(function(d) { | |
return { | |
type: "Point", | |
coordinates: [d.lon, d.lat], | |
class: "nohighlight" //My attempt at changing style through class..... not working.... | |
}; }) | |
.attr("class","city") //this class is assigned to the "correct" paths. Can I access them individually?? | |
.attr("d", pathproj); | |
// Control the radius of ALL circles! | |
pathproj.pointRadius(function(d,i) { | |
if (d.type =="Point") { | |
return d.class==="nohighlight" ? 4 : 20; | |
} | |
}); | |
//////////////////////////////////////////////////////////////////////////////////////////////////// | |
// Spinning the globe: | |
//////////////////////////////////////////////////////////////////////////////////////////////////// | |
function spinning_globe(){ | |
var time = Date.now(); | |
var rotate = [0, 0]; | |
var velocity = [.015, -0]; | |
d3.timer(t => { | |
// get current time | |
var dt = Date.now() - time; | |
//Define new projection over a rotating path | |
projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]); | |
//Add new projection to the map | |
map.attr('d', pathproj) | |
// Spin city locations: Method with JSON path element - only requires this line: | |
svg.selectAll("path.city").attr("d", pathproj); | |
}); // end timer spinning globe | |
}; // end spinning globe | |
spinning_globe(); | |
//////////////////////////////////////////////////////////////////////////////////////////////////// | |
//////////////////////////////////////////////////////////////////////////////////////////////////// | |
//// HIGHLIGHTING the cities one by one: | |
var city_idx = 0; //data.id starts at 1 | |
//Every 300 msec: highlight a new city: | |
var city_play = setInterval(function() { | |
city_idx++; | |
var filtered = data.filter(function(d) { | |
return d.id === city_idx; | |
}); | |
// CHANGE CLASS? | |
// CHANGE RADIUS? | |
//Stop when all cities are highlighted | |
if(city_idx>=geo_data.length){ | |
clearInterval(city_play) //terminates calls to update function within setInterval function. | |
}; | |
}, 300); // end timer city play setInterval | |
}; // end plot_points function | |
//////////////////////////////////////////////////////////////////////////////////////////////////// | |
// loading igem data | |
d3.csv("team_gps.csv", function(d) { | |
d['id'] = +d['id']; | |
d['lat'] = +d['lat']; | |
d['lon'] = +d['lon']; | |
return d; | |
}, plot_points); | |
}; // end of draw function | |
//////////////////////////////////////////////////////////////////////////////////////////////////// | |
</script> | |
</head> | |
<body> | |
<div id="content"> | |
<svg></svg> | |
</div> | |
<script type="text/javascript"> | |
d3.json("world_countries.json", function(error, geo_data) { | |
draw(geo_data) | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
id | lon | lat | |
---|---|---|---|
1 | 6.0838868 | 50.7753455 | |
2 | 24.6559 | 60.2054911 | |
3 | 31.2357116 | 30.0444196 | |
4 | 118.507011 | 31.67044 | |
5 | 5.36978 | 43.296482 | |
6 | -60.0217314 | -3.1190275 | |
7 | 4.8951679 | 52.3702157 | |
8 | -48.1786486 | -21.7848272 | |
9 | -111.9400054 | 33.4255104 | |
10 | -0.1869644 | 5.6037168 | |
11 | 139.6917064 | 35.6894875 | |
12 | 120.15507 | 30.274084 | |
13 | -97.7430608 | 30.267153 | |
14 | -97.7430608 | 30.267153 | |
15 | -76.6121893 | 39.2903848 | |
16 | 13.404954 | 52.5200066 | |
17 | 114.057865 | 22.543096 | |
18 | 8.5324708 | 52.0302285 | |
19 | 32.8597419 | 39.9333635 | |
20 | 116.4073963 | 39.9041999 | |
21 | 116.4073963 | 39.9041999 | |
22 | 116.4073963 | 39.9041999 | |
23 | 116.4073963 | 39.9041999 | |
24 | 16.3738189 | 48.2081743 | |
25 | -0.630386 | 44.80583 | |
26 | -71.0588801 | 42.3600825 | |
27 | -71.0588801 | 42.3600825 | |
28 | 139.8747636 | 35.9551921 | |
29 | -2.58791 | 51.454513 | |
30 | -123.1207375 | 49.2827291 | |
31 | 23.3218675 | 42.6977082 | |
32 | -122.4442906 | 47.2528768 | |
33 | -114.0708459 | 51.0486151 | |
34 | -94.6707917 | 38.9822282 | |
35 | -3.17909 | 51.481581 | |
36 | -117.1610838 | 32.715738 | |
37 | 120.4233654 | 23.5436443 | |
38 | 121.237221 | 25.069656 | |
39 | 11.97456 | 57.70887 | |
40 | 116.4073963 | 39.9041999 | |
41 | 116.4073963 | 39.9041999 | |
42 | -0.1277583 | 51.5073509 | |
43 | 51.5310398 | 25.2854473 | |
44 | -77.042754 | -12.0463731 | |
45 | 6.7734556 | 51.2277411 | |
46 | -74.0059728 | 40.7127753 | |
47 | -76.5018807 | 42.4439614 | |
48 | 118.796877 | 32.060255 | |
49 | 120.6736482 | 24.1477358 | |
50 | -105.084423 | 40.5852602 | |
51 | -105.2705456 | 40.0149856 | |
52 | -70.861985 | 41.991213 | |
53 | -83.0103409 | 40.119413 | |
54 | 78.0080745 | 27.1766701 | |
55 | -74.1744624 | 40.6895314 | |
56 | 12.4949429 | 55.763516 | |
57 | -78.898619 | 35.9940329 | |
58 | -79.0558445 | 35.9131996 | |
59 | 121.4737021 | 31.2303904 | |
60 | -3.188267 | 55.953252 | |
61 | -3.188267 | 55.953252 | |
62 | -84.3879824 | 33.7489954 | |
63 | 6.6322734 | 46.5196535 | |
64 | -74.0059728 | 40.7127753 | |
65 | 7.5885761 | 47.5595986 | |
66 | 2.441782 | 48.629828 | |
67 | -70.9477546 | 42.9814292 | |
68 | 119.296482 | 26.074478 | |
69 | -80.1289321 | 26.3683064 | |
70 | 11.0119611 | 49.5896744 | |
71 | 7.8421043 | 47.9990077 | |
72 | -84.2807329 | 30.4382559 | |
73 | 121.4737021 | 31.2303904 | |
74 | 121.4737021 | 31.2303904 | |
75 | -81.1873005 | 35.262082 | |
76 | -84.3879824 | 33.7489954 | |
77 | 136.7606537 | 35.4232984 | |
78 | -4.251806 | 55.864237 | |
79 | 22.9444191 | 40.6400629 | |
80 | 5.737805 | 45.205168 | |
81 | 6.5665017 | 53.2193835 | |
82 | 113.264385 | 23.12911 | |
83 | 9.9936819 | 53.5510846 | |
84 | -71.0588801 | 42.3600825 | |
85 | 114.305539 | 30.592849 | |
86 | 8.6724335 | 49.3987524 | |
87 | 120.15507 | 30.274084 | |
88 | 117.227219 | 31.820591 | |
89 | 114.109497 | 22.396428 | |
90 | 141.3543763 | 43.0620958 | |
91 | 114.1290719 | 22.2679201 | |
92 | 114.1796057 | 22.3185673 | |
93 | 114.109497 | 22.396428 | |
94 | 114.1974398 | 22.3771304 | |
95 | 114.305539 | 30.592849 | |
96 | 114.305539 | 30.592849 | |
97 | 72.8776559 | 19.0759837 | |
98 | 77.5945627 | 12.9715987 | |
99 | 76.7178726 | 30.7046486 | |
100 | 73.8567437 | 18.5204303 | |
101 | 77.2090212 | 28.6139391 | |
102 | 80.2707184 | 13.0826802 | |
103 | 1.444209 | 43.604652 | |
104 | 2.359279 | 48.792716 | |
105 | 107.6191228 | -6.9174639 | |
106 | -122.3320708 | 47.6062095 | |
107 | 125.323544 | 43.817071 | |
108 | 117.120095 | 36.6512 | |
109 | 0.27568 | 51.195043 | |
110 | 139.343138 | 35.486426 | |
111 | 1.0789089 | 51.280233 | |
112 | -73.9441579 | 40.6781784 | |
113 | 135.1955112 | 34.690083 | |
114 | 4.7005176 | 50.8798438 | |
115 | 126.9779692 | 37.566535 | |
116 | 135.7680294 | 35.0116363 | |
117 | -84.0712997 | 34.0514898 | |
118 | 103.834303 | 36.061089 | |
119 | -112.84184 | 49.69349 | |
120 | -112.84184 | 49.69349 | |
121 | 15.6213728 | 58.410807 | |
122 | -101.8551665 | 33.5778631 | |
123 | 13.1910073 | 55.7046601 | |
124 | 151.1126498 | -33.7738237 | |
125 | -2.2426305 | 53.4807593 | |
126 | -73.8648268 | 40.8447819 | |
127 | -84.5613355 | 39.3995008 | |
128 | -84.5613355 | 39.3995008 | |
129 | -83.7430378 | 42.2808256 | |
130 | -83.7430378 | 42.2808256 | |
131 | 120.6736482 | 24.1477358 | |
132 | -71.5734197 | 43.1948092 | |
133 | -91.7715303 | 37.948544 | |
134 | 0.1149085 | 52.2042666 | |
135 | 37.6172999 | 55.755826 | |
136 | -84.4838654 | 42.7369792 | |
137 | 11.6532477 | 48.2488721 | |
138 | -73.658945 | 40.5889551 | |
139 | 118.796877 | 32.060255 | |
140 | 118.796877 | 32.060255 | |
141 | 118.796877 | 32.060255 | |
142 | 15.439504 | 47.070714 | |
143 | 120.2270277 | 22.9997281 | |
144 | 120.9674798 | 24.8138287 | |
145 | 126.534967 | 45.803775 | |
146 | 123.431472 | 41.805699 | |
147 | -1.61778 | 54.978252 | |
148 | 91.7362365 | 26.1445169 | |
149 | 118.796877 | 32.060255 | |
150 | 117.3616476 | 39.3433574 | |
151 | -71.0588801 | 42.3600825 | |
152 | -87.6876969 | 42.0450722 | |
153 | 108.93977 | 34.341574 | |
154 | 120.9674798 | 24.8138287 | |
155 | 10.3950528 | 63.4305149 | |
156 | 103.819836 | 1.352083 | |
157 | 71.4703558 | 51.1605227 | |
158 | 112.938814 | 28.228209 | |
159 | 103.819836 | 1.352083 | |
160 | 108.93977 | 34.341574 | |
161 | 121.5654177 | 25.0329694 | |
162 | 54.3773438 | 24.453884 | |
163 | 121.544379 | 31.221517 | |
164 | 120.382609 | 36.067108 | |
165 | -1.2577263 | 51.7520209 | |
166 | 2.3522219 | 48.856614 | |
167 | -70.6692655 | -33.4488897 | |
168 | 2.3522219 | 48.856614 | |
169 | 116.4073963 | 39.9041999 | |
170 | -75.1652215 | 39.9525839 | |
171 | 71.5804899 | 34.0149748 | |
172 | -79.9958864 | 40.4406248 | |
173 | 12.9573975 | 52.4038381 | |
174 | -74.6514481 | 40.3439888 | |
175 | -86.9080655 | 40.4258686 | |
176 | -73.9973608 | 41.9270367 | |
177 | 116.4073963 | 39.9041999 | |
178 | 80.2707184 | 13.0826802 | |
179 | -87.4139092 | 39.4667034 | |
180 | -95.3698028 | 29.7604267 | |
181 | -83.1497751 | 42.6064095 | |
182 | 104.066801 | 30.572815 | |
183 | 104.066801 | 30.572815 | |
184 | 113.264385 | 23.12911 | |
185 | 113.264385 | 23.12911 | |
186 | 116.4073963 | 39.9041999 | |
187 | 117.120095 | 36.6512 | |
188 | 10.4033399 | 55.3790617 | |
189 | 174.7633315 | -36.8484597 | |
190 | 121.4737021 | 31.2303904 | |
191 | -1.470085 | 53.381129 | |
192 | 114.057865 | 22.543096 | |
193 | 116.298326 | 39.959953 | |
194 | 114.057865 | 22.543096 | |
195 | 104.195397 | 35.86166 | |
196 | 121.4737021 | 31.2303904 | |
197 | 121.4737021 | 31.2303904 | |
198 | 114.057865 | 22.543096 | |
199 | 114.057865 | 22.543096 | |
200 | -122.0540996 | 37.4112691 | |
201 | 18.0685808 | 59.3293235 | |
202 | -73.1233889 | 40.9123761 | |
203 | 9.1829321 | 48.7758459 | |
204 | 121.4737021 | 31.2303904 | |
205 | 114.057865 | 22.543096 | |
206 | 79.9465841 | 12.9666662 | |
207 | -79.8761741 | 34.2998762 | |
208 | 113.264385 | 23.12911 | |
209 | 113.264385 | 23.12911 | |
210 | 20.1414253 | 46.2530102 | |
211 | 114.057865 | 22.543096 | |
212 | 26.7290062 | 58.3776252 | |
213 | 121.5654177 | 25.0329694 | |
214 | 120.9674798 | 24.8138287 | |
215 | -106.0691004 | 28.6329957 | |
216 | -99.2653128 | 19.5679989 | |
217 | 34.989571 | 32.7940463 | |
218 | -103.416501 | 20.6719563 | |
219 | 35.570246 | 33.207933 | |
220 | 117.3616476 | 39.3433574 | |
221 | 117.3616476 | 39.3433574 | |
222 | 106.456877 | 29.541144 | |
223 | 127.1479532 | 35.8242238 | |
224 | 139.6380256 | 35.4437078 | |
225 | 121.4737021 | 31.2303904 | |
226 | -79.3831843 | 43.653226 | |
227 | -117.2712717 | 32.8328112 | |
228 | 116.298326 | 39.959953 | |
229 | 116.4073963 | 39.9041999 | |
230 | 8.6511929 | 49.8728253 | |
231 | 13.7372621 | 51.0504088 | |
232 | 5.4697225 | 51.441642 | |
233 | 4.3570677 | 52.0115769 | |
234 | 9.0576448 | 48.5216364 | |
235 | 117.3616476 | 39.3433574 | |
236 | -80.2481666 | 43.5448048 | |
237 | -113.4909267 | 53.544389 | |
238 | -117.2712717 | 32.8328112 | |
239 | 116.4073963 | 39.9041999 | |
240 | -8.4863157 | 51.8968917 | |
241 | -87.6297982 | 41.8781136 | |
242 | -70.6692655 | -33.4488897 | |
243 | -70.6692655 | -33.4488897 | |
244 | -0.1277583 | 51.5073509 | |
245 | 4.6118324 | 50.668081 | |
246 | -72.2495231 | 41.8084314 | |
247 | 12.513321 | 55.677069 | |
248 | -122.0307963 | 36.9741171 | |
249 | 104.066801 | 30.572815 | |
250 | -82.3248262 | 29.6516344 | |
251 | 23.7275388 | 37.9838096 | |
252 | 10.7522454 | 59.9138688 | |
253 | -91.5301683 | 41.6611277 | |
254 | -88.2072697 | 40.1105875 | |
255 | -117.773235 | 34.100854 | |
256 | -76.93776 | 38.9896967 | |
257 | -77.2856305 | 37.2220383 | |
258 | -82.5514869 | 35.5950581 | |
259 | -96.6851982 | 40.8257625 | |
260 | 11.2183781 | 43.8374367 | |
261 | -1.1581086 | 52.9547832 | |
262 | -75.6971931 | 45.4215296 | |
263 | 2.3522219 | 48.856614 | |
264 | 17.6389267 | 59.8585638 | |
265 | -113.4909267 | 53.544389 | |
266 | -84.1916069 | 39.7589478 | |
267 | -73.9625033 | 41.3918372 | |
268 | -120.7401385 | 47.7510741 | |
269 | -46.6333094 | -23.5505199 | |
270 | 116.4073963 | 39.9041999 | |
271 | 117.227219 | 31.820591 | |
272 | 117.227219 | 31.820591 | |
273 | -83.9207392 | 35.9606384 | |
274 | 5.1214201 | 52.0907374 | |
275 | -0.3762881 | 39.4699075 | |
276 | 25.2796514 | 54.6871555 | |
277 | -78.4766781 | 38.0293059 | |
278 | 5.6653948 | 51.9691868 | |
279 | -71.5642076 | 41.6885978 | |
280 | -122.3320708 | 47.6062095 | |
281 | -90.1994042 | 38.6270025 | |
282 | -92.3425775 | 42.492786 | |
283 | -0.1277583 | 51.5073509 | |
284 | 114.305539 | 30.592849 | |
285 | -76.7074571 | 37.2707022 | |
286 | -87.9064736 | 43.0389025 | |
287 | 120.15507 | 30.274084 | |
288 | 120.15507 | 30.274084 | |
289 | 120.15507 | 30.274084 | |
290 | -71.8022934 | 42.2625932 | |
291 | 120.585289 | 31.298974 | |
292 | 118.089425 | 24.479833 | |
293 | -76.727745 | 39.9625984 | |
294 | 120.15507 | 30.274084 | |
295 | 120.15507 | 30.274084 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment