D3 Examples - JS Bin // source http://jsbin.com/qacowomako

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style type='text/css'>
​
  </style>
</head>
<body>
​
<script id="jsbin-javascript">
var svg = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height",800);
​
var scale= d3.scale.ordinal()
             .rangeBands([0,800])
             .domain(d3.range(0,40));
​
​
var data = [];
​
for(i=0; i<40; i++){
  for(j=0; j<40; j++){
    data.push({x:i,y:j,on:'red'});
  }
}
​
var rects = svg.selectAll("rect").data(data);
​
function onClick(rect){
  if(rect.on == 'red'){
    rect.on = 'green';
  }
  else{
    rect.on = 'red';
  }
  console.log(rect);
  return rect;
}
​
​
rects.enter()
     .append("rect")
     .attr({
        x: function(d){return scale(d.x);},
        y: function(d){return scale(d.y);},
        fill: function(d){return d.on;},
        width: 20,
        height: 20,
        stroke: "white"
       })
     .style("border","1px")
     .on("mouseover",function(){d3.select(this).style('fill','green');});
</script>
​
​
​
<script id="jsbin-source-javascript" type="text/javascript">var svg = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height",800);
​
var scale= d3.scale.ordinal()
             .rangeBands([0,800])
             .domain(d3.range(0,40));
​
​
var data = [];
​
for(i=0; i<40; i++){
  for(j=0; j<40; j++){
    data.push({x:i,y:j,on:'red'});
  }
}
​
var rects = svg.selectAll("rect").data(data);
​
function onClick(rect){
  if(rect.on == 'red'){
    rect.on = 'green';
  }
  else{
    rect.on = 'red';
  }
  console.log(rect);
  return rect;
}
​
​
rects.enter()
     .append("rect")
     .attr({
        x: function(d){return scale(d.x);},
        y: function(d){return scale(d.y);},
        fill: function(d){return d.on;},
        width: 20,
        height: 20,
        stroke: "white"
       })
     .style("border","1px")
     .on("mouseover",function(){d3.select(this).style('fill','green');});
​
​
​
​
</script></body>
</html>
    