Originally published: Aug 14, 2013
Article originally published at Creative Bloq on September 17, 2012.
One of the most common questions I get asked is how to get started with data visualizations. Beyond following blogs, you need to practise – and to practise, you need to understand the tools available. In this article, I want to introduce you to 20 different tools for creating visualizations: from simple charts to complex graphs, maps and infographics. Almost everything here is available for free, and some you have probably installed already.
At the entry level, we'll be looking at unexpected uses for familiar tools. You might not think of Excel as a visualization package, for example – but it's capable of surprisingly complex results. If you are just getting started, these tools are musts to understand. If you deal with visualizations every day, you'll quickly find yourself advancing beyond them, but not everyone will, so you'll always be dealing with data coming in from sources you'd rather not deal with.
It isn't graphically flexible, but Excel is a good way to explore data: for example, by creating 'heat maps' like this one
You can actually do some pretty complex things with Excel, from 'heat maps' of cells to scatter plots. As an entry-level tool, it can be a good way of quickly exploring data, or creating visualizations for internal use, but the limited default set of colours, lines and styles make it difficult to create graphics that would be usable in a professional publication or website. Nevertheless, as a means of rapidly communicating ideas, Excel should be part of your toolbox.
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. Google 'eats its own dog food', so the spreadsheet can generate the same charts as the Google Chart API. This will get your familiar with what is possible before stepping off and using the API directly for your own projects.
However, the API has just about everything but the kitchen sink, from bar charts and line graphs to maps and even QR codes. You will probably find the right visualization for your needs as long as you are comfortable with the Google look and not in need of extreme customisation. As a jumping-off point, it is a great tool to know how to use.
The portion for static images has been deprecated, but the Google Chart API is a good way to create dynamic visualizations
Flot is a great library for line graphs and bar charts. It works in all browsers that support canvas – which means most of the popular ones, with some extra libraries to get canvas to work as VML in older browsers. It's a jQuery library, so if you're already familiar with jQuery, it's easy to manipulate the calls back, styling and behaviour of the graphics.
The nice thing about Flot is that you have access to plenty of callback functions so you can run your own code and style the results when readers hover, click, mouseout, and other common events. This gives you much more flexibility than other charting packages, but there is a steeper learning curve. Flot is also limited to line and bar charts. It doesn't have as many options as other libraries, but it performs common tasks really well.
It's specialised on line and bar charts, but if you know jQuery, Flot is a powerful option
The website includes plenty of demos to show how easily Raphaël can create common charts and graphs but, because it can also render arbitrary SVG, it has the ability to create some very complex visualizations for which you might otherwise have to resort to other vector tools such as Illustrator or Inkscape.
Raphaël is a great way to create vector-based charts: slower than raster-based tools, but it's capable of complex results
D3 is capable of creating very complex output – but it's best saved for special cases, not everyday use
If you are in need of an infographic rather than a data visualization, there is a new crop of tools out there to help. Visual.ly is probably the most popular of these. Although primarily an online marketplace for infographic designers, its Create option lets you pick a template, connect it to your Facebook or Twitter account and get some nice cartoon graphics back. While the results are currently limited, it's a useful source of inspiration – both good and bad – and a site I expect to see grow in future, accepting more formats and creating more interesting graphics.
Visual.ly acts both as an online marketplace and simple creation tool for infographics
What happens when data visualizations become so interactive they themselves become GUI controls? As online visualizations evolve, buttons, drop-downs and sliders are morphing into more complex interface elements, such as little handles that let you manipulate ranges, changing the input parameters and the data at the same time. Controls and content are becoming one. The following tools will help you explore the possibilities this offers.
Crossfilter in action: by restricting the input range on any one chart, data is affected everywhere. This is a great tool for dashboards or other interactive tools with large volumes of data behind them
Tangle creates complex interactive graphics. Pulling on any one of the knobs affects data throughout all of the linked charts. This creates a real-time feedback loop, enabling you to understand complex equations in a more intuitive way
Mapping used to be a really hard task on the web. Then Google Maps came along and blew away every preconceived notion of how an online map should work. Soon after, Google released its Maps API, which allowed any developer to embed maps in their own sites.
Since then, the market has matured a great deal. There are now several options out there if you are looking to embed custom mapping solutions in your own data visualization project, and knowing when to choose one over the others is a key business decision. Sure, you can probably shoehorn everything you need into any of these maps, but it's best not to have a hammer and view every problem as a nail.
Modest Maps is a tiny mapping library. Weighing in at only 10kB, it is the smallest of options discussed here. This makes it very limited in its basic form – but don't let that fool you: with a few extensions, such as Wax, you can really make this library sing. This is a product of Stamen, Bloom and MapBox, so you know it has an interesting track record.
Teamed with additional libraries, such as MapBox's Wax (pictured), the tiny Modest Maps becomes a powerful tool
Brought to you by the CloudMade team, Leaflet is another tiny mapping framework, designed to be small and lightweight enough to create mobile-friendly pages. Both Leaflet and Modest Maps are open source projects, which makes them ideal for using in your own sites: with a strong community backing them, you know they won't disappear any time soon.
Polymaps is another mapping library, but it is aimed more squarely at a data visualization audience. Offering a unique approach to styling the the maps it creates, analagous to CSS selectors, it's a great resource to know about.
Aimed more at specialist data visualisers, the Polymaps library creates image and vector-tiled maps using SVG
OpenLayers is probably the most robust of these mapping libraries. The documentation isn't great and the learning curve is steep, but for certain tasks nothing else can compete. When you need a very specific tool no other library provides, OpenLayers is always there.
It isn't easy to master, but OpenLayers is arguably the most complete, robust mapping solution discussed here
Kartograph's tag line is 'rethink mapping' and that is exactly what its developers are doing. We're all used to the Mercator projection, but Kartograph brings far more choices to the table. 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.
Kartograph's projections breathe new life into our standard slippy maps
Finally, CartoDB is a must-know site. The ease with which you can combine tabular data with maps is second to none. 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. It's free for up to five tables; after that, there are monthly pricing plans.
CartoDB provides an unparalleled way to combine maps and tabular data to create visualizations
One recent trend in web development is to merge symbol fonts with font embedding to create beautifully vectorised icons. They scale and print perfectly, and look great on newer Retina devices too. A few of these fonts, such as FF Chartwell and Chartjunk, have been specially crafted for the purpose of displaying charts and graphs. They have the usual problem of OpenType not being fully supported in all browsers, but they're something to consider in the near future.
If you're getting serious about data visualizations, you need to move beyond simple web-based widgets onto something more powerful. This could mean desktop applications and programming environments.
Processing has become the poster child for interactive visualizations. It enables you to write much simpler code which is in turn compiled into Java. 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. It is a desktop application, but can be run on all platforms, and given that it is now several years old, there are plenty of examples and code from the community.
Processing provides a cross-platform environment for creating images, animations, and interactions
NodeBox is an OS X application for creating 2D graphics and 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. It's similar to Processing, but without all the interactivity.
NodeBox is a quick, easy way for Python-savvy developers to create 2D visualizations
At the opposite end of the spectrum from Excel are professional data-analysis tools. If you are serious about data visualization, you need to be at least aware of, if not proficient in, some of these. Industry-standard tools such as SPSS and SAS require expensive subscriptions, so only large institutions and academia have access to them, but there are several free alternatives with strong communities. The open-source software is just as good, and the plug-ins and support are better.
How many other pieces of software have an entire search engine dedicated to them? 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. The learning curve is one of the steepest of any of these tools listed here, but you must be comfortable using it if you want to get to this level.
A powerful free software environment for statistical computing and graphics, R is the most complex of the tools listed here
When you get deeper into being a data scientist, you will need to expand your capabilities from just creating visualizations to data mining. 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.
A collection of machine-learning algorithms for data-mining tasks, Weka is a powerful way to explore data
When 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. 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. 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. 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.
Gephi in action. Coloured regions represent clusters of data that the system is guessing are similar
There's more to visualization besides using the right tool. Brian Suda's UIE Virtual Seminar, Data Visualizations That Pack a Punch, will show you how to increase the lifespan of your visualization and make your data visualizations more powerful.
Brian Suda's work with companies such as PriceWaterhouseCoopers is defining just how powerful great data visualizations can be – especially when they're tied to marketing or social-media campaigns aimed at raising awareness, conveying meaning, and getting users to interact.
Have you created some amazing visualizations? What tools did you use? Share them with us at the UIE Brain Sparks blog.
Read related articles: