Skip to content

Instantly share code, notes, and snippets.

@couchand

couchand/index.html

Forked from njvack/LICENSE
Last active December 22, 2015 01:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save couchand/6399026 to your computer and use it in GitHub Desktop.
Save couchand/6399026 to your computer and use it in GitHub Desktop.
Download ZIP
Voronoi-based point picker (experiment inverting the draw and clip paths)
Raw
index.html
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
</head>
<body>
<div id="chart">
</div>
<script type="text/javascript">
var w = 960,
h = 500;
var vertices = d3.range(100).map(function(d) {
return [Math.random() * w, Math.random() * h];
});
var svg = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
var paths, points, clips;
clips = svg.append("svg:g").attr("id", "point-clips");
points = svg.append("svg:g").attr("id", "points");
paths = svg.append("svg:g").attr("id", "point-paths");
clips.selectAll("clipPath")
.data(d3.geom.voronoi(vertices))
.enter().append("svg:clipPath")
.attr("id", function(d, i) { return "clip-"+i;})
.append("svg:path")
.attr("d", function(d) { return "M" + d.join(",") + "Z"; });
paths.selectAll("circle")
.data(vertices)
.enter().append("svg:circle")
.attr('cx', function(d) { return d[0]; })
.attr('cy', function(d) { return d[1]; })
.attr('r', 20)
.attr("id", function(d,i) {
return "path-"+i; })
.attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; })
.style("fill", d3.rgb(230, 230, 230))
.style('fill-opacity', 0.4)
.style("stroke", d3.rgb(200,200,200));
paths.selectAll("circle")
.on("mouseover", function(d, i) {
d3.select(this)
.style('fill', d3.rgb(31, 120, 180));
svg.select('circle#point-'+i)
.style('fill', d3.rgb(31, 120, 180))
})
.on("mouseout", function(d, i) {
d3.select(this)
.style("fill", d3.rgb(230, 230, 230));
svg.select('circle#point-'+i)
.style('fill', 'black')
});
points.selectAll("circle")
.data(vertices)
.enter().append("svg:circle")
.attr("id", function(d, i) {
return "point-"+i; })
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2)
.attr('stroke', 'none');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment