Essential Resources: Programming languages, toolkits and libraries

This is part of a series of posts to share with readers a useful collection of some of the most important, effective and practical data visualisation resources. This post presents the range of data visualisation programming languages, toolkits and libraries, sometimes used in isolation, often used in partnership to accomplish specific functions.

Please note, I may not have personally used all the packages or tools presented but have seen sufficient evidence of their value from other sources. Whilst some inclusions may be contentious from a quality/best-practice perspective, they may still provide some good features and provide value to a certain audience out there. Finally, to avoid re-inventing the wheel, descriptive text may have been reproduced from the native websites if they provide the most articulate descriptions. Your feedback is most welcome to help curate this collection, keep it up to date and preserve its claim to be an essential list of resources!

(Check out a fabulous collection of selected tools, largely covering programming languages and libraries, on Datavisualization.ch)

 

D3.js

D3 is arguably the most dominant and important programming library for creating dynamic, interactive visaulisations. Created by Mike Bostock, who also works at the New York Times, D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3

Examples/references: Mike Bostock’s Portfolio, Budget Proposal, 512 Paths to the White House

 

Protovis

Protovis, the predecessor to D3.js, is a free and open-source JavaScript based visualisation project, led by Mike Bostock and Jeff Heer, which composes custom views of data with simple marks such as bars and dots. Whilst it is no longer under active development as of June 2011, it is still ‘available’ as a programmable approach to visualisation design.

Protovis

Examples/references: Examples, EagerEyes, Jerome Cukier

 

Vega

Vega is a visualization grammar, a declarative format for creating, saving and sharing visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.

Vega

Examples/references: Tutorial

 

Processing

Processing is an open-source programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Processing

Examples/references: Exhibition, Posted, Ben Fry’s Traces

 

Processing.js

Processing.js is a ‘port’ of Processing, a sister project as it were, designed to make data visualisations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in a web page, and Processing.js does the rest. Whether you’re an advanced Processing developer or completely new, whether you’re a pro with web technologies or just getting started, Processing.js bridges the gap between these two powerful technologies.

Processingjs

Examples/references: FlinkLabs

 

Adobe Flash

Adobe Flash was once the industry standard for authoring innovative, interactive content used by organisations such as the New York Times and The Guardian. In conjunction with the platform’s programming language, ActionScript, Flash allows designers to bring dynamism to visualisation, opening up infinite possibilities for creativity. Some of the most pioneering, best practice visualisations built in Flash can be found with online news and media sites, introducing interactivity to supplement and enhance the information presentation. The lack of support for Flash across Apple’s suite of devices and the emergence of competing developments, including D3 and HTML5 has somewhat impacted on the current popularity and development of Flash projects, compared to the past.

Flash

Examples/references: Mapping America, Notabilia

 

Quadrigram

With Quadrigram you can create custom data visualizations in an intuitive way with the flexibility of a visual programming language. It enables you to prototype and share your ideas rapidly, as well as produce compelling solutions with your data in the forms of interactive visualizations, animations or dashboards. Quadrigram cloud architecture offers the guarantee to process data painlessly. A number of scalable pricing options are available based on the number of users, processing power, storage capacity, traffic and access privileges that you require.

Quadrigram

Examples/references: Quadrigram in Action, Champions League comparison

 

Prefuse

Prefuse is a set of software tools for creating rich interactive data visualizations. It is a Java programming framework for creating rich interactive data visualisations supporting a rich set of features for data modeling, visualisation, and interaction. It provides optimised data structures for tables, graphs, and trees, a host of layout and visual encoding techniques, and support for animation, dynamic queries, integrated search, and database connectivity. Prefuse is written in Java, using the Java 2D graphics library, and is easily integrated into Java Swing applications or web applets. Prefuse development was opened up to the community in 2011.

Prefuse

Examples/references: Gallery

 

Prefuse Flare

The Prefuse Flare toolkit is a successor to Prefuse and provides visualisation and animation tools for ActionScript and the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Moreover, flare features a modular design that lets developers create customized visualization techniques without having to reinvent the wheel. Flare development now opened up to the community on GitHub. Flare 2009.01.24 is last official release .

Flare

Examples/references: Demos

 

HTML5

HTML5 is the latest revision of HTML that introduces a host of important elements and attributes that improve the overall web experience and enhance its importance alongside other visualisation programming languages. The canvas element, in particular, can be used for rendering graphics and visuals on the fly without the need for plug-ins which opens up many new possibilities. Whilst it is not a perfect replacement for Flash, to create cross-platform/multi-device projects, HTML5 (alongside CSS3 and Javascript) is becoming an increasingly important part of the developer’s toolkit.

HTML5

Examples/references: GED VIZ, Narrative of transition from Flash to HTML5

 

Adobe Edge

In response to the mentioned restrictions involving developing projects using Flash, Adobe has responded with its own range of tools for creating next-generation HTML5 projects and designed to “set the benchmark for standards-based web creation”. Of these, Edge Animate is the most interesting offering, designed to “create animated, interactive content for the modern web”, providing an alternative for projects that previously required Flash.

AdobeEdge

Examples/references: Showcase

 

Kendo UI

Kendo UI offers a comprehensive HTML5/JavaScript framework for modern web and mobile app development, offering everything professional developers need to build HTML5 sites and mobile apps. Kendo UI has it all: rich jQuery-based widgets, a simple and consistent programming interface, a rock-solid DataSource, validation, internationalization, a MVVM framework, themes, templates and the list goes on.

KendoUI

Examples/references: Demos, Pursuit of Faster

 

Raphael.js

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphael

Examples/references: Demos

 

Visual Sedimentation

VisualSedimentation.js is a JavaScript library for visualizing streaming data, inspired by the process of physical sedimentation. Visual Sedimentation is built on top of existing toolkits such as D3.js (to manipulate documents based on data), jQuery (to facilitate HTML and Javascript development) and Box2DWeb (for physical world simulation).

VisualSedimentation

Examples/references: Examples

 

Scriptographer

Scriptographer is a scripting plugin for Adobe Illustrator. It gives the user the possibility to extend Illustrator’s functionality by the use of the JavaScript language. The user is no longer limited to the same tools that are used by most graphic designers around the globe. Scriptographer allows the creation of mouse controlled drawing-tools, effects that modify existing graphics and scripts that create new ones.

Scriptographer

Examples/references: Gallery, What team should you be rooting for?

 

Paper.js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. Paper is the successor or (perhaps better) the alternative to Scriptographer for working with Adobe CS6 onwards.

Paper

Examples/references: Examples, Time Machine

 

Polychart.js

Polychart.js is an expressive JavaScript graphing library capable of producing a wide array of graphics fairly easily. It takes care of many of the fiddly details that make plotting a hassle (like drawing legends) as well as providing a powerful model of graphics that makes it easy to produce complex multi-layered graphics. Additionally, it has a built-in interaction model that makes it easy to produce charts that interact with the user and with one another.

Polychartjs

Examples/references: Demo

 

Arbor.js

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Arbor

Examples/references: Demo

 

EaselJS

EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

Easeljs

Examples/references: Demos, Working in America

 

Miso

Miso is an open source toolkit designed to expedite the creation of high-quality interactive storytelling and data visualisation content. Miso consists of Dataset, a JavaScript client-side data management and transformation library, Storyboard, a state and flow-control management library & d3.chart, a framework for creating reusable charts with d3.js. Miso is in active development, and will have components released as they are completed.

Miso

Examples/references: Examples of ‘Dataset’

 

Chart.js

Chart.js offers easy, object oriented client side graphs for designers and developers. You can visualise your data in 6 different ways, with each chart type animated, fully customisable and great-looking, even on retina displays. Chart.js uses the HTML5 canvas element, supports all modern browsers and is dependency free, lightweight with loads of customisation options.

Chart

Examples/references: Demos

 

Dimple

The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.

Dimple

Examples/references: Examples

 

CodeFlower

CodeFlower is an experiment that visualizes source repositories using an interactive tree. Each disc represents a file, with a radius proportional to the number of lines of code (loc). All rendering is done client-side, in JavaScript. It is built with d3.js and inspired by Code Swarm and Gource.

Codeflower

Examples/references: Example projects

 

Cubism

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub.

Cubism

Examples/references: Demos

 

Cube

Cube is an open-source system for visualizing time series data, built on MongoDB, Node and D3. If you send Cube timestamped events (with optional structured data), you can easily build realtime visualizations of aggregate metrics. For example, you might use Cube to monitor traffic to your website, counting requests:

Cube

Examples/references: Video demo

 

Envision

Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.

Envision

Examples/references: Demos

 

Orange

Orange offers open source data visualization and analysis for novice and experts. Data mining through visual programming or Python scripting. Components for machine learning. Add-ons for bioinformatics and text mining. Packed with features for data analytics.

Orange

Examples/references: Features

 

InfoVis Toolkit

The JavaScript InfoVis Toolkit, created by Nicolas Garcia Belmonte, provides a comprehensive range of tools for creating Interactive Data Visualizations for the Web.

JavaScriptInfoVis

Examples/references: Demos

 

Nodebox

The NodeBox family of tools gives you the leverage to create generative design the way you want: a desktop application that lets you create generative, static, animated or interactive visuals. Using open-source tools designers can automate boring production challenges, visualize large sets of data and access the raw power of the computer without thinking in ones and zeroes. Nodebox’s tools integrate with traditional design applications and run on many platforms.

Nodebox

Examples/references: Gallery, Creating Data Visualisations

 

ZingChart

Build interactive HTML5 charts using ZingChart JavaScript charting library and feature-rich API set. Render them in any browser and on any device. Export them quickly and easily.

zingchart

Examples/references: Gallery

 

Highcharts JS

Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Highcharts

Examples/references: Demos

 

Timeline.js

TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages. It can pull in media from different sources and has built in support for: Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more media types are regularly added.

Timeline

Examples/references: Examples

 

Netadvantage

NetAdvantage provides a range of controls for creating charts with a range of frameworks including asp.net and silverlight. Visualisation options include bar, bubble, Gantt, line, radial, scatter, spline charts, and introducing the doughnut chart, so you can visually represent multiple data series. Animate data over time using the innovative Motion Framework and glean further intelligence from gauges and bullet charts. Plot and interact with geospatial data using rich new features typically reserved for dedicated geospatial developers, thanks to a partnership with the premier supplier of Geographic Information System software.

Netadvantage

Examples/references: Samples

 

PivotViewer

PivotViewer is a Silverlight control that makes it easier to interact with massive amounts of data on the web in ways that are powerful, informative, and fun. By visualizing thousands of related items at once, users can see trends and patterns that would be hidden when looking at one item at a time.

PivotViewer

Examples/references: Article

 

Gnuplot

Gnuplot is a portable command-line driven graphing utility for Linux, OS/2, MS Windows, OSX, VMS, and many other platforms. The source code is copyrighted but freely distributed (i.e., you don’t have to pay for it). It was originally created to allow scientists and students to visualize mathematical functions and data interactively, but has grown to support many non-interactive uses such as web scripting.

Gnuplot

Examples/references: Demos

 

Google Chart API

Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types. The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a

with that id to display the Google Chart. That’s all you need to get started.

GoogleCharts

Examples/references: Chart Gallery