FINAL PROJECT 04/26

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#tr {
  fill: none;
  stroke: black;
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
#selected { 
  fill: blue;
	stroke: blue;
  stroke-width: 3.5px;
}
</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 bstations = svg.append("g");  
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";
var stations = "https://raw.githubusercontent.com/AnaMal08/classes/master/finalproject/sharebike2.json";
d3.queue()
		.defer(d3.json, trail)
		.defer(d3.json, stations)
    .await(ready);
function ready(error, trail, bikeStations) {
  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);

// plot trails 
  svg.selectAll('path.trail')
      .data(trails)
    .enter()
    	.append('path')
      .attr("class", "trail")
      .style("stroke", 'crimson')
  		.style('fill', 'none')
      .attr("d", path)
  		.on('mouseover', function(d){
         d3.select(this).classed("selected", true)
      });
		
  //bikestations  
   
  bstations.selectAll(".station")
      .data(bikeStations.features)
    .enter().append("path")
      .attr("class", "station")
      .style("fill", 'blue')
  		.attr("d", path);

}

</script>

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

https://d3js.org/d3-tile.v0.0.min.js

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