D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
denisemauldin
Full window
Github gist
d3 v4 topojson clickable map
<!DOCTYPE html> <style> .counties :hover { fill: red; } .county-borders { fill: none; stroke: #fff; stroke-width: 0.5px; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/topojson.v2.min.js"></script> <script> var svg = d3.select("svg"); var path = d3.geoPath(); d3.json("https://d3js.org/us-10m.v1.json", function(error, us) { if (error) throw error; svg.append("g") .attr("class", "counties") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .enter().append("path") .attr("d", path); // the following block is new, adding JS events let hoverEnabled = false; svg.on('mousedown', x => hoverEnabled = true) .on('mouseup', x => hoverEnabled = false) svg.selectAll('.counties path').on('mouseover', function() { if (hoverEnabled) { this.classList.add('hovered'); } }); svg.append("path") .attr("class", "county-borders") .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; }))); }); </script>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js