Jeremy Buis jeremybuis

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

A new spinny map for the masses

Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.

D3 Streamgraph Example

Series Hover

The series hover interactivity uses the technique from lgrammel seen here: http://bl.ocks.org/1963983

Data Tooltip

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

Using d3.geo.tile to display raster image tiles underneath some TopoJSON vectors, and d3.behavior.zoom for pan & zoom. This version reprojects the geometry on interaction; compare to updating the transform.

	[
	{
	"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;
	}

	// 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);