Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/index.html

Created May 1, 2013 03:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save biovisualize/5493614 to your computer and use it in GitHub Desktop.
Save biovisualize/5493614 to your computer and use it in GitHub Desktop.
Download ZIP
Basic SVG grid
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="http://mbostock.github.com/d3/d3.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment