SF ROADS

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

body {
  background: radial-gradient(720px at 490px, #081f2b 0%, #061616 100%);
  height: 960px;
  font-family: 'Bungee Hairline', cursive;
  text-anchor: middle
}

path {
  stroke-width: 1px;
  stroke: #6666ff;
  fill: none;
  cursor: pointer;
}

path:hover, path.highlighted {
  fill: #FFC300;
}

div.tooltip {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-weight: bold;
  padding: 4px 8px;
  display: none;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<script>

//Map dimensions (in pixels)
var width = 600,
    height = 570;

//Map projection
var projection = d3.geoMercator()
    .scale(198420.3114498199)
    .center([-122.43132049999998,37.76991378795683]) //projection center
    .translate([width/2,height/2]) //translate to center the map in view

//Generate paths based on projection
var path = d3.geoPath()
    .projection(projection);

//Create an SVG
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//Group for the map features
var features = svg.append("g")
    .attr("class","features");

//Create zoom/pan listener
//Change [1,Infinity] to adjust the min/max zoom scale
var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .on("zoom",zoomed);

svg.call(zoom);

//Create a tooltip, hidden at the start
var tooltip = d3.select("body").append("div").attr("class","tooltip");

d3.json("tl_2012_06075_roads.topojson",function(error,geodata) {
  if (error) return console.log(error); //unknown error, check the console

//Create a path for each map feature in the data
  features.selectAll("path")
    .data(topojson.feature(geodata,geodata.objects.tl_2012_06075_roads).features) //generate features from TopoJSON
    .enter()
    .append("path")
    .attr("d",path)
    .on("mouseover",showTooltip)
    .on("mousemove",moveTooltip)
    .on("mouseout",hideTooltip)
    .on("click",clicked);

});

// Add optional onClick events for features here
// d.properties contains the attributes (e.g. d.properties.name, d.properties.population)
function clicked(d,i) {

}

//Update map on zoom/pan
function zoomed() {
  features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")")
      .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
}

//Position of the tooltip relative to the cursor
var tooltipOffset = {x: 5, y: -25};

//Create a tooltip, hidden at the start
function showTooltip(d) {
  moveTooltip();

tooltip.style("display","block")
      .text(d.properties.FULLNAME);
}

//Move the tooltip to track the mouse
function moveTooltip() {
  tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px")
      .style("left",(d3.event.pageX+tooltipOffset.x)+"px");
}

//Create a tooltip, hidden at the start
function hideTooltip() {
  tooltip.style("display","none");
}
</script>

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.v4.min.js

https://d3js.org/d3-ease.v1.min.js

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

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-dispatch.v1.min.js

https://d3js.org/d3-ease.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-selection.v1.min.js

https://d3js.org/d3-timer.v1.min.js

https://d3js.org/d3-transition.v1.min.js

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-geo-projection.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

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

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