Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest blog post by Tom Barker, a software engineer, an engineering manager, a professor and an author who can be reached at @tomjbarker.

In my previous post I talked about D3 as an option for creating data visualizations in JavaScript on the web. The main issue with getting started with D3 is the learning curve around the depth of low-level control it exposes for developers – D3 isn’t a wrapper to create data visualizations as much as it is a wrapper for line drawing in SVG. On the opposite end of the spectrum we have the JavaScript InfoVis Toolkit.

InfoVis was created by Nicolas Garcia Belmonte in 2008 and acquired by Sencha Labs in 2010. You can download InfoVis from The basic idea behind using InfoVis is to first define your data, and then instantiate a new object from the selection of predefined chart types defined in InfoVis, and finally load your data into the object.

Let’s take a look at each of these steps.

Defining Your Data

The predefined chart types generally expect data to be JSON objects formatted in a specific way. The charts that show aggregates – the area, bar, and pie charts – generally require data to be formatted like this:

The color property is an array of strings that specify the colors that should be used for each grouping. The label property is an array of strings that correlate to the labels on the axes for each grouping. And the values property is quite literally an array that holds objects that specify the values for each grouping.

The node type charts – the trees, and rgraphs – expect a hierarchical JSON data structure much like you see here:

The idea here is that each child then contains an id, a name and an array of children.

Let’s take a practical example. We’ll create a JSON object to represent quarterly totals for different groups in a given department or company. These totals can be earnings, bug backlog numbers, or whatever you want them to be.

We’ll use this data later in this article to craft several charts.

Instantiate Your New Object

To create a new chart in InfoVis you must instantiate a new object from the list of predefined chart types that InfoVis supports. At the time of this writing those supported chart types are:

  • AreaChart
  • BarChart
  • PieChart
  • TreeMap
  • Force Directed
  • Radial Graph
  • Sunburst
  • Icicle
  • SpaceTree
  • HyperTree

While this may be a limiting factor if you want to create a chart that is not yet supported, it can also be seen as an opportunity. The InfoVis project is completely open source and available on Github. Anyone is welcome to fork the project and submit updates

To create a new chart, instantiate a new object from the constructor of the chart type that you want to use. The root namespace for InfoVis is $jit – for JavaScript InfoVis Toolkit – so the format would be:

For a practical example we could just take the data structure that we created above and apply it to a new bar chart:

We declared a new variable barChart and assigned it the return from the constructor call. We instantiated a new object of type $jit.BarChart and passed in a number of configuration parameters. Reading the names of the parameters it should be fairly clear what each one does, and these are just a small sampling of the configuration options available to you.

Load Your Data into the Object

Note that a necessary step to have your charts rendered to the page is to have an HTML element that exists on the page to draw the chart into. We will pass the id of this element into the injectInto parameter of each chart’s constructor. So for the above bar chart there exists a div on the page that looks like the following:

After creating the object, call the loadJSON() method and pass in the data structure. This produces the grouped bar chart:


Let’s take the same data structure and pass it into a pie chart by calling the $jit.PieChart constructor:

You must make sure that a div exists on the page for the pie chart. You can either re-target the existing div or create a new one. For this sample code I opted to create a new one with an id of “pie.” I followed this same pattern for the remainder of the examples in this article.

This produces the following pie chart:


Finally let’s take that same data and pass it into an area chart by calling the $jit.AreaChart constructor.

This produces the area chart shown here:


This is great for aggregate type charts, but what if we wanted to see an example of a hierarchical chart?

Let’s first populate genealogical information into a JSON data structure.

Next we would instantiate a new HyperTree chart and pass in this data structure:

This produces the visualization that you can see here:


Detailed API documentation for these and the rest of the functionality in InfoVis can be found at

Pros and Cons

From the above information it should be clear that by using InfoVis you can create rich, interactive charts. InfoVis is ideal for quickly producing professional looking data visualizations. The limitation with InfoVis is if you want to use a chart type that is not yet supported, like a time series, bubble chart, or spark line.

For more details about data visualization, see the resources below from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Pro Data Visualization using R and JavaScript by Tom Barker, makes the R language approachable, and promotes the idea of data gathering and analysis. You’ll see how to use R to interrogate and analyze your data, and then use the D3 JavaScript library to format and display that data in an elegant, informative, and interactive way. You will learn how to gather data effectively, and also how to understand the philosophy and implementation of each type of chart, so as to be able to represent the results visually.
Developing a D3.js Edge is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. Many examples created in the real world with D3, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Getting Started with D3 teaches you how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SVG to build everything from simple bar charts to complex infographics. You’ll learn how to use basic D3 tools by building visualizations based on real data from the New York Metropolitan Transit Authority.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.
Pro JavaScript Performance: Monitoring and Visualization by Tom Barker, gives you the tools to observe and track the performance of your web applications over time from multiple perspectives, so that you are always aware of, and can fix, all aspects of your performance.

About the author

TomBarker_biosmall Tom Barker is a software engineer, an engineering manager, a professor and an author. Currently he is the Senior Manager of Web Development at Comcast, and an Adjunct Professor at Philadelphia University. He has authored Pro JavaScript Performance: Monitoring and Visualization, Pro Data Visualization with R and JavaScript, and Technical Management: A Primer, and can be reached at @tomjbarker.


Comments are closed.