Little map animation in D3 (needs https://www.npmjs.org/serveur)

app.coffee

# 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()
    )
)

australia-states.geojson

index.jade

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')

index.styl

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