Built with blockbuilder.org
Last active
March 23, 2017 04:46
-
-
Save itsallearth/50e6ec9775b90df8193718b21e67c043 to your computer and use it in GitHub Desktop.
fresh block test
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
| license: mit |
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| h1 { | |
| position: absolute; | |
| top: 500px; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 18px; | |
| text-align: center; | |
| width: 960px; | |
| } | |
| .graticule { | |
| fill: none; | |
| stroke-width: 10px; | |
| stroke: purple; | |
| } | |
| .circleThing { | |
| fill: none; | |
| stroke-width: 0; | |
| } | |
| </style> | |
| <h1></h1> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/queue.v1.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960; | |
| var height = 960; | |
| var projection = d3.geo.orthographic() | |
| .translate([width / 2, height / 2]) | |
| .scale(width / 2 - 20) | |
| .clipAngle(90) | |
| .precision(0.6); | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var c = canvas.node().getContext("2d"); | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| .context(c); | |
| var title = d3.select("h1"); | |
| var ppp = d3.select("p"); | |
| var h2 = d3.select("h2"); | |
| queue() | |
| .defer(d3.json, "world-110m.json") | |
| .defer(d3.json, "mig.json") | |
| .await(ready); | |
| function ready(error, world, routes) { | |
| if (error) throw error; | |
| var globe = { type: "Sphere" }; | |
| var land = topojson.feature(world, world.objects.land); | |
| var borders = topojson.mesh(world, world.objects.countries, function (a, b) { return a !== b; }); | |
| var i = -1; | |
| var rt = ""; | |
| var rl = routes.length; | |
| var mp = ""; | |
| (function transition() { | |
| d3.transition() | |
| .duration(1250) | |
| .each("start", function () { | |
| title.text(i + ", " + [i = (i + 1) % rl]); | |
| title.text(i); | |
| title.text(routes[i].bplace); | |
| }) | |
| .tween("rotate", function () { | |
| var x1 = parseFloat(routes[i].Blon); | |
| var y1 = parseFloat(routes[i].Blat); | |
| var x2 = parseFloat(routes[i].Dlon); | |
| var y2 = parseFloat(routes[i].Dlat); | |
| var xx = (x1 + x2) / 2; | |
| var yy = (y1 + y2) / 2; | |
| var p = [xx, yy]; | |
| var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]); | |
| return function (t) { | |
| projection.rotate(r(t)); | |
| c.clearRect(0, 0, width, height); | |
| c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill(); //gray countries | |
| c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke(); | |
| c.strokeStyle = "#000", c.lineWidth = 3, c.beginPath(), path(globe), c.stroke(); | |
| c.beginPath(), | |
| c.arc(routes[i].Blon, routes[i].Blat, 10, 0 * Math.PI, 2 * Math.PI), | |
| c.stroke(), | |
| c.fill(); | |
| c.strokeStyle = "#0000FB", | |
| c.fillStyle = "white", | |
| c.lineWidth = 4, | |
| path({ type: "LineString", coordinates: [[routes[i].Blon, routes[i].Blat], [routes[i].Dlon, routes[i].Dlat]] }), | |
| c.fill(); | |
| ppp.text = c.strokeStyle; | |
| c.stroke(); | |
| c.beginPath(); | |
| }; | |
| }) | |
| .transition() | |
| .each("end", transition); | |
| })(); | |
| } | |
| </script> |
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": 6, | |
| "bplace": "London to Boston.", | |
| "Blon": -0.2416809, | |
| "Blat": 51.5287718, | |
| "Dlon": -71.197240, | |
| "Dlat": 42.3135421 | |
| }, | |
| { | |
| "id": 7, | |
| "bplace": "Paris to Brownfield, Maine", | |
| "Blon": 2.2775175, | |
| "Blat": 48.8588377, | |
| "Dlon": -70.9783286, | |
| "Dlat": 43.9456516 | |
| }, | |
| { | |
| "id": 8, | |
| "bplace": "Bahia to Brea", | |
| "Blon": -46.4785939, | |
| "Blat": -13.3838236, | |
| "Dlon": -117.9231249, | |
| "Dlat": 33.926679 | |
| }, | |
| { | |
| "id": 9, | |
| "bplace": "Amazonas to South Africa", | |
| "Blon": -69.4446007, | |
| "Blat": 3.7740998, | |
| "Dlon": 20.1812937, | |
| "Dlat": -28.4055426 | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment