Extent indicator globe using d3.geo.orthographic and radial gradients.
Slippy map code from:
http://bl.ocks.org/3943330 by tmcw
http://bl.ocks.org/4132797 by mbostock
Map tiles from Stamen
| // Taken from | |
| // http://raganwald.com/2014/04/10/mixins-forwarding-delegation.html | |
| (function(window) { | |
| var __slice = [].slice; | |
| function extend () { | |
| var consumer = arguments[0], | |
| providers = __slice.call(arguments, 1), | |
| key, |
| // http://stackoverflow.com/questions/1295584/most-efficient-way-to-create-a-zero-filled-javascript-array?lq=1 | |
| Array.apply(null, new Array(5)).map(Number.prototype.valueOf, 0); |
| ### Keybase proof | |
| I hereby claim: | |
| * I am jeremybuis on github. | |
| * I am jeremybuis (https://keybase.io/jeremybuis) on keybase. | |
| * I have a public key whose fingerprint is 21C8 761C 3FCE 1C4F CBC9 70A9 D15D B207 8DFE 16B1 | |
| To claim this, I am signing this object: |
Extent indicator globe using d3.geo.orthographic and radial gradients.
Slippy map code from:
http://bl.ocks.org/3943330 by tmcw
http://bl.ocks.org/4132797 by mbostock
Map tiles from Stamen
| [ | |
| { | |
| "ISO 3166-2": "ISO 3166-2:AF", | |
| "Alpha-3 code": "AFG", | |
| "English short name lower case": "Afghanistan", | |
| "Alpha-2 code": "AF", | |
| "Numeric code": 4.0 | |
| }, | |
| { | |
| "ISO 3166-2": "ISO 3166-2:AX", |
| <!doctype html> | |
| <head> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| #main { | |
| left: 25%; | |
| position: absolute; | |
| } |
Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.
The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983
It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.
This done with svg http://bl.ocks.org/mbostock/6242308 using this technique http://bl.ocks.org/mbostock/2374239