Hi! I'm Nicolas and I'm interested in information visualization, JavaScript and web standards.
I currently work as a Data Visualization Scientist at Twitter. I wrote PhiloGL, the JavaScript InfoVis Toolkit and V8-GL.
New JavaScript InfoVis Toolkit Visualizations
Posted in:
javascript infovis toolkit
, visualization
Today I'd like to announce the addition of three new components in the next version of the JavaScript InfoVis Toolkit: Area Charts, Bar Charts and Pie Charts. I hope these components will be widely used among the JIT user community.
All components support a simpler JSON format that I'll describe later in this post. These components are easy-to-use, yet very powerful: they support live data updates and multi valued data as we will see next.
Area Charts
The Area Chart is a useful component to track the evolution of a bunch of categories at the same time. In addition, the aggregation of the values of all these categories is also presented in a meaningful way. This component supports live updates (as you'll see in the first seconds of the video), filtering/restoring categories, tooltips and a legend. As usual this is all JavaScript: The visualization is instanciated this way:var areaChart = new $jit.AreaChart({
//id of the container
injectInto: 'infovis',
//set animations
animate: true,
//visualization 'padding'
offset: 5,
//labels 'margin'
labelOffset:10,
//show aggregated values
showAggregates:true,
//show labels
showLabels:true,
//use gradients for rendering
type:'stacked:gradient',
//label styling
Label: {
size: 13,
family: 'Arial',
color: 'white'
},
//enable tips
Tips: {
enable: true,
onShow: function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
}
},
//add leftclick handler
filterOnClick: true,
//add rightclick handler
restoreOnRightClick:true
});Bar Charts
Bar Charts are similar to Area Charts, but they support additional styling and positioning. You can use vertical or horizontal Bar Charts. Here's an example: This object is created the same way you create an AreaChart:var barChart = new $jit.BarChart({
injectInto: 'infovis',
animate: true,
//set orientation vertical or horizontal
orientation: 'horizontal',
//bar separation
barsOffset: 20,
offset:10,
labelOffset:5,
type:'stacked:gradient',
showAggregates:true,
showLabels:true,
Label: {
size: 13,
family: 'Arial',
color: 'white'
},
Tips: {
'enable': true,
'onShow': function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
}
}
});Pie Charts / Rose Diagrams
Finally there's the Pie Chart. But this is no regular Pie Chart. It can support simple data as well as more complex data. You can add multiple categories to this Pie Chart, combining them into something more like a Stacked Rose Diagram. They also support live updates as you'll see in the first seconds of the video:JSON Data Format
The JSON data format for these visualizations had to depict something like a contingency table, and so I decided to adopt something like this:var json = {
//category labels
'label': ['label A', 'label B', 'label C', 'label D'],
//each "stack" is described here
'values': [
{
'label': 'date A',
'values': [20, 40, 15, 5]
},
{
'label': 'date B',
'values': [30, 10, 45, 10]
},
{
'label': 'date E',
'values': [38, 20, 35, 17]
},
{
'label': 'date F',
'values': [58, 10, 35, 32]
},
{
'label': 'date D',
'values': [55, 60, 34, 38]
},
{
'label': 'date C',
'values': [26, 40, 25, 40]
}]
};