Last active
December 26, 2016 02:03
-
-
Save sarubenfeld/58c7b480d6dd72b5f64943db6cf03e2b to your computer and use it in GitHub Desktop.
SF ROADS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment