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:

• Good looking, very popular and quite expensive solutions
• Libraries which provide quite specific visualizations like networks, heatmaps, candlesticks, treemaps, etc.
• Mediocre solutions with poor design and unnecessary animations. Some of them even not free…
• Awesome D3.js which can replace everything if you have time and very good programming skills.

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:

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.

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:

• Cartesian coordinates + elements [point, line, bar (vertical / horizontal), stacked bar (vertical / horizontal)]
• Parallel coordinates + elements [line]
• Geo coordinates. Here is a lack of decomposition but the component allows to fill regions by country / region code and put points of different color and size by specific coordinates (latitude / longitude).

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:

• react on user input (e.g.: click, mouseover, mouseout)
• change a component’s state (e.g.: highlight by data filter)

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!