Read more about this in my blog post.
Last active
May 4, 2020 08:36
-
-
Save gka/17ee676dc59aa752b4e6 to your computer and use it in GitHub Desktop.
simple tables in D3
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple tables in D3</title> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script> | |
| <style type="text/css"> | |
| body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;} | |
| th { text-align: left; } | |
| th, td { padding: 0 1em 0.5ex 0;} | |
| th.center, td.center { text-align: center; } | |
| th.num, td.num { text-align: right; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // the table rows, typically loaded from data file using d3.csv | |
| var movies = [ | |
| { title: "The Godfather", year: 1972, length: 175, budget: 6000000, rating: 9.1 }, | |
| { title: "The Shawshank Redemption", year: 1994, length: 142, budget: 25000000, rating: 9.1 }, | |
| { title: "The Lord of the Rings: The Return of the King", year: 2003, length: 251, budget: 94000000, rating: 9 }, | |
| { title: "The Godfather: Part II", year: 1974, length: 200, budget: 13000000, rating: 8.9 }, | |
| { title: "Shichinin no samurai", year: 1954, length: 206, budget: 500000, rating: 8.9 }, | |
| { title: "Buono, il brutto, il cattivo, Il", year: 1966, length: 180, budget: 1200000, rating: 8.8 }, | |
| { title: "Casablanca", year: 1942, length: 102, budget: 950000, rating: 8.8 }, | |
| { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001, length: 208, budget: 93000000, rating: 8.8 }, | |
| { title: "The Lord of the Rings: The Two Towers", year: 2002, length: 223, budget: 94000000, rating: 8.8 }, | |
| { title: "Pulp Fiction", year: 1994, length: 168, budget: 8000000, rating: 8.8 } | |
| ]; | |
| // column definitions | |
| var columns = [ | |
| { head: 'Movie title', cl: 'title', html: ƒ('title') }, | |
| { head: 'Year', cl: 'center', html: ƒ('year') }, | |
| { head: 'Length', cl: 'center', html: ƒ('length', length()) }, | |
| { head: 'Budget', cl: 'num', html: ƒ('budget', d3.format('$,')) }, | |
| { head: 'Rating', cl: 'num', html: ƒ('rating', d3.format('.1f')) } | |
| ]; | |
| // create table | |
| var table = d3.select('body') | |
| .append('table'); | |
| // create table header | |
| table.append('thead').append('tr') | |
| .selectAll('th') | |
| .data(columns).enter() | |
| .append('th') | |
| .attr('class', ƒ('cl')) | |
| .text(ƒ('head')); | |
| // create table body | |
| table.append('tbody') | |
| .selectAll('tr') | |
| .data(movies).enter() | |
| .append('tr') | |
| .selectAll('td') | |
| .data(function(row, i) { | |
| return columns.map(function(c) { | |
| // compute cell values for this specific row | |
| var cell = {}; | |
| d3.keys(c).forEach(function(k) { | |
| cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k]; | |
| }); | |
| return cell; | |
| }); | |
| }).enter() | |
| .append('td') | |
| .html(ƒ('html')) | |
| .attr('class', ƒ('cl')); | |
| function length() { | |
| var fmt = d3.format('02d'); | |
| return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; }; | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Nice example.
I was getting below error.
ƒ is not defined at (index):35
Is ƒ a inbuilt function which I am missing. Can anyone give insight on why I got the error.
Anyway I fixed it by understanding what it has to do and created my own function with name ƒ.
If anyone else facing same problem.. try adding below code @ line 32 to resolve the issue..
ƒ = ((c) => ((d) => d[c]))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
rawgit no longer working, maybe use https://cdn.jsdelivr.net/gh/gka/d3-jetpack@master/d3-jetpack.js instead?