Simple Data Visualization in Apache CouchDB™

D3, right in the Fauxton dashboard, via userscript

Have you ever wanted to quickly visualize the results of CouchDB’s built-in reduce functions for some quick feedback, without leaving the context of its handy dashboard?

The JSON representation of a CouchDB map-reduce operation, aggregating movies by rating.

Introducing Chango

Recently, my colleague and office neighbor va barbosa published an article on integrating a data-visualizing view directly into the Cloudant dashboard. Essentially, it’s a userscript that adds a new menu button to a database view when the results are aggregated and JSON is returned in a specific format. Clicking the Chart button will render a D3 chart.

Now, it works in CouchDB, too:

Automatically visualize aggregated CouchDB JSON with Chango.

Because Cloudant and CouchDB now share the same codebase, updating Va’s userscript—we call it Chango, as a portmanteau combining “chart + Mango”—was pretty straightforward. While the spirit of the Mango query interface is to make querying CouchDB easier, we decided to riff on the name with “Chango,” since it aspires to make data visualization in CouchDB more convenient.

Here is the Chango script, in its entirety:

All the userscript for Chango.

Generating your first Chango chart

Chango currently works using the Firefox browser with the Greasemonkey extension. Once you have set up the browser, click the view raw button and install the script when prompted.

Rather than write your own reduce functions, CouchDB comes with built-in reduce functions that run in Couch’s native Erlang. Make sure to specify your reduce when defining your database view, like so:

Using the built-in reduce function _sum to aggregate results on the Movie_rating field. _count would also work here, and without emitting the value 1 for each document in the index.

Then, include the reduce in your query options when using the dashboard:

Including the Reduce query option in the Fauxton dashboard.

You’ll be all set to generate your chart from there.

Some Chango charts expect data in the same format. For example, pie-, bar-, and bubble-chart all expect to render data in the schema of [{ key: "", value: n }, ...]. When that happens, Chango will randomly select one of them. Just toggle the Chart button until you get the pie, bar, or bubble visualization you prefer. Through Chango’s dependency on Va’s simple-data-vis project, you can find the JSON schemas that SimpleDataVis expects. There’s more there than your basic charts covered here, so check it out.

Chango unchained

With that, we’re excited to see what the CouchDB community does with Chango and SimpleDataVis. Please let us know in the comments about any modifications you’ve made or questions you have.

Thanks for checking out Chango, and please ♡ this article to recommend it to other Medium readers.