D3 Examples - Dolores Park Voronoi

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
xxxxxxxxxx
 
<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>
​
    