D3 Examples - Pacific Coast Highway

xxxxxxxxxx
 
<!doctype html>
<meta charset="utf-8">
<style>
.westcoast {
  stroke: none;
  fill: #b8b8b8;
}
​
.pch {
  fill: none;
  stroke: red;
  stroke-width: 2px;
}
​
.ball {
  fill: #000; 
}
​
.interior-boundary {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.8;
  stroke-dasharray: 8,6;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 500;
var height = 900;
​
var projection = d3.geoAlbers()
  .scale(2400)
  .translate([850,550])
​
var path = d3.geoPath()
  .projection(projection)
​
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "rotate(-13)"); 
​
d3.json("westcoast_pch.json", function(data) {
  /* map */
  svg.append("path")
    .datum(topojson.feature(data, data.objects.westcoast))
    .attr("d", path)
    .attr("class", "westcoast")
​
  /* interior boundaries between states */
  svg.append("path")
    .datum(topojson.mesh(data, data.objects.westcoast, function(a, b) {
      return a !== b;
    }))
    .attr("d", path)
    .attr("class", "interior-boundary");
  
  /* road */
  var pch = svg.append("path")
    .datum(topojson.feature(data, data.objects.pch))
    .attr("d", path)
    .attr("class", "pch")
    
  /* wiggle */  
  var circle = svg.append("circle")
    .attr("r", 3)
    .attr("class", "ball")
    .attr("transform", "translate(0,0)")
​
  circle
    .transition()
    .duration(20000)
    .attrTween("transform", translateAlong(pch.node()));
  
  /* https://bl.ocks.org/mbostock/1705868 */
  // Returns an attrTween for translating along the specified path element. 
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
 }
});
​
</script>
​
    