Opacity toy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
<!-- >use the buttons to toggle the options 
# "grid on top" vs. "shapes on top"
    - toggles the order of shapes & grid in the dom
# "opacity" 
    - toggles the opacity of the red rectangle between .2
      and 1. whether the shape is "on top of" or "underneath"
      the grid, when you recduce the opacity you can see the 
      grid "through" the shape.
# "white rect"
    - puts an opaque white rectangle under the red rectangle 
      (between the rectangle and the grid when the shapes are 
      on top).

CSS

.line{
    stroke-width:3px;
}
.u.line{
    stroke:blue;
}
.o.line{
    stroke:mediumblue;
}
circle{
    fill:green;
}

#red_rect{
    fill:red;
    opacity:1;
    pointer-events:none;
}
#red_rect.opac{
     opacity:.2;   
}
#white_rect{
    fill:white;
    stroke:red;
    stroke-dasharray:10;
    cursor:move;
    pointer-events:all;
}

.buttong rect{
    stroke:mediumblue;
    stroke-width:2px;
    fill:none;
    pointer-events:all;
}
.buttong rect#tbutton{
    fill:skyblue;
}
.buttong rect:hover{
     stroke-width:4px;   
}

.buttong text{
    text-anchor:middle;
    font-family:arial;
    font-size:12px;
    pointer-events:none;
    fill:mediumblue;
}

JavaScript

var grid_data = [0,1,2,3,4,5,6]
var side = 
var step = side/(grid_data.length-1)

var svg = d3.select('body')
    .append('svg')
var g = svg.append('g')
    .attr('height',side)
    .attr('width',side)
    .attr('transform','translate(80,80)')
var under_grid = g.append('g')
var shapes = g.append('g').attr('id','shapes')
var over_grid = g.append('g')

function add_grid(g,g_class){
    g.selectAll('.vert')
    .data(grid_data)
    .enter().append('line')
    .attr('class',g_class+' line vert')
    .attr('x1',function(d){return d*step})
    .attr('y1',0)
    .attr('x2',function(d){return d*step})
    .attr('y2',side)
    g.selectAll('.horiz')
    .data(grid_data)
    .enter().append('line')
    .attr('class',g_class+' line horiz')
    .attr('x1',0)
    .attr('y1',function(d){return d*step})
    .attr('x2',side)
    .attr('y2',function(d){return d*step})
}
function append_rect(sid){
    shapes.append('rect')
        .attr('id',sid)
        .attr('x',side*5/9)
        .attr('y',side*5/9)
        .attr('width',100)
        .attr('height',70)
}

add_grid(under_grid,'u')
shapes.append('circle')
    .attr('cx',side/3)
    .attr('cy',side/3)
    .attr('r',40)
append_rect('red_rect')
add_grid(over_grid,'o')

var bw = (side-10*2)/3;
var bh = 35
function add_button(bx,btext,bid){
    var button = svg.append('svg')
        .attr('class','buttong')
        .attr('x',bx)
        .attr('y',20)    
        .attr('width',bw)
        .attr('height',bh)
    button.append('rect')
        .attr('id',bid)
        .attr('width','100%')
        .attr('height','100%')
    button.append('text')
        .text(btext)
        .attr('class',bid)
        .attr('y',bh/2)
        .attr('x',bw/2)
        .attr('dy','.3em');
}
add_button(80,'grid on top','tbutton')
add_button(80+bw+10,'toggle opacity','obutton')
add_button(80+bw+bw+20,'add white rect','wbutton')

var toggle_grid = function(){
    o = $('.o')
    b = $('#tbutton')
    if(o.attr('display')=='none'){
        o.attr('display','null')
  ...