Last active
August 29, 2015 14:03
-
-
Save Calvein/6bee141125618d04eb00 to your computer and use it in GitHub Desktop.
Little map animation in D3 (needs https://www.npmjs.org/serveur)
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
# Size of the map | |
size = 240 | |
# Zoom level to see all Australia | |
startScale = 330 | |
# Zoom level when zoomed | |
zoomedScale = 1330 | |
# Transition duration | |
duration = 400 | |
projection = d3.geo.mercator() | |
.translate([size / 2, size / 2]) | |
.center([133, -27]) | |
.scale(startScale) | |
path = d3.geo.path() | |
.projection(projection) | |
svg = d3.select('body').append('svg') | |
.attr('width', size) | |
.attr('height', size) | |
goTo = (coord, state) -> | |
projection.center(coord) | |
path.projection(projection) | |
states | |
.transition() | |
.duration(duration) | |
.attr('d', path) | |
states.classed('active', false) | |
.filter((d) -> d.properties.code is state) | |
.classed('active', true) | |
point.attr('transform', "translate(#{projection(coord)})") | |
rScale = d3.scale.linear() | |
.range([1, 0, 1]) | |
.domain([0, .5, 1]) | |
changeRadius = (changedCoord) -> | |
# Scientifically calculated | |
r = range * zoomedScale / 5660.377358490566 | |
if point.attr('r') is '0' | |
point.transition() | |
.delay(duration) | |
.attr('r', r) | |
else if changedCoord | |
point | |
.transition() | |
.duration(duration) | |
.attrTween('r', -> | |
return (t) -> | |
return rScale(t) * r | |
) | |
else | |
point.attr('r', r) | |
states = null | |
point = null | |
range = 50 | |
d3.json('australia-states.geojson', (data) -> | |
states = svg.append('g') | |
.selectAll('path') | |
.data(data.features) | |
.enter().append('path') | |
.attr('data-state', (d) -> d.properties.code) | |
.attr('d', path) | |
point = svg.append('circle') | |
.attr('r', 0) | |
projection.scale(zoomedScale) | |
# Go to a location | |
d3.selectAll('button').on('click', -> | |
el = d3.select(@) | |
# D3 doesn't have event delegation | |
return if el.classed('active') | |
d3.selectAll('button').classed('active', false) | |
el.classed('active', true) | |
coord = JSON.parse(@dataset.coord) | |
state = @dataset.state | |
goTo(coord, state) | |
changeRadius(true) | |
) | |
d3.select('input').on('input', -> | |
range = @value | |
changeRadius() | |
) | |
) |
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 | |
html(lang='en') | |
head | |
meta(charset='utf-8') | |
title D3 Map | |
link(rel='stylesheet', href='index.styl') | |
body | |
button(data-state='vic', data-coord='[144.96327999999994,-37.814107]') Go to Melbourne | |
button(data-state='nt', data-coord='[133.88061140000002,-23.7002104]') Go to Alice springs | |
input(type='range', min='1', max='100', value='50') | |
script(src='//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.js') | |
script(src='app.coffee') |
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
button | |
padding 5px 8px | |
background #eee | |
border 1px solid darken(#aaa, 15%) | |
border-radius 4px | |
cursor pointer | |
input | |
width 240px | |
svg | |
input | |
display block | |
path | |
fill steelblue | |
stroke darken(steelblue, 15%) | |
transition .2s | |
.active | |
// Buttons | |
background orange | |
border-color darken(orange, 15%) | |
color white | |
// States | |
fill orange | |
circle | |
fill gold |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment