D3 Examples - with trails

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#tr {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-tile.v0.0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var pi = Math.PI,
    tau = 2 * pi;
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
  
  var projection = d3.geoConicConformal()
        .parallels([38+18/60,39+27/60])
        .rotate([77,-37-40/60]);
  var path = d3.geoPath()
        .projection(projection);
  
var us = "https://umbcvis.github.io/classes/class-03/us.json";
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
var trail ="https://raw.githubusercontent.com/AnaMal08/classes/master/finalproject/trailstopo";
d3.queue()
        .defer(d3.json, trail)
    .await(ready);
function ready(error, trail) {
  if (error) throw error;
​
  geojson = topojson.feature(trail, trail.objects.collection);
  trails=geojson.features;
  
  // Set projection scale & translate to DC
    projection.fitSize([960,500], geojson);
​
  
  svg.selectAll('path.trail')
      .data(trails)
    .enter()
        .append('path')
      .attr("class", "trail")
      .style("stroke", 'crimson')
        .style('fill', 'none')
      .attr("d", path)
 
  }
</script>
    