Old school D3 from simpler times

All examples By author By category About

almccon

Full window Github gist

d3 loading GeoJSON + 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

forked from enjalot's block: WWSD #7: d3 mouse interaction

<!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: pink;
}
circle.active {
  fill: blue;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v2.min.js"></script>

<script>

var width = 960,
    height = 500;

var projection = d3.geoMercator();
  
var path = d3.geoPath()
  .projection(projection)

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

var url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
var url2 = "https://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson"
d3.json(url, function(error, countries) {
d3.json(url2, function(error, places) {
  if (error) console.log(error);
  
  console.log("geojson", countries, places);
 
  svg.selectAll("path")
    .data(countries.features)
  .enter().append("path")
    .attr("d", path)
    .on("mouseover",function(d) {
    	console.log("just had a mouseover", d3.select(d));
    	d3.select(this)
      	.classed("active",true)
  	})
  	.on("mouseout",function(d){
    	d3.select(this)
      	.classed("active",false)
    })
  
  
  svg.selectAll("circle")
  	.data(places.features)
  .enter().append("circle")
  	.attr('r',5)
    .attr('cx',function(d) { return projection(d.geometry.coordinates)[0]})
    .attr('cy',function(d) { return projection(d.geometry.coordinates)[1]})
    .on("mouseover",function(d) {
    	console.log("just had a mouseover", d3.select(d));
    	d3.select(this)
      	.classed("active",true)
  	})
  	.on("mouseout",function(d){
    	d3.select(this)
      	.classed("active",false)
    })
  
  })
  
});

</script>

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

https://d3js.org/d3.geo.projection.v2.min.js