voronoi

by nancynancy

HTML

<pre id="data">
step,guy,x,y,speed
1,A,1.0,1.0,0
2,A,2.0,2.0,1000
3,A,4.0,1.0,2000
4,A,7.0,2.0,3000
1,B,1.0,4.0,0
2,B,2.1,3.0,4000
3,B,3.4,3.0,5000
4,B,5.0,4.0,4000
</pre>

CSS

path {
    fill: none;
    stroke: black;
    stroke-width: 2px;
  }
  
circle {
    stroke: #fff;
    stroke-width: 1px;
  }
pre {
  display:none;
  }

voronoi path {
  fill: yellow;
  pointer-events: all;
}

JavaScript

var margin = { top: 40, bottom: 40, left: 40, right: 40 };
var width = 300;
var height = 300;
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var colors = ["red", "blue", "green", "orange"];
var data = d3.csvParse(d3.select("pre#data").text());

var svg = d3.selectAll("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + margin.right + "," + margin.top + ")")
    
var panel = svg.append("g")
				.attr("class", "voronoi");


var voronoi = d3.voronoi()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
.extent([[0, 0], [width, height]]);
    
data.forEach(function (d) {
  d.guy = d.guy;
  d.step = +d.step;
  d.x = +d.x;
  d.y = +d.y;
  d.speed = +d.speed;
});

x.domain([d3.min(data, function (d) { return d.x }) - 1,
          d3.max(data, function (d) { return d.x }) + 1]);
y.domain([d3.min(data, function (d) { return d.y }) - 1,
          d3.max(data, function (d) { return d.y }) + 1]);

panel.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("cx", function (d) { return x(d.x); })
  .attr("cy", function (d) { return y(d.y); })
  .attr("r", 6)
  .style("fill", "purple")

panel.selectAll("path")
	.data(voronoi(data).polygons())
	.enter().append("path")
	.attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })    
    

panel.on("mouseenter", function(d){
	console.log("IN")
})

panel.on("mouseleave", function(d){
	console.log("out")
})