Updating a table with a reusable chart, inspired by this syntagmatic's block example and corrected thanks to stackoverflow
If we give by command line
/// choosing specific filters on columns and lines
tab
.columns(["#ay","U","B","V"])
.lines("#ay", 6.86);
/// updating the table
d3.select("body").call(tab);then the table is updated.
| <!doctype html> | |
| <title>reusable table</title> | |
| <style> | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script> | |
| d3.table = function(config) { | |
| var columns = []; | |
| var what = ""; | |
| var lines = ""; | |
| var tbl = function(selection) { | |
| /// default parameters | |
| if (columns.length == 0) columns = d3.keys(selection.data()[0][0]); | |
| if (lines.what == 0) lines = ""; | |
| if (lines.length == 0) lines = ""; | |
| /// creating the table | |
| selection.selectAll('table').data([0]).enter().append('table'); | |
| var table = selection.select('table'); | |
| table.selectAll('thead').data([0]).enter().append('thead'); | |
| var thead = table.select('thead'); | |
| table.selectAll('tbody').data([0]).enter().append('tbody'); | |
| var tbody = table.select('tbody'); | |
| /// appending the header row | |
| var th = thead.selectAll("th") | |
| .data(columns); | |
| th.enter().append("th"); | |
| th.text(function(d) { return d }); | |
| th.exit().remove(); | |
| // creating a row for each object in the data, with filtering | |
| var rows = tbody.selectAll('tr').data(tbody.data()[0].filter(function(d) { | |
| return d[what]==lines | |
| })); | |
| rows.enter().append("tr"); | |
| rows.attr('data-row',function(d,i){return i}); | |
| rows.exit().remove(); | |
| /// creating a cell for each column in the rows | |
| var cells = rows.selectAll("td") | |
| .data(function(row) { | |
| return columns.map(function(key) { | |
| return {key:key, value:row[key]}; | |
| }); | |
| }); | |
| cells.enter().append("td"); | |
| cells.text(function(d) { return d.value; }) | |
| .attr('data-col',function(d,i){return i}) | |
| .attr('data-key',function(d,i){return d.key}); | |
| cells.exit().remove(); | |
| return tbl; | |
| }; | |
| ///////// methods ///////// | |
| tbl.columns = function(_) { | |
| if (!arguments.length) return columns; | |
| columns = _; | |
| return this; | |
| }; | |
| tbl.lines = function(_,__) { | |
| if (!arguments.length) return rows; | |
| what = _; | |
| lines = __; | |
| return this; | |
| }; | |
| return tbl; | |
| }; | |
| ///////////// MAIN /////////////////// | |
| var tab = d3.table(); | |
| /// attaching data | |
| d3.tsv('isoc.tsv', function(error,data) { | |
| d3.select("body") | |
| .datum(data) | |
| .call(tab) | |
| }); | |
| /// choosing specific filters on columns and lines | |
| tab | |
| .columns(["#ay","U","B"]) | |
| .lines("#ay", 6.60); | |
| /// updating the table | |
| d3.select("body").call(tab); | |
| </script> |
| #ay | U | B | V | R | I | UB | BV | VR | RI | BI | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 6.60 | 16.057 | 14.573 | 12.998 | 11.865 | 10.486 | 1.484 | 1.575 | 1.133 | 1.379 | 4.192 | |
| 6.85 | -8.723 | -8.814 | -8.921 | -9.002 | -9.089 | 0.091 | 0.107 | 0.081 | 0.087 | 0.279 | |
| 6.85 | -8.806 | -8.873 | -8.959 | -9.031 | -9.109 | 0.067 | 0.086 | 0.072 | 0.078 | 0.225 | |
| 6.85 | -8.960 | -8.908 | -8.935 | -8.982 | -9.030 | -0.052 | 0.027 | 0.047 | 0.048 | 0.022 | |
| 6.85 | -8.998 | -8.893 | -8.905 | -8.945 | -8.984 | -0.105 | 0.012 | 0.04 | 0.039 | -0.053 | |
| 6.86 | 16.057 | 14.573 | 12.998 | 11.865 | 10.486 | 1.484 | 1.575 | 1.133 | 1.379 | 4.192 | |
| 6.86 | 2.316 | 2.278 | 2.146 | 2.083 | 2.032 | 0.038 | 0.132 | 0.063 | 0.051 | 0.233 | |
| 6.86 | 2.070 | 2.044 | 1.958 | 1.923 | 1.897 | 0.026 | 0.086 | 0.035 | 0.026 | 0.147 | |
| 6.86 | 1.956 | 1.941 | 1.876 | 1.852 | 1.835 | 0.015 | 0.065 | 0.024 | 0.017 | 0.104 | |
| 6.86 | 1.795 | 1.799 | 1.752 | 1.737 | 1.730 | -0.004 | 0.047 | 0.015 | 0.007 | 0.058 | |
| 10.12 | 2.779 | 1.438 | -0.170 | -1.374 | -2.617 | 1.341 | 1.608 | 1.204 | 1.243 | 4.153 | |
| 10.12 | 2.890 | 1.700 | 0.113 | -1.203 | -2.588 | 1.19 | 1.587 | 1.316 | 1.385 | 4.093 | |
| 10.12 | 2.920 | 1.838 | 0.265 | -1.130 | -2.616 | 1.082 | 1.573 | 1.395 | 1.486 | 4.05 |