created by http://livecoding.io

options.json

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

water.css

/* css goes here */
.foo {
  border: 1px solid red;
  display: inline-block;
  opacity: 0.5;
}

water.html

<!-- html goes here -->
<div class="foo">lorem ipsum</div>

water.js

/* javascript goes here */
d3.select("body").style("color", "black");
var $foo =d3.selectAll(".foo");
$foo.style('opacity', 1);
$foo.on("click", function() {
  d3.select("body").transition()
      .ease(Math.sqrt).style("color", "red");
  /*
  d3.select(this)
    .transition()
    .style('opacity', 1);
  */
});

water.json

{ }