D3 Examples - Basic SVG grid

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <style type='text/css'>
        .cell{
            stroke: silver;
        }
    </style>
</head>
<body>
​
<div id="grid">
​
</div>
​
<script type="text/javascript">
    var gridSize = 400,
            gridCellNum = 30,
            cellSize = ~~(gridSize / gridCellNum);
    var data = d3.range(gridCellNum).map(function(d, i){return d3.range(gridCellNum).map(function(d, i, a){
        return ~~(Math.random()*2);
    });});
​
//    console.log(JSON.stringify(data));
​
    var root = d3.select('#grid').append('svg')
            .attr({width: gridSize, height: gridSize})
            .classed('root', true);
    var rows = root.selectAll('g.row')
            .data(data)
            .enter().append('g')
            .classed('row', true)
            .attr({transform: function(d, i){return 'translate(0,' + cellSize * i + ')';}});
    rows.selectAll('rect.cell')
            .data(function(d, i){return d;})
            .enter().append('rect')
            .classed('cell', true)
            .attr({width: cellSize, height: cellSize, x: function(d, i){return cellSize*i;}})
            .style({fill: function(d, i){return (!!d)? 'white': 'black';}});
​
</script>
​
</body>
</html>
​
​
    