Skip to content

Instantly share code, notes, and snippets.

@dpopowich

dpopowich/README.md

Last active Aug 29, 2015
Embed
What would you like to do?
Not Just SVG

This sample application is a live-demo component of a blog post I wrote for Art & Logic, Inc..

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Not Just SVG</title>
<style type="text/css">
table {
width: 50%;
margin: 0 auto;
}
td {
font-size: xx-large;
text-align: center;
}
</style>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
(function(){
/* create a table from raw data */
"use strict";
// our data, a 3x10 matrix
var matrix = [d3.range(1,11),
d3.range(11, 21),
d3.range(21,31)];
// append a table to the body
var table = d3.select('body')
.append('table');
// select all tr's (there are none)
table.selectAll('tr')
.data(matrix) // bind the whole matrix, creating an update selection
.enter() // the enter selection, three, one for each row
.append('tr') // create a tr
.selectAll('td') // select all td's (there are none)
// bind each row's data, creating an update selection
.data(function(d, i) {console.log('row ' + i + ':', d);return d;})
.enter() // the enter selection for a cell, ten, one for each cell
.append('td') // append the cell
.text(function(d) {return d;}); // set the text to the cell value
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment