d3.geo.statePlane by gka

index.html

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

path {
    fill: #fafafa;
    stroke: lightgray;
    transition: fill 0.5s ease-in-out;
}

path.selected {
    fill: #D4CECE;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="//cdn.rawgit.com/gka/d3-geo-state-plane/master/state-plane.js"></script>
<script>

var width = 960,
    height = 500,
    margin = 50;

var svg = d3.select("body").append("svg")
    .attr("width", width).attr("height", height)
    .append('g').attr('transform', 'translate('+[margin,margin]+')');

width -= margin * 2; height -= margin * 2;

d3.json("us-states.json", function(error, us) {
    if (error) throw error;
    
    var proj = d3.geo.albersUsa()
        .translate([width*0.5,height*0.5])
        .scale(width*1.2);
        
    var path = d3.geo.path().projection(proj);
    
    var features = topojson.feature(us, us.objects.states).features
        .filter(function(d) {
            return d.properties.postal;
        });
    
    var state = svg.selectAll('path')
        .data(features)
        .enter()
        .append('path')
        .attr('d', path);

    var shuffle = d3.shuffle(d3.range(features.length)),
        cur_i = 0;

    setInterval(function() {
        var randomState = features[cur_i++ % features.length];
        
        proj = d3.geo.statePlane(randomState.properties.postal, width, height);
        
        path.projection(proj);

        state.classed('selected', function(d) {
                return d == randomState;
            })
            .transition()
            .duration(750)
            .attr('d', path);

    }, 2000);
  
});


</script>