WWSD #7: d3 mouse interaction

Working with spatial data

Example #7

Simple mouse interaction with d3.js

forked from mbostock's block: U.S. Counties TopoJSON

forked from enjalot's block: WWSD #5: d3 + TopoJSON

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}
  
circle {
  fill: #fff;
  fill-opacity: 0.4;
  stroke: #111;
}
  
path.active {
  fill: #ff7f7f;
}
  circle.active {
    fill: #f00;
  }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geo.mercator();
  
var path = d3.geo.path()
  .projection(projection)

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

</script>

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

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