See discussion on Hacker News. Built with D3 and TopoJSON.
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
// Copyright 2014, Jason Davies, http://www.jasondavies.com/ | |
(function() { | |
d3.geo.raster = function(projection) { | |
var path = d3.geo.path().projection(projection), | |
url = null, | |
scaleExtent = [0, Infinity], | |
subdomains = ["a", "b", "c", "d"]; | |
var reprojectDispatch = d3.dispatch('reprojectcomplete'); |
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> | |
.graticule { | |
fill: none; | |
stroke: #777; | |
} | |
.boundary { |
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> | |
.background { | |
fill: none; | |
pointer-events: all; | |
} | |
#states { |
Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.
Like my other recreation of the xkcd:1335 map projection, but rotated to solar noon at 12 o’clock and with the solar terminator overlaid. The blue region is night. The map updates continuously.
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
<html> | |
<head> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script> | |
</head> | |
<body> | |
<svg> | |
<defs> | |
<mask id="rekt"> | |
<g id="rrr"> |
The Albers equal-area conic projection is available as d3.geo.albers. See also the interactive version.
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"> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; |
Part of a series of examples. See:
- mousewheel-zoom + click-to-center via projection
- click-to-center via projection
- click-to-center via transform
- click-to-zoom via transform
More recently, see the Zoom to Bounding Box example.