| license: gpl-3.0 |
Simple mouse interaction with d3.js. Mouse over a city and it will nudge all the other cities out of the way.
NOTE: we made this on-the-fly in the Stamen dataviz workshop, so it's pretty rough!
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; | |
| } | |
| circle.selected { | |
| fill: red; | |
| } | |
| 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 src="//d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var projection = d3.geo.winkel3() | |
| .scale(width/2/Math.PI) | |
| .translate([width/2,height/2]); | |
| 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; | |
| var circleScale = d3.scale.sqrt() | |
| .domain([0,30000000]) | |
| .range([1,30]) | |
| 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: function(d) { return circleScale(d.properties.pop_max) }, | |
| cx: function(d) { return projection(d.geometry.coordinates)[0]}, | |
| 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("selected",true) | |
| .attr("r", 20); | |
| var currentX = projection(d.geometry.coordinates)[0]; | |
| var currentY = projection(d.geometry.coordinates)[1]; | |
| svg.selectAll("circle") | |
| .filter(function(d) { return !d3.select(this).classed("selected");}) | |
| //.style("fill","blue") | |
| .transition() | |
| .attr("cx", function(d) { | |
| var x = projection(d.geometry.coordinates)[0]; | |
| // TODO: add cooler math here! | |
| if (x < currentX) { | |
| return x -10; | |
| } else { | |
| return x +10; | |
| } | |
| }) | |
| .attr("cy", function(d) { | |
| var y = projection(d.geometry.coordinates)[1]; | |
| // TODO: add cooler math here! | |
| if (y < currentY) { | |
| return y -10; | |
| } else { | |
| return y +10; | |
| } | |
| }); | |
| d3.select(this) | |
| .attr("cx", function(d) { | |
| return projection(d.geometry.coordinates)[0]; | |
| }) | |
| .attr("cy", function(d) { | |
| return projection(d.geometry.coordinates)[1]; | |
| }) | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this) | |
| .classed("selected",false) | |
| .transition() | |
| .attr("r",5); | |
| svg.selectAll("circle") | |
| //.filter(function(d) { return !d.classed("selected");}) | |
| //.style("fill","gray") | |
| .transition() | |
| .attr("cx", function(d) { | |
| return projection(d.geometry.coordinates)[0]; | |
| }) | |
| .attr("cy", function(d) { | |
| return projection(d.geometry.coordinates)[1]; | |
| }) | |
| }) | |
| }); | |
| }); | |
| </script> |
