| license: gpl-3.0 |
Simple mouse interaction with d3.js, plus blobby effects forked from nbremer's block: Gooey effect - Rotating circles - Blending colors
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
forked from almccon's block: WWSD #7: d3 mouse interaction
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #fff; | |
| } | |
| 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 defs = svg.append("defs"); | |
| var filter = defs.append("filter").attr("id","gooeyCodeFilter"); | |
| filter.append("feGaussianBlur") | |
| .attr("in","SourceGraphic") | |
| .attr("stdDeviation","10") | |
| //to fix safari: http://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image | |
| .attr("color-interpolation-filters","sRGB") | |
| .attr("result","blur"); | |
| filter.append("feColorMatrix") | |
| .attr("in","blur") | |
| .attr("mode","matrix") | |
| .attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9") | |
| .attr("result","gooey"); | |
| 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); | |
| var svgwrapper = svg.append("g") | |
| .style("filter", "url(#gooeyCodeFilter)"); | |
| var svgunfiltered = svg.append("g"); | |
| var colorscale = d3.scale.category20(); | |
| var colors = ["#ccc", "#ddd", "#aaa"] | |
| svgwrapper.selectAll("path") | |
| .data(countries.features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .style("fill", function(d,i) { | |
| return colors[i%3]; | |
| }) | |
| //.style("filter", "url(#gooeyCodeFilter)"); | |
| // .on("mouseover", function(d) { | |
| // svgunfiltered.selctAll("path") | |
| //}) | |
| svgwrapper.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) { | |
| 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]; | |
| d3.select(this) | |
| .attr("cx", function(d) { | |
| return projection(d.geometry.coordinates)[0]; | |
| }) | |
| }) | |
| .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") | |
| .attr("cx", function(d) { | |
| return projection(d.geometry.coordinates)[0]; | |
| }) | |
| }) | |
| }); | |
| }); | |
| </script> |
