jake kara, software engineer ‣ datab.js, tabular data with js ░

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:

Features I want to add:

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

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.