created by http://livecoding.io

README.md

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

options.json

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

water.css

null

water.html

<div style="position:absolute;left:10px;font-size:18px;">
  <!--<input type="checkbox"  checked="checked" id="voronoi"> 
  -->
  <input type="checkbox" id="chcolor"> 
  <label for="chcolor">Change color</label>
  <input type="checkbox" id="chsize"> 
  <label for="chsize">Change size</label>
  
</div>
<svg></svg>

water.js

var svg = d3.select('svg');
   
svg
  .append('circle')
  .classed('mycircle',1)
  .attr('cx',100)
  .attr('cy', 100)
  .attr('r', 18)
  .style('fill', 'orange');

/*svg
  .select('.mycircle')
  .style('fill', 'blue');*/

//d3.select("input[type=checkbox], #chcolor")
d3.select("#chcolor")
  //.select("#voronoi")
  .on("change", function() {
  console.log(this.checked + this.id);
  if (this.checked){
    svg
    .select('.mycircle')
    .style('fill', 'blue');
    } 
  else {
    svg
    .select('.mycircle')
    .style('fill', 'orange');
    }
  });  

d3.select("#chsize")
  //.select("#voronoi")
  .on("change", function() {
  console.log(this.checked + this.id);
  if (this.checked){
    svg
    .selectAll('.mycircle')
    .attr('r', '10');
    } 
  else {
    svg
    .selectAll('.mycircle')
    .attr('r', '25');
    }
  });  

water.json

null