Show all posts
2 years ago

TauCharts. Data focused javascript charting library.

Information visualization is the study of (interactive) visual representations of abstract data to reinforce human cognition (Wikipedia)

There are lot of javascript charting libraries already, so you can ask, why do I need one more? Well, in this post we will try to answer this question.


I’d say there are four categories of charting libraries:

The problem is most of quite popular charting libraries focus on a set of different chart types with big detailed config. When I use them I feel like I waste my time in configuring a beautiful picture instead of performing data analysis. In the beginning I have a table-like dataset, but once I visualize it I have to apply my programming skills to cleanup and split the data to series and fit them to a chart configuration. Once I want to visualize a correlation between other variables from the same dataset – I have to repeat my “dance” around those series.

For example, here is a config of a scatter plot in Highcharts:

And here – how to build a scatter plot with Fusioncharts:

fusion-chart-sample

Let’s be honest – dealing with such series-oriented configs is tedious. There should be a better way.

By the way, the most joyful way to “analyze-while-visualize” I experienced in Tableau, but it is a very expensive desktop solution

We should go back to fundamentals of information visualization. It is not scatter, bar or line chart, it is shape, color, position, size, etc. Basically, most of visualizations can be obtained by mapping dataset variables to these visual concepts.

I think the central place in a visualization must be given to data itself.

As taucharts developers, we believe that a chart should serve to data, not vice versa. So I can declare that taucharts is a data-focused solution where the main goal of a chart is to allow a user to visually grasp the message hidden in the data and interact visually with it.

Data plays a key role here, so the main principle we follow while developing taucharts sounds like:

A chart is a model of data encoded by combination of visual objects and their properties

This model should allow to read data visually, answer specific questions about the data and manipulate it on a high level.

data-loop

Taucharts DSL

We want to make visualization API as simple as possible.

Here is an example:

As you can see we just map variables of some meaningful structured data to the visual properties.
But don’t let simplicity fool you and force you to think that taucharts is a fancy toy. This definition is just a shortcut which expands into a verbose declarative DSL pretty similar to Vega visualization grammar.

Taucharts DSL describes composition of graphical components and mapping of data variables (columns) to the scales and components properties.

Thus the key aspect of DSL is a composition while a set of graphical components and scales remains open for extension.

So far taucharts supports the following components:

To implement scales and graphical elements for the library we use D3.js and its best practices so everyone familiar with D3 could also contribute to the project. Also we aim to have a good isolation for graphical components, so an elements set potentially could be customized for different assemblies.

Actually taucharts allow to describe a chart directly using DSL. It’s not easy, but you can create some non-trivial charts and dashboards.

Facets

The term “Facet” is useful for describing an object that creates many little graphics that are variations of a single graphic. Thus we can use facets to make graphs of graphs. Facets give you one more degree of freedom in visual data exploration.

The composable nature of taucharts DSL allows to achieve that on a single chart by recursive composition of coordinates. That can be expressed like “embed cartesian coordinates by X*Y to cartesian coordinates by Y*Z”.

Shortcuts in taucharts give a convenient way for creating facets by passing an array of variable names. In the chart below by using “map” function we introduced two calculated ordinal variables “PowerLevel” and “WeightLevel” to our dataset, and used faceting to split the dataset to four logical parts:

For example, we can “read” here that there are no powerful cars that are light at the same time, and that almost all cars from “High power / Heavy weight” segment have an 8-cylinder engine.

One more useful facet example is a SPLOM (Scatterplot Matrix) that visualizes correlation between data-set variables.

There are no surprises: power is negatively correlated to acceleration time and fuel economy.

Plugins

We designed taucharts to have smart API and plugins to manipulate data and chart structure.

Using DSL API and data-centric approach we can modify the structure and transform source data to build, for example, trendlines for particular data segments.

The chart legend in taucharts is also a plugin. Having an API access to chart structure, color scales and source data, we can turn the chart’s interactive legend into a summary and a visual one-click filter for the data.

And of course we can combine different plugins:

The taucharts API allows to traverse DSL tree and query graphical component instances that construct the chart. Moreover, each component has an API as well, allowing to:

Using this API you can turn a chart into a visual data manager and seamlessly embed it into third-party systems.

Summary

Chart below illustrates our current vision of TauCharts on the market. You can drag / compress / extend brush to explore data in parallel coordinates:

TauCharts is free, open source, data-friendly, young and beautiful solution. Give it a try, share feedback, post issues on github and have fun!

  • http://peterdesmet.com/ Peter Desmet

    Looks very compelling! I was wondering how TauCharts compares to C3.js (http://c3js.org/), which is a mature, free and open source charting library with APIs? I’m especially curious on the performance of TauCharts for larger datasets (e.g. timeseries of 4000), which is quite slow in C3.

    • Vladimir Petriko

      Friendly speaking we didn’t make a deep performance research yet and your questions sound like a good topic for the next blog article.

      Actually you can explore more charts here: http://taucharts.com/taulab/index.html

      Will be happy to see your samples with large datasets :)

      • AdamHersh

        I am also curious about how Tau compares to Plottable (https://github.com/palantir/plottable) from Palantir. The modular component style and the composition over configuration approach from Plottable seem similar to what you are going for with Tau.

  • http://gk.palem.in/ Gopalakrishna Palem

    This is really good effort. One quick note though, perhaps a side note: In visualization best-practices, it is not good to rely only on color to separate the series.

    For example, the highcharts example and the fusion-charts example in this article clearly demonstrate this principle. They can be seen using different symbols (e.g. circle and triangle/square) (along with color of-course) to separate the data items. This fundamental principle is usually neglected by many opensource charting libraries.

    Facets support is a really good job. Not many open-source libraries have these.

    GK
    http://gk.palem.in/

    • Vladimir Petriko

      Thank you for such a feedback. Hope Taucharts will be useful for your real world applications.

      BTW, we have plans to support “symbols” and “textures” for visual encoding someday.