xxxxxxxxxx
<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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://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>
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