Level up your data Visualization With Charts in 7.0.2 Couchbase

If a picture is worth a thousand words, data visualization is worth a thousand data points. The 7.0.2 Couchbase Query Workbench (and the Analytics Workbench) introduces the charts tab, which allows users to create charts based on the results of the query.

A Closer Look at Charts

Internally we use D3 to render the charts themselves. Each individual value can be seen using the hover tooltip, and the legend (colors and what they represent) for the multicolored charts are seen in the right-hand corner of the canvas. The charts can also be downloaded as an SVG using the button on the right-hand side of the canvas. Sizing the canvas or the screen itself auto-adjusts the charts to fit. 

Finding the Story in the EU Fishing Rights Data

As Brexit trade negotiations were dragging on at the start of the year, a lot of the discourse focused on perceived inequities in fishing rights. I felt there was a story in the data that could add depth and detail to the narrative. Despite having the largest Exclusive Economic Zone (EEZ) of all EU countries, and some of the richest fishing grounds, UK fleets are restricted to relatively modest catches.

The Common Fisheries Policy provides EU states with mutual access to each other's fishing grounds but sets quotas based largely on catch figures from 40 years ago, which today seem arbitrary. Earlier this year, the UK government was pushing to reverse this by proposing a "zonal attachment" model, where quotas would be carved up relative to the abundance of fish in each country's waters.

Create a D3 Dashboard With Cube.js

In this tutorial, I’ll cover building a basic dashboard application with Cube.js and the most popular library for visualizing data — D3.js. Although Cube.js doesn’t provide a visualization layer itself, it is very easy to integrate with any existing charting library. Additionally, you can use Cube.js Templates to scaffold a frontend application with your favorite charting library, frontend framework, and UI kit. The scaffolding engine will wire it all together and configure it to work with the Cube.js backend.

You can check the online demo of this dashboard here and the complete source code of the example app is available on Github.