{"_id":"@redsift/d3-rs-table","_rev":"108-57d0537885144da9fdaa7a3c26d0ee87","name":"@redsift/d3-rs-table","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@redsift/d3-rs-table","version":"0.1.0","keywords":["table","redsift","d3","visualization"],"author":{"url":"https://medium.com/@rahulpowar","name":"Rahul Powar"},"license":"MIT","_id":"@redsift/d3-rs-table@0.1.0","maintainers":[{"name":"rahulpowar","email":"rahul@redsift.io"}],"homepage":"https://github.com/redsift/d3-rs-table","bugs":{"url":"https://github.com/redsift/d3-rs-table/issues"},"dist":{"shasum":"6329936b57aae9962c51a434ea607902b864c6ac","tarball":"https://registry.npmjs.org/@redsift/d3-rs-table/-/d3-rs-table-0.1.0.tgz","integrity":"sha512-+ngyz8kysEl8lFtT0abL6qBBmsl9MaWFzbb2p+DdJ0aVgBdOlV8UCmgqOSgP/9YELXgVY8jpYY6Ec5TNe2sStg==","signatures":[{"sig":"MEYCIQDJVzpuXiHx8yGAo5dc2FuSasRb+XAU+j0T7Z6tRtTOdgIhAK8YQ4i1HOaCnHPfU1ra2twn5sUArK5QGJvZ/g9hevK8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"distribution/d3-rs-table.umd-es2015.js","_from":".","_shasum":"6329936b57aae9962c51a434ea607902b864c6ac","browser":"distribution/d3-rs-table.umd-es2015.min.js","scripts":{"test":"tape 'test/**/*-test.js' && eslint index.js src","build":"gulp -o d3-rs-table -g d3-selection build","serve":"gulp -o d3-rs-table -g d3-selection serve","pretest":"npm outdated || true && npm run build","prepublish":"npm run build"},"_npmUser":{"name":"rahulpowar","email":"rahul@redsift.io"},"repository":{"url":"git+https://github.com/redsift/d3-rs-table.git","type":"git"},"_npmVersion":"4.0.2","description":"Displays a 2D array as a HTML table using D3v4.","directories":{},"jsnext:main":"index.js","_nodeVersion":"6.3.1","dependencies":{"d3-selection":"~1.0.2"},"devDependencies":{"del":"^2.2.2","gulp":"^3.9.1","yargs":"^5.0.0","eslint":"^3.3.1","rollup":"^0.34.10","gulp-util":"^3.0.7","gulp-rename":"^1.2.2","gulp-uglify":"^2.0.0","browser-sync":"^2.14.0","vinyl-buffer":"^1.0.0","rollup-stream":"^1.11.0","gulp-sourcemaps":"^2.0.0-alpha","@redsift/tape-reel":"~0.1.0","rollup-plugin-json":"^2.0.0","rollup-plugin-buble":"^0.13.0","vinyl-source-stream":"^1.1.0","rollup-plugin-commonjs":"^3.3.0","rollup-plugin-node-resolve":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/d3-rs-table-0.1.0.tgz_1479758385801_0.3412704016081989","host":"packages-12-west.internal.npmjs.com"}}},"time":{"created":"2016-11-21T19:59:47.652Z","modified":"2026-09-15T11:13:47.954Z","0.1.0":"2016-11-21T19:59:47.652Z"},"bugs":{"url":"https://github.com/redsift/d3-rs-table/issues"},"author":{"url":"https://medium.com/@rahulpowar","name":"Rahul Powar"},"license":"MIT","homepage":"https://github.com/redsift/d3-rs-table","keywords":["table","redsift","d3","visualization"],"repository":{"url":"git+https://github.com/redsift/d3-rs-table.git","type":"git"},"description":"Displays a 2D array as a HTML table using D3v4.","maintainers":[{"email":"operations@redsift.io","name":"redsift_operations"},{"email":"rahul@redsift.io","name":"rahulpowar"},{"email":"randal@redsift.io","name":"randalpinto"},{"email":"nicolas.jaremek@redsift.io","name":"njaremek"},{"email":"eduardo.arada@redsift.io","name":"earada"},{"email":"jose.cabrera@redsift.io","name":"jmccanal"},{"email":"bernat.mayolas@redsift.io","name":"bmayolasredsift"},{"email":"raul.lorenzo@redsift.io","name":"raul.lorenzo.redsift"},{"email":"pidupuis@protonmail.com","name":"pierredupuis"},{"email":"caluminus@hotmail.co.uk","name":"luminous_cal"},{"email":"hector.ortega@redsift.io","name":"hortega_rs"},{"email":"asim.gunes@smartbee.uk","name":"asimgunes"},{"email":"dmitry@redsift.io","name":"sometimesitbetterstepasideandnotusejavascript"},{"email":"serhii.trofimenko@redsift.io","name":"sega057"},{"email":"julian.picht@redsift.io","name":"julian.picht"},{"email":"pedro.jimenez@redsift.io","name":"pedro.lop.j"},{"email":"anne.shackelford@redsift.io","name":"anneshackeford"},{"email":"piero.nima@redsift.io","name":"pieronima"},{"email":"bhushan.lokhande@redsift.io","name":"bhushan-redsift"},{"email":"mike.cardwell@redsift.io","name":"mikehardenize"},{"email":"jay.singh@redsift.io","name":"jaydsingh11"},{"email":"antony.seedhouse@redsift.io","name":"synotnars"},{"email":"nadim.lahoud@redsift.io","name":"lahoud"},{"email":"juan.baquero@redsift.io","name":"jmbaquero_redsift"}],"readme":"# d3-rs-table\n\n`d3-rs-table` is a component that can map a 2D matrix to an old school `table/tr/td` layout. It serves as a simple example demonstrating the implementation of our reusable chart model for D3 at [Redsift](https://redsift.io/?utm_source=github&utm_medium=readme&utm_campaign=oss) and a baseline for comparing view/data binding approaches for other frameworks. Note, this does not utilise `d3.transition()`. This component is dependent on D3 v4 (Alpha).\n\n## Builds\n\n[![Circle CI](https://circleci.com/gh/Redsift/d3-rs-table.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-table)\n\nUMD from //static.redsift.io/reusable/d3-rs-table/latest/d3-rs-table.umd-es15.min.js\n\n## Usage\n\n### Data Format\n\n\tvar data = [ \t\n\t\t\t\t\t[ 'a', 'b', ... ], \n\t\t\t\t\t[ '1', '2', ... ], \n\t\t\t\t\t... \n\t\t\t\t]\n\nIn this model, the first entry is the first row of the table.\n\n### Call\n\nAssuming data compatible with the layout above is available:\n\n\tvar tbl = d3_rs_table.html();\n\td3.select('body').datum(data).call(tbl);\t\n\nUpdating is simply mutating the `data` array and calling `d3.select('body').datum(data).call(tbl)` with the same reusable component instance.\n\n## Usage\n\n`headerRow0` -> true, header is the first row. false, header is the first col. null/undefined, no header.\n\n`text` -> data formatting function.\n\n## Comparing\n\nAny fair comparison against this component in other presentation frameworks should include the following features:\n\n- Ability to change the dimensions of the data array and rebind the presentation.\n- Support ragged arrays via the update flow i.e. arrays where the rows of the array may be of different sizes and have this reflect in the generated DOM.\n- Ability to customise the text presentation on demand via a callback. E.g. in the example, the instance of the component constructed uses a function to format the number to 2 decimal places via `var tbl = htmlTable().text((d) => d.toFixed(2))`.\n- Ability to optionally render the first row or first column of the data set as a `th` element instead of a `td`. While style can be achieved using CSS, this demonstrates the ability to express sophisticated DOM element generation rules.\n\nOther points to consider:\n\n- Sparse arrays should be treated as expected i.e. empty cells should be created for `null` data elements.\n- The DOM should be allowed to render between every update using an approach suitable for the framework in question.\n- Use a type stable array when running the benchmark e.g. arrays of floats in the reference example.\n\n## Performance\n\nOne of the primary uses of this component is testing performance of the DOM binding. A monolithic version of the test is available [here](https://static.redsift.io/blog/performance-04-16/ZWMamp.html) or as a [Codepen here](http://codepen.io/rahulpowar/full/ZWMamp/). The times embedded are not fully representative, as they only measure the time spent in the data binding portion of the library. Developer tools e.g. `Chrome Timeline > Capture > JS/Paint`, provides a more complete picture. Typically a 2500 item data array binds in 8 to 13 ms in Chrome 49 and corresponds to a 25fps once layout, update and paint are done. Safari 9 has a JS time of 3 to 5 ms. Times on a mobile device are visibly slower but acceptable with 16 ms JS times on iOS 9.x with Mobile Safari.\n\n## D3 v4 vs v3\n\nOne interesting observation when using the D3 v4 Alpha is that the performance averages improve by ~15% with comparable standard deviations. [D3.js v4 Alpha](http://codepen.io/rahulpowar/full/ZWMamp/) vs [D3.js v3 Release](http://codepen.io/rahulpowar/full/VaGBaz/), note a minor change to the `d3.timer` API between v3 and v4.","readmeFilename":"README.md"}