Old school D3 from simpler times

All examples By author By category About

biovisualize

Full window Github gist

Basic SVG grid

<!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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js