| license: gpl-3.0 |
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
| x | y | |
|---|---|---|
| 2 | 503 | |
| 6 | 102 | |
| 21 | 369 | |
| 23 | 562 | |
| 36 | 192 | |
| 44 | 444 | |
| 69 | 24 | |
| 99 | 526 | |
| 99 | 426 | |
| 117 | 384 | |
| 119 | 292 | |
| 128 | 160 | |
| 143 | 480 | |
| 166 | 531 | |
| 168 | 408 | |
| 185 | 710 | |
| 186 | 489 | |
| 197 | 659 | |
| 203 | 378 | |
| 221 | 321 | |
| 236 | 491 | |
| 243 | 221 | |
| 255 | 415 | |
| 256 | 672 | |
| 265 | 0 | |
| 265 | 118 | |
| 272 | 591 | |
| 295 | 291 | |
| 306 | 477 | |
| 312 | 576 | |
| 325 | 366 | |
| 337 | 720 | |
| 353 | 658 | |
| 356 | 162 | |
| 365 | 0 | |
| 375 | 429 | |
| 377 | 591 | |
| 380 | 270 | |
| 405 | 644 | |
| 424 | 369 | |
| 430 | 165 | |
| 440 | 471 | |
| 458 | 269 | |
| 465 | 687 | |
| 466 | 100 | |
| 477 | 597 | |
| 490 | 433 | |
| 495 | 551 | |
| 497 | 631 | |
| 521 | 693 | |
| 528 | 210 | |
| 530 | 326 | |
| 553 | 563 | |
| 557 | 701 | |
| 563 | 615 | |
| 566 | 369 | |
| 571 | 662 | |
| 604 | 121 | |
| 610 | 534 | |
| 616 | 328 | |
| 620 | 671 | |
| 629 | 282 | |
| 638 | 614 | |
| 653 | 717 | |
| 676 | 538 | |
| 680 | 149 | |
| 685 | 697 | |
| 694 | 660 | |
| 694 | 594 | |
| 696 | 275 | |
| 709 | 172 | |
| 720 | 631 | |
| 725 | 17 | |
| 732 | 438 | |
| 745 | 565 | |
| 746 | 725 | |
| 751 | 688 | |
| 752 | 635 | |
| 760 | 187 | |
| 797 | 513 | |
| 804 | 717 | |
| 807 | 626 | |
| 814 | 2 | |
| 848 | 682 | |
| 849 | 471 | |
| 864 | 368 | |
| 880 | 655 | |
| 883 | 599 | |
| 890 | 732 | |
| 892 | 703 | |
| 893 | 509 | |
| 921 | 669 | |
| 923 | 445 | |
| 933 | 717 | |
| 958 | 617 | |
| 963 | 359 | |
| 973 | 414 | |
| 981 | 491 | |
| 982 | 678 |
| <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> |
