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
license: gpl-3.0 |
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 = "http://enjalot.github.io/wwsd/data/world/world-110m.geojson"; | |
var url2 = "http://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> |