alt="How To Make Beautiful Charts And Infographics For Your Sites?" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21-500x342_c.jpg" />
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 title="KISS Metrics Infographics" href="http://blog.kissmetrics.com/infographics/" target="_blank" rel="nofollow">dozens of sexy infographics to build traffics and attract social media attentions. So are href="http://blog.okcupid.com/" target="_blank" rel="nofollow">OK Cupid, href="http://www.copyblogger.com/history-of-social-media/" target="_blank" rel="nofollow">CopyBlogger, and href="http://www.nytimes.com/interactive/2008/09/29/business/20080929-CONGRESS-VOTE-GRAPHIC.html" target="_blank" rel="nofollow">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 title="GitHub Open Refine" href="https://github.com/OpenRefine" target="_blank" rel="nofollow">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 title="Open Refine" href="http://openrefine.org/" target="_blank" rel="nofollow">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, title="Visual Literacy Periodic Table On Data Visualization" href="http://www.visual-literacy.org/" target="_blank" rel="nofollow">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.
style="text-align: center;">
style="text-align: center;" href="http://www.visual-literacy.org/periodic_table/periodic_table.html" target="_blank" rel="nofollow">
class="border aligncenter wp-image-367" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-5.jpg" alt="Periodic Table On Data Visualization" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-5.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-5-300x216.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
In case you were looking for non-traditional approaches, then you should check out title="Data Visualization: Modern Approaches" href="http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/" target="_blank" rel="nofollow">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
style="text-align: center;">
class="border aligncenter wp-image-375" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-9.jpg" alt="R and ggplot2" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-9.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-9-273x300.jpg 273w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.r-project.org/" target="_blank" rel="nofollow">R is a computer language and an environment for data manipulation, calculation and graphical display. href="http://ggplot2.org/" target="_blank" rel="nofollow">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, title="Learn R on WordPress" href="http://learnr.wordpress.com/" target="_blank" rel="nofollow">LearnR is a great blog for further reading (though the blog has not been updated for some time).
2. jqPlot
style="text-align: center;">
class="border aligncenter wp-image-376" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-10.jpg" alt="jqPlot" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-10.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-10-300x225.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.jqplot.com/" target="_blank" rel="nofollow">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
style="text-align: center;">
class="border aligncenter wp-image-371" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-7.jpg" alt="JP Graph" width="750" />
href="http://jpgraph.net/" target="_blank" rel="nofollow">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
style="text-align: center;">
class="border aligncenter wp-image-378" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-11.jpg" alt="JavaScript InfoVis Toolkit" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-11.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-11-300x168.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://thejit.org/" target="_blank" rel="nofollow">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
style="text-align: center;">
class="border aligncenter wp-image-380" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-12.jpg" alt="Many Eyes by IBM" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-12.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-12-300x193.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
title="IBM Many Eyes" href="http://www-958.ibm.com/software/analytics/manyeyes/" target="_blank" rel="nofollow">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
style="text-align: center;">
class="border aligncenter wp-image-383" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-15.jpg" alt="Google Chart" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-15.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-15-245x300.jpg 245w" sizes="(max-width: 600px) 100vw, 600px" />
href="https://developers.google.com/chart/" target="_blank" rel="nofollow">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
style="text-align: center;">
class="border aligncenter wp-image-393" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-22.jpg" alt="Axis " width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-22.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-22-260x300.jpg 260w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.axiis.org/index.html" target="_blank">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. Visme
class="border aligncenter wp-image-19814 size-large" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/visme-750x345.jpg" alt="visme" width="750" height="345" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/visme.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/visme-300x138.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />
href="http://www.visme.co/">Visme is a DIY platform that allows users to create professional presentations and infographics. More than 350,000 individuals and organizations (including users from big companies like IBM and Disney) utilize the tool to communicate better through interactive graphics and presentations.
2. Easel.ly
style="text-align: center;">
class="border aligncenter wp-image-373" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-8.jpg" alt="Easel.ly" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-8.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-8-282x300.jpg 282w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.easel.ly/" target="_blank" rel="nofollow">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.
3. Vizualize.me
style="text-align: center;">
class="border aligncenter wp-image-370" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-6.jpg" alt="VIsualize.me" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-6.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-6-300x236.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://vizualize.me/" target="_blank" rel="nofollow">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.
4. Hohli
class="border aligncenter wp-image-381" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13.jpg" alt="Hohli" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13.jpg 810w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13-300x218.jpg 300w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-13-750x547.jpg 750w" sizes="(max-width: 810px) 100vw, 810px" />
Need a simple chart builder? Then href="http://charts.hohli.com/" target="_blank" rel="nofollow">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.
5. Piktochart
style="text-align: center;">
class="border aligncenter wp-image-382" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-14.jpg" alt="Piktochart Infographic" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-14.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-14-300x288.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://piktochart.com/" target="_blank">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.
6. Infogr.am
style="text-align: center;">
class="border aligncenter wp-image-384" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-16.jpg" alt="Infogram" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-16.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-16-300x195.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://blog.infogr.am/" target="_blank" rel="nofollow">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.
href="http://lokeshdhakar.com/coffee-drinks-illustrated/" target="_blank" rel="nofollow">Coffee Drinks Illustrated
style="text-align: center;">
class="border aligncenter wp-image-386" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-17.jpg" alt="Coffee Drinks Illustrated" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-17.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-17-300x273.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />href="http://www.pcworld.com/article/190172/ss.html" target="_blank" rel="nofollow">Field Guide For Fan Boys
style="text-align: center;">
class="border aligncenter wp-image-387" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-18.jpg" alt="PC World Fan Boys Field Guide" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-18.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-18-300x296.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.mikewirthart.com/?projects=best-beer-in-america-map-2008" target="_blank" rel="nofollow">The Best Beer In America 2008
style="text-align: center;">
class="border aligncenter wp-image-388" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-19.jpg" alt="The Best Beer In America" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-19.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-19-300x174.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.behance.net/Gallery/Periodic-Table-of-Typefaces/193759" target="_blank" rel="nofollow">Periodic Tables Of Typefaces
style="text-align: center;">
class="border aligncenter wp-image-389" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-20.jpg" alt="Typefaces Table" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-20.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-20-300x200.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
href="http://www.nytimes.com/interactive/2008/09/29/business/20080929-CONGRESS-VOTE-GRAPHIC.html?_r=0" target="_blank" rel="nofollow">Bailout Tracker By NY Times
style="text-align: center;">
class="border aligncenter wp-image-391" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21.jpg" alt="Bailout Tracker" width="750" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21.jpg 600w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2013/03/0321-21-300x205.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" />
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 href="http://www.gapminder.org/data/" target="_blank" rel="nofollow">Gap Minder and href="http://www.betterworldflux.com/" target="_blank" rel="nofollow">Better World Flux; I have read a lot on informative sites/blogs like title="UX Booth" href="http://www.uxbooth.com/articles/" target="_blank">UX Booth (not entirely related to data visualization, but there are plenty of useful articles on how visualizations improve web user experience), href="http://dd.dynamicdiagrams.com/" target="_blank" rel="nofollow">Dynamic Diagrams, href="http://flowingdata.com/" target="_blank" rel="nofollow">Flowing Data, as well as title="Boxes And Arrows" href="http://boxesandarrows.com/" target="_blank">Boxes And Arrows; and I deeply admire all the stunning works displayed on href="http://www.styleandflow.com/" target="_blank" rel="nofollow">Style And Flow, href="http://pinterest.com/rtkrum/cool-infographics-gallery/" target="_blank" rel="nofollow">Randy’s Pinterest board, href="http://chartporn.org/" target="_blank" rel="nofollow">Chart Porn, and href="http://www.coolinfographics.com/" target="_blank" rel="nofollow">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 href="http://www.webhostingsecretrevealed.net/blog/featured-articles/creating-and-using-simple-infographics-to-increase-your-site-traffic/">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.
Page 21 – Web Hosting Secret Revealed
