Calvein/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Map animation in D3.

  
## australia-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              australia-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

button {
    padding: 5px 8px;
    background: #eee;
    border: 1px solid #909090;
    border-radius: 4px;
    cursor: pointer;
}

input {
    width: 240px;
}

svg,
input {
    display: block;
}

path {
    fill: #4682b4;
    stroke: #3c6e99;
    transition: 0.2s;
}

.active {
    background: #ffa500;
    border-color: #d98c00;
    color: #fff;
    fill: #ffa500;
}


circle {
    fill: #ffd700;
}

</style>
<body>
    <button data-state="vic" data-coord="[144.96327999999994,-37.814107]">Go to Melbourne</button>
    <button data-state="nt" data-coord="[133.88061140000002,-23.7002104]">Go to Alice springs</button>
    <input type="range" min="1" max="100" value="50">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

// Size of the map
var size = 240
// Zoom level to see all Australia
var startScale = 330
// Zoom level when zoomed
var zoomedScale = 1330
// Transition duration
var duration = 400

var projection = d3.geo.mercator()
    .translate([size / 2, size / 2])
    .center([133, -27])
    .scale(startScale)

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

var svg = d3.select('body').append('svg')
    .attr('width', size)
    .attr('height', size)

var rScale = d3.scale.linear()
    .range([1, 0, 1])
    .domain([0, .5, 1])

var states = null
var point = null
var range = 50
d3.json('australia-states.json', function(err, aus) {
    states = svg.append('g')
        .selectAll('path')
        .data(topojson.feature(aus, aus.objects.states).features)
        .enter().append('path')
            .attr('data-state', function(d) {
                return 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', clickButton)

    d3.select('input').on('input', inputRange)
})


function goTo(coord, state) {
    projection.center(coord)
    path.projection(projection)

    states
        .transition()
        .duration(duration)
            .attr('d', path)

    states.classed('active', false)
        .filter(function(d) {
            return d.properties.code === state
        })
        .classed('active', true)

    point.attr('transform', 'translate(' + projection(coord) + ')')
}

function changeRadius(changedCoord) {
    // Scientifically calculated
    r = range * zoomedScale / 5660.377358490566
    // 2 is the minimum radius
    r = d3.max([r, 2])
    if (point.attr('r') === '0') {
        point.transition()
            .delay(duration)
                .attr('r', r)
    } else if (changedCoord) {
        point
            .transition()
            .duration(duration)
                .attrTween('r', function() {
                    return function(t) {
                        return rScale(t) * r
                    }
                })
    } else {
        point.attr('r', r)
    }
}

// Events
function clickButton() {
    el = d3.select(this)
    // D3 doesn't have event delegation
    if (el.classed('active')) return

    d3.selectAll('button').classed('active', false)
    el.classed('active', true)
    coord = JSON.parse(this.dataset.coord)
    state = this.dataset.state
    goTo(coord, state)
    changeRadius(true)
}

function inputRange() {
    range = this.value
    changeRadius()
}

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	button {
	padding: 5px 8px;
	background: #eee;
	border: 1px solid #909090;
	border-radius: 4px;
	cursor: pointer;
	}

	input {
	width: 240px;
	}

	svg,
	input {
	display: block;
	}

	path {
	fill: #4682b4;
	stroke: #3c6e99;
	transition: 0.2s;
	}

	.active {
	background: #ffa500;
	border-color: #d98c00;
	color: #fff;
	fill: #ffa500;
	}


	circle {
	fill: #ffd700;
	}

	</style>
	<body>
	<button data-state="vic" data-coord="[144.96327999999994,-37.814107]">Go to Melbourne</button>
	<button data-state="nt" data-coord="[133.88061140000002,-23.7002104]">Go to Alice springs</button>
	<input type="range" min="1" max="100" value="50">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	// Size of the map
	var size = 240
	// Zoom level to see all Australia
	var startScale = 330
	// Zoom level when zoomed
	var zoomedScale = 1330
	// Transition duration
	var duration = 400

	var projection = d3.geo.mercator()
	.translate([size / 2, size / 2])
	.center([133, -27])
	.scale(startScale)

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

	var svg = d3.select('body').append('svg')
	.attr('width', size)
	.attr('height', size)

	var rScale = d3.scale.linear()
	.range([1, 0, 1])
	.domain([0, .5, 1])

	var states = null
	var point = null
	var range = 50
	d3.json('australia-states.json', function(err, aus) {
	states = svg.append('g')
	.selectAll('path')
	.data(topojson.feature(aus, aus.objects.states).features)
	.enter().append('path')
	.attr('data-state', function(d) {
	return 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', clickButton)

	d3.select('input').on('input', inputRange)
	})


	function goTo(coord, state) {
	projection.center(coord)
	path.projection(projection)

	states
	.transition()
	.duration(duration)
	.attr('d', path)

	states.classed('active', false)
	.filter(function(d) {
	return d.properties.code === state
	})
	.classed('active', true)

	point.attr('transform', 'translate(' + projection(coord) + ')')
	}

	function changeRadius(changedCoord) {
	// Scientifically calculated
	r = range * zoomedScale / 5660.377358490566
	// 2 is the minimum radius
	r = d3.max([r, 2])
	if (point.attr('r') === '0') {
	point.transition()
	.delay(duration)
	.attr('r', r)
	} else if (changedCoord) {
	point
	.transition()
	.duration(duration)
	.attrTween('r', function() {
	return function(t) {
	return rScale(t) * r
	}
	})
	} else {
	point.attr('r', r)
	}
	}

	// Events
	function clickButton() {
	el = d3.select(this)
	// D3 doesn't have event delegation
	if (el.classed('active')) return

	d3.selectAll('button').classed('active', false)
	el.classed('active', true)
	coord = JSON.parse(this.dataset.coord)
	state = this.dataset.state
	goTo(coord, state)
	changeRadius(true)
	}

	function inputRange() {
	range = this.value
	changeRadius()
	}

	</script>
	</body>
	</html>