Washington D.C. Roads

Map of D.C. roads, simplified in mapshaper and then built with D3.s and topoJSON. Created by blockbuilder.

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>

path {
    fill: none;
    stroke: black;
    stroke-width: .2px;
  }
</style>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var transLat = -250;
var transLon = -550;
var transScale = 2.2;
var width = 960;
var height = 600;
var margin = {top: 0, bottom: 0, left: 0, right: 0}
var locations = new Map()

d3.queue()
    .defer(d3.json, "simpleroads.json")
		.defer(d3.csv, "locations.csv", function(d){
      d.lat = +d.lat
      d.lon = +d.lon
      return d;
		})
    .await(ready)

function ready(error,world,locations) {
  
  console.log("Locations data:", locations)
  var projection = d3.geoMercator().fitSize([width,height],world)
  var path = d3.geoPath().projection(projection) // Geopath generator
  var zoomExtent = d3.zoom().scaleExtent([1.6, 3]).on("zoom", zoom);

function zoom() {
    if(g){
    g.attr("transform", d3.event.transform)
    }
  }

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("background-color","lightgrey")
    .call(zoomExtent)
  .call(zoomExtent.transform, d3.zoomIdentity.translate(transLat, transLon).scale(transScale));

var g = svg.append("g")
      .attr("class", "mapInformation")
  		.attr("transform", `translate(${transLat},${transLon}) scale(${transScale})`)
  
  var paths = g.selectAll("path")
      .data(world.features)
      .enter()
      .append("path")
      .attr("d", path)
  		.on("mousemove", function(){
        console.log(d3.select("g.mapInformation").attr("transform")) 
      })
  
  var locations = g.selectAll("circle")
  		.data(locations)
  		.enter()
  		.append("circle")
  		.attr("cx", d => projection([d.lon,d.lat])[0])
  		.attr("cy", d => projection([d.lon,d.lat])[1])
  	  .attr("r", 1)
  		.style("fill","red")
  
  console.log(d3.selectAll("circle").nodes())
}
</script>

https://code.jquery.com/jquery-3.2.1.slim.min.js

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

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