Skip to content

Instantly share code, notes, and snippets.

@davidgtonge
Last active December 10, 2015 12:09
Show Gist options
  • Save davidgtonge/4432627 to your computer and use it in GitHub Desktop.
Save davidgtonge/4432627 to your computer and use it in GitHub Desktop.
D3 Projections Animation
width = 960
height = 500
projections =
"Aitoff": d3.geo.aitoff
"Albers equal": d3.geo.albers
"August conformal": d3.geo.august
"Lambert azimuthal equal": d3.geo.azimuthalEqualArea
"Azimuthal equidistant": d3.geo.azimuthalEquidistant
"Bonne": d3.geo.bonne
"Collignon": d3.geo.collignon
"Lambert conformal conic": d3.geo.conicConformal
"Conic equidistant": d3.geo.conicEquidistant
"Cylindrical equal": d3.geo.cylindricalEqualArea
"Eckert I": d3.geo.eckert1
"Eckert II": d3.geo.eckert2
"Eckert III": d3.geo.eckert3
"Eckert IV": d3.geo.eckert4
"Eckert V": d3.geo.eckert5
"Eckert VI": d3.geo.eckert6
"Eisenlohr conformal": d3.geo.eisenlohr
"Equirectangular (Plate Carrée)": d3.geo.equirectangular
"Gnomonic": d3.geo.gnomonic
"Gringorten": d3.geo.gringorten
"Guyou hemisphere": d3.geo.guyou
"Hammer": d3.geo.hammer
"Goode homolosine": d3.geo.homolosine
"Kavrayskiy VII": d3.geo.kavrayskiy7
"Lagrange conformal": d3.geo.lagrange
"Larrivée": d3.geo.larrivee
"Loximuthal": d3.geo.loximuthal
"Mercator": d3.geo.mercator
"Miller": d3.geo.miller
"Mollweide": d3.geo.mollweide
"Nell–Hammer": d3.geo.nellHammer
"Orthographic": d3.geo.orthographic
"Pierce quincuncial": d3.geo.peirceQuincuncial
"Polyconic": d3.geo.polyconic
"Robinson": d3.geo.robinson
"Satellite (tilted perpsective)": d3.geo.satellite
"Sinusoidal": d3.geo.sinusoidal
"Sinu": d3.geo.sinuMollweide
"Stereographic": d3.geo.stereographic
"Van der Grinten": d3.geo.vanDerGrinten
"Wagner VI": d3.geo.wagner6
"Winkel Tripel": d3.geo.winkel3
clipAngle = 90
path = d3.geo.path().projection(projections.Aitoff().clipAngle(clipAngle))
graticule = d3.geo.graticule()
.extent([[-180, -90], [180 - .1, 90 - .1]])
.step([5,5])
ol = d3.select("body")
.append("ol")
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
line = svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path)
animateProjection = (d) ->
list.attr("class","")
this.className = "bold"
projection = projections[d]().clipAngle(clipAngle)
path = d3.geo.path().projection(projection)
line.transition().duration(1000).attr("d",path)
list = ol.selectAll(".projections")
.data(name for name of projections)
.enter()
.append("li")
.text( (d) -> d )
.on("click", animateProjection)
#
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>D3 and Backbone Query</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<style>
.graticule {
fill: none;
stroke: #464646;;
stroke-width: 1px;
}
li {cursor:pointer; float:left; width:210px;}
li:hover {text-decoration: underline;}
li.bold {color:#ff4500;}
</style>
</head>
<body>
<script type="text/coffeescript" src="graticules.coffee"> </script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment