11. It’s open source, and uses web standards so is very accessible. Leaflet
Use OpenStreetMap data and integrate data visualisation in an HTML5/CSS3 wrapperAnother mapping tool, Leaflet makes it easy to use OpenStreetMap data and integrate fully interactive data visualisation in an HTML5/CSS3 wrapper. jqPlot
jqPlot is a nice solution for line and point chartsAnother jQuery plugin, jqPlot is a nice solution for line and point charts. It’s often said that data is the new world currency, and the web is the exchange bureau through which it’s traded. Modest Maps
Integrate and develop interactive maps within your site with this cool toolModest Maps is a lightweight, simple mapping tool for web designers that makes it easy to integrate and develop interactive maps within your site, using them as a data visualization tool. The charts are beautifully animated into view automatically, and the framework also supports live data streams. This tool enables you to create highly-interactive dynamic and profile reports that combine statistics and map data to create engaging data visualizations. 03. It’s an especially useful tool for specialist visualizations such as geocharts and gauges, and it also includes built-in animation and user interaction controls. Polymaps
Aimed more at specialist data visualisers, the Polymaps library creates image and vector-tiled maps using SVGPolymaps is a mapping library that is aimed squarely at a data visualization audience. 22. When you need a very specific tool no other library provides, OpenLayers is always there. It’s similar to Processing, but without all the interactivity. Weka
A collection of machine-learning algorithms for data-mining tasks, Weka is a powerful way to explore dataWhen you get deeper into being a data scientist, you will need to expand your capabilities from just creating visualizations to data mining. Dygraphs
Help visitors explore dense data sets with JavaScript library DygraphsDygraphs is a fast, flexible open source JavaScript charting library that allows users to explore and interpret dense data sets. WolframAlpha
Wolfram Alpha is excellent at creating chartsBilled as a «computational knowledge engine», the Google rival WolframAlpha is really good at intelligently displaying charts in response to data queries without the need for any configuration. 28. We’re all used to the Mercator projection, but Kartograph brings far more choices to the table. Not a web designer or developer? 29. If you aren’t working with worldwide data, and can place your map in a defined box, Kartograph has the options you need to stand out from the crowd. R
A powerful free software environment for statistical computing and graphics, R is the most complex of the tools listed hereHow many other pieces of software have an entire search engine dedicated to them? 02. It’s free for non-commercial use, and features extensive documentation. It’s free for up to five tables; after that, there are monthly pricing plans. JavaScript library Tangle is a set of tools to do just this. The ease with which you can combine tabular data with maps is second to none. Coloured regions represent clusters of data that the system is guessing are similarWhen people talk about relatedness, social graphs and co-relations, they are really talking about how two nodes are related to one another relative to the other nodes in a network. CartoDB
CartoDB provides an unparalleled way to combine maps and tabular data to create visualisationsCartoDB is a must-know site. This library, more than most, is capable of some seriously advanced visualizations with complex data sets. jQuery Visualize
jQuery Visualize Plugin is an open source charting pluginWritten by the team behind jQuery’s ThemeRoller and jQuery UI websites, jQuery Visualize Plugin is an open source charting plugin for jQuery that uses HTML Canvas to draw a number of different chart types. The API is easy to get to grips with, and offers a useful number of hooks for adding your own interaction code, making it a good choice for designers looking to fully customise their user’s experience to match their website or web app. For example, you can feed in a CSV file of address strings and it will convert them to latitudes and longitudes and plot them on a map, but there are many other users. You may prefer free tools for creating infographics. The free account lets you create basic charts, while you can pay to upgrade for additional features and branding-free options. Words: Brian Suda and Sam Hampton-Smith
Brian Suda is a master informatician and author of Designing with Data, a practical guide to data visualisation. Google Charts
Google Charts has an excellent selection of tools availableThe seminal charting solution for much of the web, Google Charts is highly flexible and has an excellent set of developer tools behind it. This goes beyond pure data visualisation, but if you want to create something that stands on its own, it’s a fantastic resource and an info-junkie’s dream come true! 09. This library has a number of unique styles and swish animation effects, and is free to use (although donations are encouraged). This makes for a flexible approach that can easily be integrated within your own web site/app code, and is limited only by your own imagination. The timelines it outputs are beautiful and fully customisable, and are very easy to embed directly into your page. ZingChart
ZingChart lets you create HTML5 Canvas charts and moreZingChart is a JavaScript charting library and feature-rich API set that lets you build interactive Flash or HTML5 charts. 32. Better World Flux
Making the ugly beautiful — that’s Better World FluxOrientated towards making positive change to the world, Better World Flux has some lovely visualizations of some pretty depressing data. 36. Pulling on any one of the knobs affects data throughout all of the linked charts. Crossfilter
Crossfilter in action: by restricting the input range on any one chart, data is affected everywhere. 35. JavaScript InfoVis Toolkit
JavaScript InfoVis Toolkit includes a handy modular structureA fantastic library written by Nicolas Belmonte, the JavaScript InfoVis Toolkit includes a modular structure, allowing you to only force visitors to download what’s absolutely necessary to display your chosen data visualizations. You need to know and understand Python code, but beyond that it’s a quick and easy way to tweak variables and see results instantly. 16. The nodes in question could be people in a company, words in a document or passes in a football game, but the maths is the same. The results are only just short of magical. The core library itself is very small, but there are a wide range of plugins available that extend the functionality with specialist functionality such as animated markers, masks and heatmaps. 04. It enables you to write much simpler code which is in turn compiled into Java. Gephi, a graph-based visualiser and data explorer, can not only crunch large data sets and produce beautiful visualizations, but also allows you to clean and sort the data. 23. 18. It comes with a few nice additional features such as the ability to generate trend lines automatically, and interactive points that can be adjusted by the website visitor, updating the dataset accordingly. 26. We’ll be updating this post again in future, so please add your recommendations to the comments below! This will get your familiar with what is possible before stepping off and using the API directly for your own projects. This is another great example of a big company supporting research and sharing the results openly. JavaScript library Crossfilter can be both of these. 15. If you’re using publically available data, this offers a simple widget builder to make it really simple to get visualizations on your site. Further reading
A great Tumblr blog for visualization examples and inspiration: vizualize.tumblr.com
Nicholas Felton’s annual reports are now infamous, but he also has a Tumblr blog of great things he finds. From the guy who helped bring Processing into the world: benfry.com/writing
Stamen Design is always creating interesting projects: stamen.com
Eyeo Festival brings some of the greatest minds in data visualization together in one place, and you can watch the videos online. 25. Highcharts
Highcharts has a huge range of options availableHighcharts is a JavaScript charting library with a huge range of chart options available. 07. So to help you get started we’ve rounded up some of the most awesome data visualization tools available on the web. The basic library can also be extended with additional plugins, adding to its core functionality and offering some very useful data integration options. Each element can be clicked to reveal more in-depth information, making this a great way to give a big-picture view while still providing full detail. The output is rendered using SVG in modern browsers and VML in Internet Explorer. 27. It also includes some fantastic user interaction support. 31. 34. A statistical package used to parse large data sets, R is a very complex tool, and one that takes a while to understand, but has a strong community and package library, with more and more being produced. It offers a free version and a premium product, with the usual restrictions and limitations present. 08. Weka is a good tool for classifying and clustering data based on various attributes — both powerful ways to explore data — but it also has the ability to generate simple plots. 10. Excel comes as part of the commercial Microsoft Office suite, so if you don’t have access to it, Google’s spreadsheets — part of Google Docs and Google Drive — can do many of the same things. There is also a Processing.js project to make it easier for websites to use Processing without Java applets, plus a port to Objective-C so you can use it on iOS. Raphaël
This handy JavaScript library offers a range of data visualisation optionsThis handy JavaScript library offers a wide range of data visualization options which are rendered using SVG. Tangle
Tangle creates complex interactive graphics. Gephi
Gephi in action. CSV/JSON
CSV (Comma-Separated Values) and JSON (JavaScript Object Notation) aren’t actual visualization tools, but they are common formats for data. Charts can have interactive elements, and can pull data from Google Docs, Excel spreadsheets and other sources. It’s a very niche use case and a complex piece of software, but it puts you ahead of anyone else in the field who doesn’t know about this gem. One of the key features of this plugin is its focus on achieving ARIA support, making it friendly to screen-readers. It offers a simple toolset for building stunning data representations, as well as a platform to share your creations. One of the best ways to get your message across is to use a visualization to quickly draw attention to the key messages, and by presenting data visually it’s also possible to uncover surprising patterns and observations that wouldn’t be apparent from looking at stats alone. NodeBox
NodeBox is a quick, easy way for Python-savvy developers to create 2D visualisationsNodeBox is an OS X application for creating 2D graphics and visualizations. Dipity
Dipity has free and premium versions to suit your needsDipity allows you to create rich interactive timelines and embed them on your website. Visual.ly
Visual.ly makes data visualization as simple as it can beVisual.ly is a combined gallery and infographic generation tool. jpGraph
jpGraph is a PHP-based data visualization toolIf you need to generate charts and graphs server-side, jpGraph offers a PHP-based solution with a wide range of chart types. 33. 19. It’s highly customizable, works in all major browsers, and you can even pinch to zoom on mobile and tablet devices. D3.js
You can render some amazing diagrams with D3D3.js is a JavaScript library that uses HTML, SVG, and CSS to render some amazing diagrams and charts from a variety of data sources. 12. When you are trying to describe a complex interaction or equation, letting the reader tweak the input values and see the outcome for themselves provides both a sense of control and a powerful way to explore data. Flot
Create animated visualisations with this jQuery pluginFlot is a specialised plotting library for jQuery, but it has many handy features and crucially works across all common browsers including Internet Explorer 6. You can also play with the extensive demos using JSFiddle. 01.
