created by http://livecoding.io

README.md

View this code at http://livecoding.io/5162494

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

.node {
  margin: 5px;
  padding: 5px;
  background-color: #AAA;
}

.stats {
  padding: 5px 10px;
  height: 20px;
  color: #eee;
  font-weight: bold;
  background-color: #A22;
}

.logo {
  width: 10px;
  height: 10px;
  background-color: #0f0;
}

water.html

<div class="root"></div>

water.js

function update(data) {

  var node = d3.select('.root')
    .selectAll('.node')
      .data(data, function (d) { return d.i; });

  console.log('node', node);

  var enteringNodes = node.enter()
                    .append("div")
                    .attr("class", "node");
  
  enteringNodes.append("div")
               .attr("class", "stats");
/*
  enteringNodes.append("div")
               .attr("class", "logo");
*/
  
  node.attr('title', function (d) { return d.t; });
  
  /*
  node.select('.logo')
      .transition()
        .duration(1000)
        .attr("width", function(d) { d.r + "px"; });
   */
  node.select('.stats')
      //.data(function (d) { console.log('d', d); return d; })
      .text(function (d) { console.log('html', d.t); return d.t; });
}

var initial = [{i:1, t:'a', r:10}, {i:2, t:'b', r:10}, {i:3, t:'c', r:10}];
var next    = [{i:1, t:'d', r:20}, {i:2, t:'e', r:30}, {i:3, t:'f', r:40}];

update(initial);

window.setTimeout(
  function () { update(next); },
  5000
)