datab.js, tabular data with js

I wrote a js library for transforming tabular data in javascript, and generating editable HTML tables.

(install with npm install datab)

Some cool features:

  • You can bind a file input element to create a datab.data object and call a callback function when a user chooses a .csv
  • You can generate a save-able CSV file blob for the user to download at any point
  • In addition to generating CSV files, you can also generate editable HTML tables, JSON objects and JS objects that represent your datab.data object
  • When you generate an HTML table, and you make some alterations using datab’s built-in edit modes (transpose/add/drop cols), the internal data of the object can also be synched to incorporate those changes.
  • You can create a datab.js from JSON, a JS object, a CSV file or a CSV string You can transpose a table and add and drop columns

Features I want to add:

  • DOC-U-MEN-TATION, with lots of cool demos

Here’s the repo: https://github.com/jakekara/datab.js

Here’s a modest demo https://jakekara.github.io/datab.js/demo/

It’s specifically not styled at all to show you that datab.js doesn’t care. I don’t want it to be opinionated at all or rely on CSS, or conflict with your CSS.

A more interesting demo: Building a map

Here’s a demo of a map-making tool, using datab.js: https://jakekara.github.io/ct-color-map/

This is the kind of thing I do all the time working in a newsroom. You supply it a CSV with a column for town names a column of colors (RGB/A HEX or named web colors) and it will color the map. Here’s a sample CSV you can “upload” to it (it doesn’t ever leave your local machine.

How I’m using it

I’m working on a project that deals with a lot of tabular data – ingesting it into a database and displaying it in a web app. datab has been my swiss army knife for this project.

How I plan to use it, or how you might want to use it

  • I’d love to write a node CLI tool for manipulating tabular data, or generating web graphics from spreadsheets
  • I have a table-maker demo, complete with a download button that generates a fully self-contained, single-file HTML chart that you can iframe or pym.js-embed into your pages. Hoping to upload that soon.
  • Anywhere I need tables from data, I’m going to start using this.

Design approach

I write code using Javascripts prototype OOP model, so that’s how this code is structured. I don’t use a common approach of packing the entire library into a single variable.

I write JS, front-end or back-end, in node modules with require for dependencies, rathern than using script tags. For front-end stuff, I use browserify and uglifyjs to bundle everything together and then just include that one script.

There are two modules so far – datab.data and datab.ui.

The .data module is the core functionality of constructing and manipulating the tabular data object, and exporting it in different formats. This part is suitable for use in node or in a browser.

The .ui module is meant to encapsulate the stuff that has to do with drawing the tabular data set to HTML (and reading data from HTML tables). This is only useful in a browser.

I did not reinvent stuff that D3 can handle, like transposing matrices. However, I haven’t looked at how Bostock implements that and I might re-implement it myself at some pointi. Since I already store the matrix internally in two formats – as an array of rows and as an array of columns, I can transpose a table in constant time (but double the memory usage) by just swapping the internal __cols and __rows attributes.