expansion of the US

Expansion of the US. Map is zoomable.

forked from bdilday's block: expansion of the US

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js