This sample application is a live-demo component of a blog post I wrote for Art & Logic, Inc..
Last active
August 29, 2015 14:22
-
-
Save dpopowich/dd87b3a05c29885b341e to your computer and use it in GitHub Desktop.
Not Just SVG
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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