D3 Examples - expansion of the US

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>expansion of the US</title>
<style>
​
path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
}
​
#chart {
  position: absolute;
  top: 40px;
  left: 200px;
  width: 700px;
}
​
</style>
    
  </head>
  
  <body>
    
    <div id="chart">
​
      <div id="blahtext">
      </div>
​
    </div>
    
​
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<script>
​
var vbose=0;
var width = 800,
    height = 600;
var dx = 300;
var dy = 100;
var mnyear = 1787;
var mxyear = 1975;
var animateInterval = 300 // milliseconds
var startOpacity = 0.00;
var nyear = 8.0;
​
var projection = d3.geo.mercator()
    .center([120, 50 ])
    .scale(200)
    .rotate([-180,0]);
​
​
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);
  
var g = svg.append("g");
​
d3.json("us_stateYear.json", function(error, us) {
    
    if (error) return console.error(error);
​
    if (vbose>=2) {
        console.log(us);
    }
​
​
   g.selectAll("text")
      .data([mnyear])
      .enter()
      .append("text")
      .attr("x", 375)
      .attr("y", 145)
      .text(function(d) { 
        console.log(["text", d]);
        return d;
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "20px")
        .attr("fill", "#555")
    ;
    
​
   var land = g.selectAll("path")
      .data(topojson.feature(us, us.objects.us_40).features)
      .enter()
      .append("path")
      .attr("class", "land")
      .attr("d", path)
      .style("fill", function(d) {
          console.log(["fill", d]);
          return d.properties["year"]<=mnyear ? "#555" : "#555";
      })
        .style("opacity", 0.0)
    ;
​
    
    g.append("path")
       .datum(topojson.mesh(us, us.objects.us_40, function(a, b) 
                 { 
                     return a !== b; 
                 }
            ))
       .attr("class", "border")
       .attr("d", path)
       .style("opacity", startOpacity);
  
  var color = d3.scale.category20();
  console.log(["color", color]);
​
  var ic = 0;
  var ic2 = 0;
​
  setInterval(function () {
      thisyear = ic + 1787
      console.log(["ic", ic, thisyear]);
      g.selectAll(".land")
        .transition()
        .duration(100)
        .style("opacity", function(d) {
           var y = d.properties["year"];
           var op = (y-thisyear)*(-1.0/nyear) + 1 ;
           if (op>1) {
            op = 1;
           }
           if (op<startOpacity) {
             op=startOpacity;
           }
           return op;
        })
    
          
        g.selectAll("text")
         .text(thisyear)
        ;
​
        ic += 1;
        ic = ic % (mxyear+1-mnyear);
      //ic2 = ic % (mxyear+1-mnyear);
   }, animateInterval)
    
})
​
/**
**/
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform",
           "translate(" + 
           d3.event.translate.join(",") +
           ")scale(" +
           d3.event.scale+
           ")"
          );
​
  });
​
svg.call(zoom)
​
</script>
​
</body>
​
    