How To Make Beautiful Charts And Infographics For Your Sites?

Data visualization is an important part of web marketing strategies these days – charts, infographics, or even explainer videos – bloggers and web marketers are doing everything they can to feed users’ love in graphics with meaningful data.

KissMetrics, for example, developed dozens of sexy infographics to build traffics and attract social media attentions. So are OK Cupid, CopyBlogger, and The New York Times.

With that being said, we will be looking into some of the best resources and tools for data visualization today. No matter you are a casual blogger who simply wants to create some beautiful infographics occasionally or a career designer who need to dig deeper into this field; I am sure you will find this post useful.

Information Architecture

In general, a good piece of data visualization consistes of three main elements: Meaningful data, proper information designs, and beautiful graphics.

Bear in mind that although infographics and charts tend to attract attention from the blogsphere and social media users; they should do more than just brand promotion – Infographics and charts are suppose to deliver boring and messy data in a user-friendly manner in the first place.

Hence, before creating a graph or an infographic, you’ll need to 1) Organize, filter, and refine your data; 2) Decide on how to present your data (aka, data visualization designs).

OpenRefine (ex Google Refine)

Enter OpenRefine – A powerful data mining tool that saves us from organizing our data row by row on Excel Worksheet. Formerly known as Google Refine (and Freebase Gridworks), this tool helps users to explore and clean up data, transforming the data from one format into another, and extending it with various web services.

In case you are working with some massive unordered data, OpenRefine is definitely must have in your toolkit. The tool is currently hosted on GitHub, you can visit this page for all the necessary info and helps. For further followup and latest news, You should also check out its newly launched website at http://openrefine.org/

Presenting Your Data

Once you are ready with your data, it’s time to decide how you are going to present it to the viewers.

There are countless approaches in getting this done: Pie chart, diagram, line graph, histograms, heat map, flow chart, periodic table, and so on.  Each of these approaches fits perfectly for certain type of data (and stinks badly it’s misused).

How should you present your data, so that your statistic is beautiful, eye-catching, and easy to understand?

On this issue, Visual Literacy built an extremely handy periodic table on all the options you can use to visualize your data (view below). Note that the periodic table displays a number of interesting examples when you roll over your mouse, so be sure that you view the actual table on the site.

Periodic Table On Data Visualization

In case you were looking for non-traditional approaches, then you should check out this awesome article on Smashing Magazine. The post is published some time ago but still I find it very helpful.

Advance Charting Tools

As soon as you are done with information architecture, it’s time for some real production. Making a good-looking chart out of raw data is never an easy task, fortunately there are countless tools to get the job done.

Yes, countless number of tools for data visualization. There are comprehensive tools that generates interactive graphics out of complex data; there are also easy web applications that do nothing but generate simple 2-axis line graphs.

For practical reason, we are going to look into both sides and list out multiple graphic tools for both advance and casual users.

First, let’s look at some of the advance stuffs.

1. ggPlot2 and R

R and ggplot2

R is a computer language and an environment for data manipulation, calculation and graphical display. ggplot2, on the other hand, is a plotting system for R that helps produce complex multi-layer graphics. The HeatMap above, for example, is built using ggplot2 and R. If you are keen on learning R and ggplot2, LearnR is a great blog for further reading (though the blog has not been updated for some time).

2. jqPlot

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts. The tool comes with some nice features such as generating interactive points that can be adjusted by users on web browsers. However, it’s worth noting that this tool is not thoroughly tested and might not be supported by certain web browsers – namely, Chrome and IE below 7.

3. JP Graph

JP Graph

JP Graph is a PHP-driven charting tool that support various plot types. In case you are writing a PHP program that needs a graph creating library, this is something that you should look into. I wouldn’t say JP Graph is an easy tool for starters but the tool (or, PHP library) does come very helpful when you need to generate graphs and charts from your web server. JP Graph is free for non commercial use and you will need a web server that supports PHP 4.3.x or above.

4. JS InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit is a library developed by Nicolas Garcia Belmont. The library comes with a wide range of visualization choices and it’s completely free to use.

 5. Many Eyes

Many Eyes by IBM

Many Eyes is a free tool that enables a user to create visualizations from almost any kind of data set. Hosted on IBM servers, Many Eyes does more than just data visualization – it allows users to upload their own data set as well as  generate new visualization model based on any data stored in the server.

6. Google Chart

Google Chart

Google Chart is free, powerful, flexible, and is supported by lots of other developer tools. Charting on Google Chart is purely based on HTML5/SVG technology; the tool helps create charts in various formats with beautiful animation and interactive controls.

7. Axis

Axis

Axiis is an open source data visualization framework developed by Tom Gonzalez and Michael VanDaniker. The tool is specially designed for beginner and expert developers alike. Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations.

Easy Chart And Infographic Tools

Admittedly, most bloggers (myself included) do not need comprehensive charting tools above for their regular blogging operations. More often, all we need is an easy web application or a simple tool to get the job done quickly.

With that being said, here is the list of creation tools that require very little learning efforts and user friendly.

1. Easel.ly

Easel.ly

Easel.ly helps create and share visual data easily online. The web app comes in a simple interface with some preset templates and drag-and-drop features. Although Easel.ly is still currently in beta mode, but it already has more than 130,000 users-created visuals on its server.

2. Vizualize.me

VIsualize.me

Vizualize.me helps create beautiful infographics about individuals (yes, hence the name Vizualize Me). It’s a fun tool to play around with and it creates beautiful resume or profile in just a few clicks. In case you are on LinkedIn, you should really try this out – the tool is able to link with your LinkedIn profile and generates stunning graphics based on your data.

3. Hohli

Hohli

Need a simple chart builder? Then Hohli is the place to visit. This web applications support various types of charts in twelve different sizes – all users need to go is to key in the data and design details.

4. Piktochart

Piktochart Infographic

Piktochart is a template-based infographic tools that help non designers to create beautiful graphics and charts. The tool supports drag-and-drop features and it provides a wide selections in preset templates, icones, vectors, and images. If you are looking for an easy graphic tool and do not mind paying a small fees for the service, Piktochart is definitely one of your best choices.

5.  Infogr.am

Infogram

Infogr.am is an user-friendly web app for making infographics. Create interactive infographics and charts with a few clicks, place them in your article, blog post or share with friends. With some 200 000 infographics created and 10 000 new sign-ups a week it’s the fastest growing data visualization community in the world.

Inspiring Examples Of Data Visualizations

So are you ready to create some of your own infographics? Wait. We still have a little more to go here.

Here are some of the most popular infographics and charts captured from the Internet. I am pretty sure that you have seen some of them on social media networks in the past – which proves that pretty graphics with meaningful data sticks!

Also, there are reasons why infographics galleries are so heavy trafficked these days. By referring on others’ works, we get to learn what works well with the audiences. What is the average size for a popular infographic? What type of topic is most welcomed by the viewers?Should you include as many data as you can into your charts? How many bullet points should you cover in your infographics? What makes this infographic popular? These are the questions to ask when you are browsing around the samples.

Coffee Drinks Illustrated

Coffee Drinks Illustrated

Field Guide For Fan Boys 

PC World Fan Boys Field Guide

The Best Beer In America 2008

The Best Beer In America

Periodic Tables Of Typefaces

Typefaces Table

Bailout Tracker By NY Times

Bailout Tracker

Digging Deeper

I bumped into dozens of interesting blogs and websites related to our topic when I was doing my research for this post. Seriously, there are so much to read and learn and play with! I never knew there are so much data available freely on Gap Minder and Better World Flux; I have read a lot on informative sites/blogs like UX Booth (not entirely related to data visualization, but there are plenty of useful articles on how visualizations improve web user experience), Dynamic DiagramsFlowing Data, as well as Boxes And Arrows; and I deeply admire all the stunning works displayed on Style And Flow,  Randy’s Pinterest board,  Chart Porn, and Cool Infographics.

If you are merely starting up on data visualization, I highly recommend you to visit the sites and blogs listed above. If you have not leverage the power of data visualizations in your marketing campaign, now is the time to start. And, in case you think I’ve missed out some important tools or resources in this post (which I am certain that there are many), please leave your suggestion in the comment box below.

  • Pingback: [Infographic] Post-Penguin Google Analysis | Web Revenue

  • http://andydiericks.com/ Andy Diericks

    Hi Jerry. a great post with a nice list of tools! Page bookmarked!

    • http://www.webhostingsecretrevealed.net/ Jerry Low

      Glad that you love the post! Do show us your infographic work created using those tools in future! :)