forked from sara-maria's block: Spinning globe with city markers
forked from anonymous's block: Spinning globe with city markers
forked from anonymous's block: Spinning globe with city markers
Created
October 31, 2017 12:42
-
-
Save cyrilcherian/8f573be5c2dbc6620fedad8f7b1e247d to your computer and use it in GitHub Desktop.
Spinning globe with city markers
This file contains hidden or 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
| license: mit |
This file contains hidden or 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") | |
| .classed("city", true) | |
| .datum(function(d) { | |
| return { | |
| type: "Point", | |
| coordinates: [d.lon, d.lat], | |
| class: "nohighlight" //My attempt at changing style through class..... not working.... | |
| }; }) | |
| .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++; | |
| // Control the radius of ALL circles! | |
| pathproj.pointRadius(function(d,i) { | |
| if (i < city_idx){ | |
| return 4 | |
| } else | |
| return 2 | |
| }); | |
| // CHANGE CLASS? | |
| // CHANGE RADIUS? | |
| d3.selectAll(".city").attr("class", function(d, i){ | |
| if (i < city_idx){ | |
| return "city highlight" | |
| } else | |
| return "city" | |
| }).attr("d", pathproj) | |
| var len = d3.selectAll(".city").data().length; | |
| console.log(city_idx, len) | |
| //Stop when all cities are highlighted | |
| if(city_idx>=len){ | |
| 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 hidden or 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