Skip to content

Instantly share code, notes, and snippets.

@jonathanmoore

jonathanmoore/README.mkd

Forked from christophermanning/README.md
Created November 8, 2012 07:55
Download ZIP

Revisions

  1. jonathanmoore revised this gist Nov 8, 2012. 2 changed files with 3 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -15,4 +15,4 @@ References
    * [https://github.com/mbostock/d3/wiki/Force-Layout](https://github.com/mbostock/d3/wiki/Force-Layout)
    * [http://en.wikipedia.org/wiki/Delaunay_triangulation](http://en.wikipedia.org/wiki/Delaunay_triangulation)

    [Run this gist at bl.ocks.org](http://bl.ocks.org/1734663)
    [Run this gist at bl.ocks.org](http://bl.ocks.org/4037449)
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,8 @@
    <div id="chart">
    </div>
    <script type="text/javascript">
    var w = 960,
    h = 500,
    var w = 1200,
    h = 400,
    links = [],
    voronoiVertices = [],
    color = d3.scale.quantize().domain([7000, 10000]).range(d3.range(2, 9));
  2. @christophermanning christophermanning revised this gist Jul 8, 2012. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,7 @@
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
    <link rel="stylesheet" href="http://mbostock.github.com/d3/ex/colorbrewer.css">
    <style type="text/css">
    circle {
  3. @christophermanning christophermanning revised this gist Feb 10, 2012. 2 changed files with 36 additions and 28 deletions.
    4 changes: 2 additions & 2 deletions README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -6,8 +6,8 @@ Nodes are linked to nodes in neighboring cells. The cell's color is a function o

    Controls
    -------
    * Drag the nodes to interact with the diagram
    * Use the mousewheel to adjust the charge on the nodes (zoom in/out)
    * Drag the nodes to interact with the diagram.
    * Use the mousewheel to add/remove nodes.

    References
    ----------
    60 changes: 34 additions & 26 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,11 +30,18 @@
    voronoiVertices = [],
    color = d3.scale.quantize().domain([7000, 10000]).range(d3.range(2, 9));

    var vertices = d3.range(100).map(function(d) { return {x: d.x, y: d.y}; })

    var zoomChargeScale = d3.scale.quantize().domain([0, 100]).range(d3.range(-10000, 1).reverse())
    var zoom = d3.behavior.zoom()
    .on("zoom", function(d,i) { force.charge(zoomChargeScale(d3.event.scale)).start() });
    var numVertices = 100;
    var vertices = d3.range(numVertices).map(function(d) { return {x: d.x, y: d.y}; })
    var prevEventScale = 1;
    var zoom = d3.behavior.zoom().on("zoom", function(d,i) {
    if (d3.event.scale > prevEventScale) {
    vertices.push(function(d) { return {x: d.x, y: d.y}; })
    } else if (vertices.length > 2) {
    vertices.pop();
    }
    force.nodes(vertices).start()
    prevEventScale = d3.event.scale;
    });

    var svg = d3.select("#chart")
    .append("svg")
    @@ -50,31 +57,31 @@

    force.nodes(vertices).start();

    svg.selectAll("path")
    .data(d3.geom.voronoi(vertices.map(function(o){return [o.x, o.y]})))
    .enter().append("path")
    .attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })

    svg.selectAll("circle")
    .data(vertices)
    .enter().append("circle")
    .call(force.drag)
    .attr("r", 5)

    var link = svg.selectAll("line")
    var circle = svg.selectAll("circle");
    var path = svg.selectAll("path");
    var link = svg.selectAll("line");

    function update(e) {
    voronoiVertices = vertices.map(function(o){return [o.x, o.y, o]})

    svg.selectAll("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    path = path.data(d3.geom.voronoi(voronoiVertices))
    path.enter().insert("path", "path") //group all the path elements first so they have the lowest z-order
    .attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
    path.attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
    path.exit().remove();

    svg.selectAll("path")
    .data(d3.geom.voronoi(voronoiVertices))
    .attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
    circle = circle.data(vertices)
    circle.enter().append("circle")
    .call(force.drag)
    .attr("r", 0)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .transition().duration(1000).attr("r", 5);
    circle.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
    circle.exit().transition().attr("r", 0).remove();

    links = []
    d3.geom.delaunay(voronoiVertices).forEach(function(d) {
    @@ -89,6 +96,7 @@
    .attr("y1", function(d) { return d.source[2].y; })
    .attr("x2", function(d) { return d.target[2].x; })
    .attr("y2", function(d) { return d.target[2].y; })

    link.exit().remove()
    }

    @@ -100,4 +108,4 @@
    }
    </script>
    </body>
    </html>
    </html>
  4. @christophermanning christophermanning revised this gist Feb 6, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,10 @@
    Created by [Christopher Manning](http://www.christophermanning.org/)

    Summary
    -------
    Nodes are linked to nodes in neighboring cells. The cell's color is a function of its area.

    Controls
    -------
    * Drag the nodes to interact with the diagram
    * Use the mousewheel to adjust the charge on the nodes (zoom in/out)
  5. @christophermanning christophermanning revised this gist Feb 6, 2012. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,10 @@
    Created by [Christopher Manning](http://www.christophermanning.org/)

    Summary
    -------
    * Drag the nodes to interact with the diagram
    * Use the mousewheel to adjust the charge on the nodes (zoom in/out)

    References
    ----------
    * [http://en.wikipedia.org/wiki/Voronoi_diagram](http://en.wikipedia.org/wiki/Voronoi_diagram)
  6. @christophermanning christophermanning revised this gist Feb 6, 2012. 1 changed file with 19 additions and 21 deletions.
    40 changes: 19 additions & 21 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,21 +3,19 @@
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
    <link rel="stylesheet" href="http://mbostock.github.com/d3/ex/colorbrewer.css">
    <style type="text/css">
    circle {
    stroke: black;
    stroke-opacity: .5;
    fill: white;
    stroke: #EFEDF5;
    fill: #EFEDF5;
    }
    line {
    stroke: #999;
    stroke: #EFEDF5;
    pointer-events: none
    }
    path{
    fill:white;
    stroke: black
    }
    </style>
    @@ -29,22 +27,24 @@
    var w = 960,
    h = 500,
    links = [],
    voronoiVertices = [];
    voronoiVertices = [],
    color = d3.scale.quantize().domain([7000, 10000]).range(d3.range(2, 9));

    var vertices = d3.range(100).map(function(d) {
    lx = Math.random() * w
    ly = Math.random() * h
    return {x: lx, y: ly, index: parseInt(lx + ly)};
    })
    var vertices = d3.range(100).map(function(d) { return {x: d.x, y: d.y}; })

    var zoomChargeScale = d3.scale.quantize().domain([0, 100]).range(d3.range(-10000, 1).reverse())
    var zoom = d3.behavior.zoom()
    .on("zoom", function(d,i) { force.charge(zoomChargeScale(d3.event.scale)).start() });

    var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "Purples")
    .call(zoom)

    var force = self.force = d3.layout.force()
    .gravity(.01)
    .charge(-300)
    .size([w, h])
    .on("tick", update);

    @@ -53,15 +53,14 @@
    svg.selectAll("path")
    .data(d3.geom.voronoi(vertices.map(function(o){return [o.x, o.y]})))
    .enter().append("path")
    .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

    .attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })

    svg.selectAll("circle")
    .data(vertices)
    .enter().append("circle")
    .call(force.drag)
    .attr("r", 10);
    .attr("r", 5)

    var link = svg.selectAll("line")

    @@ -74,9 +73,8 @@

    svg.selectAll("path")
    .data(d3.geom.voronoi(voronoiVertices))
    .map(function(d) { return "M" + d.join("L") + "Z"; })
    .filter(function(d) { return this.getAttribute("d") != d; })
    .attr("d", function(d) { return d; });
    .attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; })

    links = []
    d3.geom.delaunay(voronoiVertices).forEach(function(d) {
    @@ -102,4 +100,4 @@
    }
    </script>
    </body>
    </html>
    </html>
  7. @christophermanning christophermanning revised this gist Feb 4, 2012. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@ Created by [Christopher Manning](http://www.christophermanning.org/)

    References
    ----------
    * http://en.wikipedia.org/wiki/Voronoi_diagram
    * https://github.com/mbostock/d3/wiki/Force-Layout
    * http://en.wikipedia.org/wiki/Delaunay_triangulation
    * [http://en.wikipedia.org/wiki/Voronoi_diagram](http://en.wikipedia.org/wiki/Voronoi_diagram)
    * [https://github.com/mbostock/d3/wiki/Force-Layout](https://github.com/mbostock/d3/wiki/Force-Layout)
    * [http://en.wikipedia.org/wiki/Delaunay_triangulation](http://en.wikipedia.org/wiki/Delaunay_triangulation)

    [Run this gist at bl.ocks.org](http://bl.ocks.org/1734663)
  8. @christophermanning christophermanning revised this gist Feb 4, 2012. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,9 @@
    Created by [Christopher Manning](http://www.christophermanning.org/)

    References
    ----------
    * http://en.wikipedia.org/wiki/Voronoi_diagram
    * https://github.com/mbostock/d3/wiki/Force-Layout
    * http://en.wikipedia.org/wiki/Delaunay_triangulation

    [Run this gist at bl.ocks.org](http://bl.ocks.org/1734663)
  9. @christophermanning christophermanning revised this gist Feb 4, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    Created by [Christopher Manning](http://www.christophermanning.org/)

    [Run this gist at bl.ocks.org](http://bl.ocks.org/)
    [Run this gist at bl.ocks.org](http://bl.ocks.org/1734663)
  10. @christophermanning christophermanning created this gist Feb 4, 2012.
    3 changes: 3 additions & 0 deletions README.mkd
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Created by [Christopher Manning](http://www.christophermanning.org/)

    [Run this gist at bl.ocks.org](http://bl.ocks.org/)
    105 changes: 105 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.min.js"></script>
    <link rel="stylesheet" href="http://mbostock.github.com/d3/ex/colorbrewer.css">
    <style type="text/css">
    circle {
    stroke: black;
    stroke-opacity: .5;
    fill: white;
    }
    line {
    stroke: #999;
    pointer-events: none
    }
    path{
    fill:white;
    stroke: black
    }
    </style>
    </head>
    <body>
    <div id="chart">
    </div>
    <script type="text/javascript">
    var w = 960,
    h = 500,
    links = [],
    voronoiVertices = [];

    var vertices = d3.range(100).map(function(d) {
    lx = Math.random() * w
    ly = Math.random() * h
    return {x: lx, y: ly, index: parseInt(lx + ly)};
    })

    var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "Purples")

    var force = self.force = d3.layout.force()
    .gravity(.01)
    .size([w, h])
    .on("tick", update);

    force.nodes(vertices).start();

    svg.selectAll("path")
    .data(d3.geom.voronoi(vertices.map(function(o){return [o.x, o.y]})))
    .enter().append("path")
    .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });


    svg.selectAll("circle")
    .data(vertices)
    .enter().append("circle")
    .call(force.drag)
    .attr("r", 10);

    var link = svg.selectAll("line")

    function update(e) {
    voronoiVertices = vertices.map(function(o){return [o.x, o.y, o]})

    svg.selectAll("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

    svg.selectAll("path")
    .data(d3.geom.voronoi(voronoiVertices))
    .map(function(d) { return "M" + d.join("L") + "Z"; })
    .filter(function(d) { return this.getAttribute("d") != d; })
    .attr("d", function(d) { return d; });

    links = []
    d3.geom.delaunay(voronoiVertices).forEach(function(d) {
    links.push(edge(d[0], d[1]));
    links.push(edge(d[1], d[2]));
    links.push(edge(d[2], d[0]));
    });

    link = link.data(links)
    link.enter().append("line")
    link.attr("x1", function(d) { return d.source[2].x; })
    .attr("y1", function(d) { return d.source[2].y; })
    .attr("x2", function(d) { return d.target[2].x; })
    .attr("y2", function(d) { return d.target[2].y; })
    link.exit().remove()
    }

    function edge(a, b) {
    return {
    source: a,
    target: b
    };
    }
    </script>
    </body>
    </html>