Skip to content

Instantly share code, notes, and snippets.

@rettal

rettal/D3 States

Last active August 29, 2015 14:15
Show Gist options
  • Save rettal/7aecc2e6f5b8c10f648b to your computer and use it in GitHub Desktop.
Save rettal/7aecc2e6f5b8c10f648b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rettal renamed this gist Feb 19, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.js → D3 States
    View file
    File renamed without changes.
  2. rettal revised this gist Feb 19, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,8 @@ function getRandomInt(min, max) {
    The 3 states basically define the actions that occur when data is added to a selection of elements.
    Say if we were selecting data from a database where we had to perform a search with a query string,
    each time we ran query the number of rows returned could be more, less, or could be the same but contain different data, these in essence are the 3 states. more = enter, less = exit, same = update.
    each time we ran query the number of rows returned could be more, less, or could be the same but
    contain different data, these in essence are the 3 states. more = enter, less = exit, same = update.
    The following function illustrates the 3 states by running a function every 3 seconds
    that changes (randomly) the data "joined" to the elements in the dom.
  3. rettal created this gist Feb 19, 2015.
    38 changes: 38 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
    }
    /*
    Code example explaining the enter, update and exit states in D3.
    The 3 states basically define the actions that occur when data is added to a selection of elements.
    Say if we were selecting data from a database where we had to perform a search with a query string,
    each time we ran query the number of rows returned could be more, less, or could be the same but contain different data, these in essence are the 3 states. more = enter, less = exit, same = update.
    The following function illustrates the 3 states by running a function every 3 seconds
    that changes (randomly) the data "joined" to the elements in the dom.
    The elements in the dom are svg <circle> elements to help illustrate the effect.
    */
    setInterval(function() {

    var cnt = getRandomInt(3, 10), data = [];
    for (var i = 0; i < cnt; i++) {
    data.push({"x": Math.random() * (320 - 10) + 10, "y": Math.random() * (320 - 10) + 10});
    }

    var svg = d3.select("svg");

    var circle = svg.selectAll("circle")
    .data(data);

    circle.exit().remove();

    circle.enter().append("circle")
    .attr("r", 2.5);

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

    }, 3000);