created by http://livecoding.io

README.md

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

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "sketchpad mode"
}

water.css

svg {
  position: absolute;
}

water.html

<svg></svg>

water.js

// from http://mbostock.github.com/d3/ex/chord.html
// from http://mbostock.github.com/d3/ex/chord.html

var svgcanvas = d3.select('svg');

var group1 = svgcanvas.append("svg:g")
                    .attr("stroke", "white")
                    .attr("stroke-width", 0)
                    .attr("fill", "#CDC869");

var frame1 = group1.append("svg:rect")
        .attr("x", 25)
        .attr("y", 25)
        .attr("width", 160)
        .attr("height", 100)
        .attr('class', 'frame');


var icon1 = group1.append('svg:rect')
        .attr('x', 35)
        .attr('y', 35)
        .attr('width', 40)
        .attr('height', 40)
        .attr('stroke-width', 0)
        .attr('class', 'icon');

var tab1 = group1.append('svg:rect')
    .attr('x', 25)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab2 = group1.append('svg:rect')
    .attr('x', 65)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab3 = group1.append('svg:rect')
    .attr('x', 105)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab3 = group1.append('svg:rect')
    .attr('x', 105)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab4 = group1.append('svg:rect')
    .attr('x', 145)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');




var group2 = svgcanvas.append("svg:g")
                    .attr("stroke", "white")
                    .attr("stroke-width", 0)
                    .attr("fill", "#CDC869");

var frame2 = group2.append("svg:rect")
        .attr("x", 225)
        .attr("y", 25)
        .attr("width", 160)
        .attr("height", 100)
        .attr('class', 'frame');

var icon2 = group2.append('svg:rect')
        .attr('x', 235)
        .attr('y', 35)
        .attr('width', 40)
        .attr('height', 40)
        .attr('stroke-width', 0)
        .attr('class', 'icon');

var tab1 = group1.append('svg:rect')
    .attr('x', 225)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab2 = group1.append('svg:rect')
    .attr('x', 265)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab3 = group1.append('svg:rect')
    .attr('x', 305)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab3 = group1.append('svg:rect')
    .attr('x', 305)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');

var tab4 = group1.append('svg:rect')
    .attr('x', 345)
    .attr('y', 125)
    .attr('width', 40)
    .attr('height', 40)
    .attr('stroke-width', 1)
    .attr('class', 'tab');


$('.icon').css('fill', 'blue');
$('.frame').css('fill-opacity', 0.40);
$('.tab').css('fill', 'red');