D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
bricedev
Full window
Github gist
Voronoi triggering II
Voronoi triggering for scatter plot inspired by
njvack
<!DOCTYPE html> <meta charset="utf-8"> <style> path { pointer-events: all; stroke: none; fill: none; } path.show { stroke: black; stroke-width: 1px; fill: #8a8a89; opacity: .3; } #form { font: 12px sans-serif; position: absolute; top: 20px; right: 30px; } </style> <label id="form" for="show-voronoi"> Show Voronoi <input type="checkbox" id="show-voronoi" disabled> </label> <body> <script src="https://d3js.org/d3.v3.js"></script> <script> var width = 960, height = 500; var color = d3.scale.ordinal() .range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]); var vertices = d3.range(100).map(function(d) { return [d3.random.normal(width / 2, 80)(), d3.random.normal(height / 2, 80)(), Math.random() * 10+2]; }); vertices.sort(function(a,b) { return b[2] - a[2]; }); var voronoi = d3.geom.voronoi() .clipExtent([[0, 0], [width, height]]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var clips = svg.append("g") .attr("id","clips"); clips.selectAll("clipPath") .data(vertices).enter() .append("clipPath") .attr("id", function(d, i) { return "clip-"+i;}) .append("circle") .attr('cx', function(d) { return d[0]; }) .attr('cy', function(d) { return d[1]; }) .attr("r", function(d) { return d[2] + 20; }); var circles = svg.append("g") .attr("id","points"); circles.selectAll("circle") .data(vertices).enter() .append("circle") .attr("id", function(d,i) { return "point-"+i; }) .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .attr("r", function(d) { return d[2]; }) .style("stroke","black") .style("opacity",1) .style("fill",function(d,i) { return color(i); }); var path = svg.append("g") .attr("id","voronoi"); path.selectAll("path") .data(voronoi(vertices), polygon).enter() .append("path") .attr("id", function(d,i) { return "path-"+i; }) .attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; }) .attr("d", polygon) .on("mouseover", function(d, i) { svg.select('circle#point-'+i).style('stroke-width', "3px"); }) .on("mouseout", function(d, i) { svg.select('circle#point-'+i).style('stroke-width', "1px"); }); d3.select("#show-voronoi") .property("disabled", false) .on("change", function() { path.selectAll("path").classed("show", this.checked); }); function polygon(d) { return "M" + d.join("L") + "Z"; }; </script>
https://d3js.org/d3.v3.js