Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active October 29, 2024 19:32

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Oct 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@

    </style>
    <div id="fps">FPS: <span>?</span></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var data = d3.range(500).map(function() {
  3. mbostock revised this gist Jun 11, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@

    </style>
    <div id="fps">FPS: <span>?</span></div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var data = d3.range(500).map(function() {
  4. mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. mbostock revised this gist May 9, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    Compare to [SVG Swarm]().
    Compare to [SVG Swarm](http://bl.ocks.org/2647924).

    A response to Trevor Bedford's post, [Comparing performance of Processing.js and D3.js](http://www.trevorbedford.com/archive/may_07_2012.html).
  6. mbostock created this gist May 9, 2012.
    3 changes: 3 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Compare to [SVG Swarm]().

    A response to Trevor Bedford's post, [Comparing performance of Processing.js and D3.js](http://www.trevorbedford.com/archive/may_07_2012.html).
    65 changes: 65 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Canvas Swarm</title>
    <style>

    canvas {
    position: absolute;
    top: 0;
    }

    </style>
    <div id="fps">FPS: <span>?</span></div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
    <script>

    var data = d3.range(500).map(function() {
    return {xloc: 0, yloc: 0, xvel: 0, yvel: 0};
    });

    var width = 960,
    height = 500,
    angle = 2 * Math.PI;

    var x = d3.scale.linear()
    .domain([-5, 5])
    .range([0, width]);

    var y = d3.scale.linear()
    .domain([-5, 5])
    .range([0, height]);

    var time0 = Date.now(),
    time1;

    var fps = d3.select("#fps span");

    var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

    var context = canvas.node().getContext("2d");
    context.fillStyle = "steelblue";
    context.strokeStyle = "#666";
    context.strokeWidth = 1.5;

    d3.timer(function() {
    context.clearRect(0, 0, width, height);

    data.forEach(function(d) {
    d.xloc += d.xvel;
    d.yloc += d.yvel;
    d.xvel += 0.04 * (Math.random() - .5) - 0.05 * d.xvel - 0.0005 * d.xloc;
    d.yvel += 0.04 * (Math.random() - .5) - 0.05 * d.yvel - 0.0005 * d.yloc;
    context.beginPath();
    context.arc(x(d.xloc), y(d.yloc), Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10), 0, angle);
    context.fill();
    context.stroke();
    });

    time1 = Date.now();
    fps.text(Math.round(1000 / (time1 - time0)));
    time0 = time1;
    });

    </script>