johan · November 24, 2011 23:09
diff --git a/dnd.js b/dnd.js
 // http://www.html5rocks.com/en/tutorials/file/dndfiles/
 d3.select('svg')
  .on('dragover', handleDragOver)
  .on('drop', handleFileSelect)
  ;

 function handleFileSelect() {
  var event = d3.event
    , files = event.dataTransfer.files // FileList object
    , about = []
    , shape = null;
  event.stopPropagation();
  event.preventDefault();

  for (var i = 0, file; file = files[i]; i++) {
    // f.name, f.size, f.type (doesn't grok "json"), f.lastModifiedDate
    readGeojson(file, draw);
  }
 }

 function readGeojson(file, cb) {
  var reader = new FileReader;
  reader.onload = function(e) {
    cb(e.target.result, file);
  };
  reader.readAsText(file);
 }

 function handleDragOver() {
  var ev = d3.event;
  ev.stopPropagation();
  ev.preventDefault();
  ev.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 }

 function draw(content, file) {
  var json = JSON.parse(content)
    , what = json.features;
  feature.data(countries = countries.features.concat(what))
    .enter().append('svg:path')
      .classed('new', true)
      .attr('id', function(d) { return d.id; })
      .attr('d', clip);
  feature = svg.selectAll('path');
  refresh();
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>d3.js Spinny Globe from Mike Bostock's SVG Open 2011 keynote</title>
    <script src="http://mbostock.github.com/d3/d3.js"></script>
    <script src="http://mbostock.github.com/d3/d3.geo.js"></script>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/style.css"/>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
    <style type="text/css">

 svg {
  width:  800px;
  height: 800px;
  pointer-events: all;
 }

 circle {
  fill: #dbe4f0;
 }

 path {
  fill: #aaa;
  stroke: #fff;
 }

 #header {
  top: 7px;
  left: 685px;
  text-align: right;
  width: auto;
 }

 #header div {
  font-size: 12px;
 }

 .tip { color: #999; }
    </style>
  </head>
  <body>
    <div id="body">
      <div id="header">
        d3.geo.azimuthal
        <div><label for="proj">Projection: </label><select id="proj">
          <option value="equalarea">equalarea</option>
          <option value="equidistant">equidistant</option>
          <option value="gnomonic">gnomonic</option>
          <option value="orthographic" selected>orthographic</option>
          <option value="stereographic">stereographic</option>
        </select></div>
        <div class="tip">drag to rotate the origin</div>
        <div><label for="animate">animate:</label>
          <input id="animate" type="checkbox" checked>
        </div>
      </div>
    </div>
    <script src="vis.js"></script>
    <script src="dnd.js"></script>
  </body>
 </html>
diff --git a/vis.js b/vis.js
 var feature // eventually: all svg paths (countries) of the world
  , countries
  , toggle; // animation on/off control

 var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([400, 400]);

 var circle = d3.geo.greatCircle()
    .origin(projection.origin());

 // TODO fix d3.geo.azimuthal to be consistent with scale
 var scale =
 { orthographic: 380
 , stereographic: 380
 , gnomonic: 380
 , equidistant: 380 / Math.PI * 2
 , equalarea: 380 / Math.SQRT2
 };

 var path = d3.geo.path()
    .projection(projection);

 var svg = d3.select("#body").append("svg:svg")
    .attr("width",  800)
    .attr("height", 800)
    .on("mousedown", mousedown);

 if (frameElement) frameElement.style.height = '800px';

 d3.json("world-countries.json", function(collection) {
  countries = collection;
  feature = svg.selectAll("path")
      .data(collection.features)
    .enter().append("svg:path")
      .attr('id', function(d) { return d.id; })
      .attr("d", clip);

  feature.append("svg:title")
      .text(function(d) { return d.properties.name; });

  startAnimation();
  d3.select('#animate').on('click', function () {
    if (done) startAnimation(); else stopAnimation();
  });
 });

 function stopAnimation() {
  done = true;
  d3.select('#animate').node().checked = false;
 }

 function startAnimation() {
  done = false;
  d3.timer(function() {
    var origin = projection.origin();
    origin = [origin[0] + .18, origin[1] + .06];
    projection.origin(origin);
    circle.origin(origin);
    refresh();
    return done;
  });
 }

 function animationState() {
  return 'animation: '+ (done ? 'off' : 'on');
 }

 d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

 d3.select("select").on("change", function() {
  stopAnimation();
  projection.mode(this.value).scale(scale[this.value]);
  refresh(750);
 });

 var m0
  , o0
  , done
  ;

 function mousedown() {
  stopAnimation();
  m0 = [d3.event.pageX, d3.event.pageY];
  o0 = projection.origin();
  d3.event.preventDefault();
 }

 function mousemove() {
  if (m0) {
    var m1 = [d3.event.pageX, d3.event.pageY]
      , o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
    projection.origin(o1);
    circle.origin(o1);
    refresh();
  }
 }

 function mouseup() {
  if (m0) {
    mousemove();
    m0 = null;
  }
 }

 function refresh(duration) {
  (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
 }

 function clip(d) {
  return path(circle.clip(d));
 }

 function reframe(css) {
  for (var name in css)
    frameElement.style[name] = css[name] + 'px';
 }
diff --git a/world-countries.json b/world-countries.json
	// http://www.html5rocks.com/en/tutorials/file/dndfiles/
	d3.select('svg')
	.on('dragover', handleDragOver)
	.on('drop', handleFileSelect)
	;

	function handleFileSelect() {
	var event = d3.event
	, files = event.dataTransfer.files // FileList object
	, about = []
	, shape = null;
	event.stopPropagation();
	event.preventDefault();

	for (var i = 0, file; file = files[i]; i++) {
	// f.name, f.size, f.type (doesn't grok "json"), f.lastModifiedDate
	readGeojson(file, draw);
	}
	}

	function readGeojson(file, cb) {
	var reader = new FileReader;
	reader.onload = function(e) {
	cb(e.target.result, file);
	};
	reader.readAsText(file);
	}

	function handleDragOver() {
	var ev = d3.event;
	ev.stopPropagation();
	ev.preventDefault();
	ev.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
	}

	function draw(content, file) {
	var json = JSON.parse(content)
	, what = json.features;
	feature.data(countries = countries.features.concat(what))
	.enter().append('svg:path')
	.classed('new', true)
	.attr('id', function(d) { return d.id; })
	.attr('d', clip);
	feature = svg.selectAll('path');
	refresh();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>d3.js Spinny Globe from Mike Bostock's SVG Open 2011 keynote</title>
	<script src="http://mbostock.github.com/d3/d3.js"></script>
	<script src="http://mbostock.github.com/d3/d3.geo.js"></script>
	<link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/style.css"/>
	<link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
	<style type="text/css">

	svg {
	width: 800px;
	height: 800px;
	pointer-events: all;
	}

	circle {
	fill: #dbe4f0;
	}

	path {
	fill: #aaa;
	stroke: #fff;
	}

	#header {
	top: 7px;
	left: 685px;
	text-align: right;
	width: auto;
	}

	#header div {
	font-size: 12px;
	}

	.tip { color: #999; }
	</style>
	</head>
	<body>
	<div id="body">
	<div id="header">
	d3.geo.azimuthal
	<div><label for="proj">Projection: </label><select id="proj">
	<option value="equalarea">equalarea</option>
	<option value="equidistant">equidistant</option>
	<option value="gnomonic">gnomonic</option>
	<option value="orthographic" selected>orthographic</option>
	<option value="stereographic">stereographic</option>
	</select></div>
	<div class="tip">drag to rotate the origin</div>
	<div><label for="animate">animate:</label>
	<input id="animate" type="checkbox" checked>
	</div>
	</div>
	</div>
	<script src="vis.js"></script>
	<script src="dnd.js"></script>
	</body>
	</html>
	var feature // eventually: all svg paths (countries) of the world
	, countries
	, toggle; // animation on/off control

	var projection = d3.geo.azimuthal()
	.scale(380)
	.origin([-71.03,42.37])
	.mode("orthographic")
	.translate([400, 400]);

	var circle = d3.geo.greatCircle()
	.origin(projection.origin());

	// TODO fix d3.geo.azimuthal to be consistent with scale
	var scale =
	{ orthographic: 380
	, stereographic: 380
	, gnomonic: 380
	, equidistant: 380 / Math.PI * 2
	, equalarea: 380 / Math.SQRT2
	};

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("#body").append("svg:svg")
	.attr("width", 800)
	.attr("height", 800)
	.on("mousedown", mousedown);

	if (frameElement) frameElement.style.height = '800px';

	d3.json("world-countries.json", function(collection) {
	countries = collection;
	feature = svg.selectAll("path")
	.data(collection.features)
	.enter().append("svg:path")
	.attr('id', function(d) { return d.id; })
	.attr("d", clip);

	feature.append("svg:title")
	.text(function(d) { return d.properties.name; });

	startAnimation();
	d3.select('#animate').on('click', function () {
	if (done) startAnimation(); else stopAnimation();
	});
	});

	function stopAnimation() {
	done = true;
	d3.select('#animate').node().checked = false;
	}

	function startAnimation() {
	done = false;
	d3.timer(function() {
	var origin = projection.origin();
	origin = [origin[0] + .18, origin[1] + .06];
	projection.origin(origin);
	circle.origin(origin);
	refresh();
	return done;
	});
	}

	function animationState() {
	return 'animation: '+ (done ? 'off' : 'on');
	}

	d3.select(window)
	.on("mousemove", mousemove)
	.on("mouseup", mouseup);

	d3.select("select").on("change", function() {
	stopAnimation();
	projection.mode(this.value).scale(scale[this.value]);
	refresh(750);
	});

	var m0
	, o0
	, done
	;

	function mousedown() {
	stopAnimation();
	m0 = [d3.event.pageX, d3.event.pageY];
	o0 = projection.origin();
	d3.event.preventDefault();
	}

	function mousemove() {
	if (m0) {
	var m1 = [d3.event.pageX, d3.event.pageY]
	, o1 = [o0[0] + (m0[0] - m1[0]) / 8, o0[1] + (m1[1] - m0[1]) / 8];
	projection.origin(o1);
	circle.origin(o1);
	refresh();
	}
	}

	function mouseup() {
	if (m0) {
	mousemove();
	m0 = null;
	}
	}

	function refresh(duration) {
	(duration ? feature.transition().duration(duration) : feature).attr("d", clip);
	}

	function clip(d) {
	return path(circle.clip(d));
	}

	function reframe(css) {
	for (var name in css)
	frameElement.style[name] = css[name] + 'px';
	}