Skip to content

Instantly share code, notes, and snippets.

@shawnbot

shawnbot/README.md

Created December 20, 2013 19:04
Download ZIP

Revisions

  1. shawnbot created this gist Dec 20, 2013.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    The Voronoi tesselation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction! Colors by [Cynthia Brewer](http://colorbrewer.org/); algorithm by [Steven Fortune](http://ect.bell-labs.com/who/sjf/); implementation based on work by [Nicolas Garcia Belmonte](http://blog.thejit.org/2010/02/12/voronoi-tessellation/); interaction inspired by [Raymond Hill](http://www.raymondhill.net/blog/?p=9).

    This example shows what voronoi tesselations look like drawn with various [d3 line interpolators](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate).
    113 changes: 113 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,113 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>

    body {
    overflow: hidden;
    }

    path {
    fill-opacity: .8;
    stroke: #000;
    }

    path:first-child {
    fill: yellow !important;
    }

    circle {
    fill: #fff;
    stroke: #000;
    pointer-events: none;
    }

    .PiYG .q0-9{fill:rgb(197,27,125)}
    .PiYG .q1-9{fill:rgb(222,119,174)}
    .PiYG .q2-9{fill:rgb(241,182,218)}
    .PiYG .q3-9{fill:rgb(253,224,239)}
    .PiYG .q4-9{fill:rgb(247,247,247)}
    .PiYG .q5-9{fill:rgb(230,245,208)}
    .PiYG .q6-9{fill:rgb(184,225,134)}
    .PiYG .q7-9{fill:rgb(127,188,65)}
    .PiYG .q8-9{fill:rgb(77,146,33)}

    </style>
    </head>
    <body>
    <select id="interpolate">
    <option>basis-closed</option>
    <option>linear</option>
    <option>basis</option>
    <option>cardinal-closed</option>
    <option>cardinal</option>
    <option>monotone</option>
    <option>step</option>
    <option>step-before</option>
    <option>step-after</option>
    </select>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
    height = 480;

    var vertices = d3.range(100).map(function(d) {
    return [Math.random() * width, Math.random() * height];
    });

    var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "PiYG")
    .on("mousemove", function() {
    vertices[0] = d3.mouse(this);
    redraw();
    })
    .on("touchstart", touch)
    .on("touchmove", touch);

    var path = svg.append("g").selectAll("path");

    var line = d3.svg.line();

    var select = d3.select("#interpolate")
    .on("change", function() {
    line.interpolate(this.value);
    redraw();
    })
    line.interpolate(select.property("value"));

    svg.selectAll("circle")
    .data(vertices.slice(1))
    .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2);

    redraw();

    function touch() {
    vertices[0] = d3.touches(this)[0];
    redraw();
    }

    function redraw() {
    path = path.data(voronoi(vertices), String);

    path.exit().remove();
    path.enter().append("path")
    .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; });
    path.attr("d", function(d) {
    return line(d) + "Z";
    });

    path.order();
    }

    </script>
    </body>
    </html>