Skip to content

Instantly share code, notes, and snippets.

@almccon
Created March 25, 2018 21:22
Show Gist options
  • Save almccon/73425da842da08fe55afbb143d5a577f to your computer and use it in GitHub Desktop.
Save almccon/73425da842da08fe55afbb143d5a577f to your computer and use it in GitHub Desktop.
WWSD #7: d3 mouse interaction
license: gpl-3.0
<!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);
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) throw error;
console.log("geojson", countries, places);
svg.selectAll("path")
.data(countries.features)
.enter().append("path")
.attr("d", path)
svg.selectAll("circle")
.data(places.features)
.enter().append("circle")
.attr({
r: 5,
cx: function(d) { return projection(d.geometry.coordinates)[0]},
cy: function(d) { return projection(d.geometry.coordinates)[1]}
}).on("mouseover", function(d) {
d3.select(this).attr("r",10);
console.log(d);
}).on("mouseout", function(d) {
d3.select(this).attr("r",5);
console.log(d);
})
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment