Dolores Park Voronoi

Inspired by Rod Bogart's Voronoi Diagram of people in Bryant Park. People walking about (long shadows) are not included in the Voronoi because they are obviously still looking for a good place to chill.

Background image from this article by Lamar Anderson for Curbed San Francisco

Forked from HarryStevens's block: Voronoi Diagram for Scatter Plot

<html>
	<head>
		<style>
			body {
			  margin: 0 auto;
			  display: table;
        background-image: url("https://cdn.vox-cdn.com/thumbor/dyBhZOlU6RCAEaarFqxuD9IINW4=/2400x0/filters:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/4519081/DoloresOpeningAerial_PChang-0021820.0.jpg");
        background-repeat:no-repeat;
			}
			.voronoi path {
			  fill: #ff65bc;
        fill-opacity: 0;
			  stroke: blueviolet;
			  stroke-width: 2px;
			}
      
      .point{
        fill-opacity: 0;
      }
      
		</style>

</head>
	<body>
        
		<div class="chart"></div>
    
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script>
			var margin = {top: 0, right: 0, bottom: 0, left: 0},
				width = 1000 - margin.left - margin.right,
				height = 750 - 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,1000]);

var y = d3.scaleLinear()
					.range([750,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>

https://d3js.org/d3.v4.min.js