Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active October 31, 2016 16:49
Show Gist options
  • Save HarryStevens/54598dac6a269357f649b93d249f8292 to your computer and use it in GitHub Desktop.
Save HarryStevens/54598dac6a269357f649b93d249f8292 to your computer and use it in GitHub Desktop.
Download ZIP
Voronoi Diagram for Scatter Plot
Raw
.block
license: gpl-3.0
Raw
README.md

Want to add a mouseover effect to dots on a scatter plot in d3.js? Create a voronoi diagram to increase the mouseover space around each point.

For more information, watch this talk.

Raw
data.csv
name x y
Noah 11.27003571 88.77343766
Liam 19.73385696 79.04811495
Ethan 3.761929642 85.68535388
Lucas 5.421437532 82.80845477
Mason 2.549084585 79.97105809
Oliver 33.36555772 58.44080684
Aiden 1.594728697 92.31637968
Elijah 5.028269931 84.06370038
Benjamin 29.62285349 70.40983908
James 4.300790399 65.71298073
Logan 1.018589568 92.72992499
Jacob 6.189890001 62.0497844
Jackson 2.500819713 91.00477379
Michael 4.354894457 76.83763512
Carter 14.050125 63.6362308
William 1.988261951 84.52044745
Daniel 11.94771355 55.17891294
Alexander 7.257912644 76.05499515
Luke 8.287677281 77.36675344
Owen 1.536290248 88.48360983
Jack 3.226684682 96.3338812
Gabriel 1.709155851 88.068512
Matthew 6.537126369 90.79426085
Henry 1.959780252 92.16606293
Sebastian 4.613524263 84.75412344
Wyatt 2.546143547 84.67401936
Grayson 2.203033882 86.39972227
Isaac 2.802066804 85.69300716
Ryan 8.737254378 84.5829933
Nathan 9.391822654 75.38122126
Jayden 1.629713601 89.32460249
Jaxon 2.067608467 79.76530605
Caleb 2.071654475 90.27542871
David 3.169471649 91.46316395
Levi 14.12227801 66.81414111
Eli 3.151841812 85.71375168
Julian 9.458633815 89.29621373
Andrew 3.727868003 89.33320868
Dylan 1.691066983 88.59192863
Hunter 2.151502825 91.26024528
Emma 8.994238858 83.04809322
Olivia 3.173394263 89.79970872
Ava 9.931748154 82.77564203
Sophia 9.257203392 84.31899348
Isabella 2.125536698 85.79547586
Mia 5.751086254 82.15530514
Charlotte 4.476227873 76.55001202
Harper 2.86511372 95.26945167
Amelia 6.165794958 77.07868992
Abigail 1.527170789 81.8296847
Emily 3.310661013 93.05720137
Madison 19.26649252 93.47722192
Lily 4.397012544 90.71884874
Ella 1.903926077 80.23402878
Avery 24.53763972 63.39872735
Evelyn 2.362863791 91.81263692
Sofia 19.99035985 48.32296873
Aria 28.36302159 57.69543829
Riley 21.56565684 71.3442642
Chloe 4.674148004 85.11159217
Scarlett 4.659473604 91.32189682
Ellie 8.262626513 45.97488076
Elizabeth 19.2708132 56.74192862
Aubrey 40.18594637 66.66316631
Grace 4.605922517 75.82782712
Layla 2.787963348 86.69875359
Addison 3.359345533 80.24495283
Zoey 21.67122862 57.09057474
Hannah 9.039155653 68.79092791
Mila 1.836441804 69.9295158
Victoria 1.784124503 79.29206832
Brooklyn 1.34223936 93.35376759
Zoe 2.534419191 82.7585241
Penelope 7.46372613 87.89232417
Lucy 2.937304061 84.5204076
Raw
index.html
<html>
<head>
<style>
body {
margin: 0 auto;
display: table;
}
.voronoi path {
fill: #fff;
stroke: #000;
stroke-width: 1px;
}
</style>
</head>
<body>
<div class="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 5, right: 5, bottom: 20, left: 20},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var svg = d3.select(".chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.range([0,width]);
var y = d3.scaleLinear()
.range([height,0]);
var xAxis = d3.axisBottom()
.scale(x);
var yAxis = d3.axisLeft()
.scale(y);
var voronoi = d3.voronoi()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
.extent([[0, 0], [width, height]]);
var voronoiGroup = svg.append("g")
.attr("class", "voronoi");
d3.csv("data.csv", types, function(error, data){
x.domain(d3.extent(data, function(d){ return d.x; }));
y.domain(d3.extent(data, function(d){ return d.y; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".point")
.data(data)
.enter().append("circle")
.attr("class", "point")
.attr("r", 3)
.attr("cx", function(d){ return x(d.x); })
.attr("cy", function(d){ return y(d.y); });
voronoiGroup.selectAll("path")
.data(voronoi(data).polygons())
.enter().append("path")
.attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
})
function types(d){
d.x = +d.x;
d.y = +d.y;
return d;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment