>

DESIGN HOW TO

20 superb data visualisation tools for

web designers
Sep 16, 2012 00:00 am
>Comments (http://www.creativebloq.com/web-design/top-data-visualisation-tools9122832#disqus_thread)
2.4k 432
137
Tweet

Like

From simple charts to complex maps and infographics, Brian

x
Weusecookiesonthiswebsite.Byusingthissite,youagree
Suda's
round-up
of
the
best

and
mostly
free

tools
has
thatwemaystoreandaccesscookiesonyourdevice.Findout
moreandsetyourpreferenceshere
everything
you need to bring your data to life.
(http://www.futureplc.com/cookiespolicy/)

1,763
Share

NOTE:You'llfindanupdatedversionofthisarticlehere
(http://www.creativebloq.com/designtools/datavisualization
712402)
OneofthemostcommonquestionsIgetaskedishowtogetstarted
withdatavisualisations.Beyondfollowingblogs,youneedtopractise
andtopractise,youneedtounderstandthetoolsavailable.Inthis
article,Iwanttointroduceyouto20differenttoolsforcreating
visualisations:fromsimplechartstocomplexgraphs,mapsand
infographics.Almosteverythinghereisavailableforfree,andsomeyou
haveprobablyinstalledalready.

Entry-level tools
Attheentrylevel,we'llbelookingatunexpectedusesforfamiliartools.
YoumightnotthinkofExcelasavisualisationpackage,forexample
butit'scapableofsurprisinglycomplexresults.Ifyouarejustgetting
started,thesetoolsaremuststounderstand.Ifyoudealwith
visualisationseveryday,you'llquicklyfindyourselfadvancingbeyond
them,butnoteveryonewill,soyou'llalwaysbedealingwithdata
cominginfromsourcesyou'drathernotdealwith.

01. Excel

(http://office.microsoft.com/engb/excel/)
> It isn't graphically flexible, but Excel is a good way to explore data: for

example, by creating 'heat maps' like this one

YoucanactuallydosomeprettycomplexthingswithExcel
(http://office.microsoft.com/engb/excel/),from'heatmaps'ofcellsto
scatterplots.Asanentryleveltool,itcanbeagoodwayofquickly
exploringdata,orcreatingvisualisationsforinternaluse,butthe
limiteddefaultsetofcolours,linesandstylesmakeitdifficulttocreate
graphicsthatwouldbeusableinaprofessionalpublicationorwebsite.
Nevertheless,asameansofrapidlycommunicatingideas,Excelshould
bepartofyourtoolbox.
ExcelcomesaspartofthecommercialMicrosoftOfficesuite
(http://office.microsoft.com/engb/),soifyoudon'thaveaccesstoit,
Google'sspreadsheetspartofGoogleDocs(http://docs.google.com)
andGoogleDrive(http://drive.google.com)candomanyofthesame
things.Google'eatsitsowndogfood',sothespreadsheetcangenerate
thesamechartsastheGoogleChartAPI
(https://developers.google.com/chart/).Thiswillgetyourfamiliarwith
whatispossiblebeforesteppingoffandusingtheAPIdirectlyforyour
ownprojects.

02. CSV/JSON
CSV(http://en.wikipedia.org/wiki/Commaseparated_values)
(CommaSeparatedValues)andJSON(http://www.json.org/)
(JavaScriptObjectNotation)aren'tactualvisualisationtools,butthey
arecommonformatsfordata.You'llneedtounderstandtheirstructures
andhowtogetdatainoroutofthem.Allofthefollowingtoolkitsaccept
atleastoneofthetwoformatsasinput.

Online visualisations
03. Google Chart API
Theportionofthetoolsetforstaticimageshasbeendeprecated
(https://developers.google.com/chart/image/),sotheGoogleChart
Tools(https://developers.google.com/chart/)sitenowonlyofferstools
fordynamiccharts.Theyarerobustandworkonallbrowsers
supportingSVG,canvasandVML,butonebigproblemisthattheyare
generatedontheclientside,whichcreatesproblemsfordeviceswithout
JavaScript,offlineuseorjustwhensavingindifferentformats.Static
imagesdidn'thavethesameissues,soI'msorrytoseethemgo.
However,theAPIhasjustabouteverythingbutthekitchensink,from
barchartsandlinegraphstomapsandevenQRcodes.Youwill
probablyfindtherightvisualisationforyourneedsaslongasyouare
comfortablewiththeGooglelookandnotinneedofextreme
customisation.Asajumpingoffpoint,itisagreattooltoknowhowto
use.

(http://developers.google.com/chart/)
> The portion for static images has been deprecated, but the Google Chart

API is a good way to create dynamic visualisations

04. Flot
Flot(http://www.flotcharts.org/)isagreatlibraryforlinegraphsand
barcharts.Itworksinallbrowsersthatsupportcanvaswhichmeans
mostofthepopularones,withsomeextralibrariestogetcanvasto
workasVMLinolderbrowsers.It'sajQuerylibrary,soifyou'realready
familiarwithjQuery,it'seasytomanipulatethecallsback,stylingand
behaviourofthegraphics.
ThenicethingaboutFlotisthatyouhaveaccesstoplentyofcallback
functionssoyoucanrunyourowncodeandstyletheresultswhen
readershover,click,mouseout,andothercommonevents.Thisgives
youmuchmoreflexibilitythanotherchartingpackages,butthereisa
steeperlearningcurve.Flotisalsolimitedtolineandbarcharts.It
doesn'thaveasmanyoptionsasotherlibraries,butitperforms
commontasksreallywell.

(http://www.flotcharts.org/)
> It's specialised on line and bar charts, but if you know jQuery, Flot is a

powerful option

05. Raphal
Raphal(http://raphaeljs.com/)isanothergreatJavaScriptlibraryfor
creatingchartsandgraphs.Thebiggestdifferencetootherlibrariesis
thatitfocusesonSVGandVMLasoutput.Thishasprosandcons.Since
SVGisavectorformat,theresultslookgreatatanyresolutionbutsince
itcreatesaDOMnodeforeachelement,itcanbeslowerthancreating
rasterisedimagesviacanvas.However,theupsideisthatyoucan
interactwitheachDOMelementandattachevents,justlikeHTML.
ThewebsiteincludesplentyofdemostoshowhoweasilyRaphalcan
createcommonchartsandgraphsbut,becauseitcanalsorender
arbitrarySVG,ithastheabilitytocreatesomeverycomplex
visualisationsforwhichyoumightotherwisehavetoresorttoother
vectortoolssuchasIllustrator
(http://www.adobe.com/uk/products/illustrator.html)orInkscape
(http://inkscape.org/).

(http://raphaeljs.com/)
> Raphal is a great way to create vector-based charts: slower than raster-

based tools, but it's capable of complex results

06. D3
D3(http://d3js.org/)(DataDrivenDocuments)isanotherJavaScript
librarythatsupportsSVGrendering.Theexamplesgobeyondthe
simplebarchartsandlinegraphstomuchmorecomplicatedVoronoi
diagrams,treemaps,circularclustersandwordclouds.It'sanother
greattooltohaveinyourtoolbox,butIwouldn'talwaysrecommendD3
asthegotolibrary.It'sgreatforcreatingverycomplicatedinteractions
butjustbecauseyoucan,itdoesn'tmeanyoushould.Knowingwhen
tostaysimpleisabigpartofchoosingtherightvisualisationtool.

(http://d3js.org/)
> D3 is capable of creating very complex output but it's best saved for

special cases, not everyday use

07. Visual.ly
Ifyouareinneedofaninfographicratherthanadatavisualisation,
thereisanewcropoftoolsouttheretohelp.Visual.ly(http://visual.ly/)
isprobablythemostpopularofthese.Althoughprimarilyanonline
marketplaceforinfographicdesigners,itsCreateoptionletsyoupicka
template,connectittoyourFacebookorTwitteraccountandgetsome
nicecartoongraphicsback.Whiletheresultsarecurrentlylimited,it'sa
usefulsourceofinspirationbothgoodandbadandasiteIexpectto
seegrowinfuture,acceptingmoreformatsandcreatingmore
interestinggraphics.

(http://visual.ly/)
> Visual.ly acts both as an online marketplace and simple creation tool for

infographics

Interactive GUI controls

Whathappenswhendatavisualisationsbecomesointeractivethey
themselvesbecomeGUIcontrols?Asonlinevisualisationsevolve,
buttons,dropdownsandslidersaremorphingintomorecomplex
interfaceelements,suchaslittlehandlesthatletyoumanipulateranges,
changingtheinputparametersandthedataatthesametime.Controls
andcontentarebecomingone.Thefollowingtoolswillhelpyouexplore
thepossibilitiesthisoffers.

08. Crossfilter
Aswebuildmorecomplextoolstoenableclientstowadethroughtheir
data,wearestartingtocreategraphsandchartsthatdoubleas
interactiveGUIwidgets.JavaScriptlibraryCrossfilter
(http://square.github.com/crossfilter/)canbebothofthese.Itdisplays
data,butatthesametime,youcanrestricttherangeofthatdataand
seeotherlinkedchartsreact.

(http://square.github.com/crossfilter/)
> 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

09. Tangle
ThelinebetweencontentandcontrolblursevenfurtherwithTangle
(http://worrydream.com/Tangle/).Whenyouaretryingtodescribea
complexinteractionorequation,lettingthereadertweaktheinput
valuesandseetheoutcomeforthemselvesprovidesbothasenseof
controlandapowerfulwaytoexploredata.JavaScriptlibraryTangleis
asetoftoolstodojustthis.Draggingonvariablesenablesyouto
increaseordecreasetheirvaluesandseeanaccompanyingchartupdate
automatically.Theresultsareonlyjustshortofmagical.

(http://worrydream.com/Tangle/)

> Tangle creates complex interactive graphics. Pulling on any one of the

knobs affects data throughout all of the linked charts. This creates a realtime feedback loop, enabling you to understand complex equations in a
more intuitive way

Mapping
Mappingusedtobeareallyhardtaskontheweb.ThenGoogleMaps
(http://maps.google.co.uk/)camealongandblewawayevery
preconceivednotionofhowanonlinemapshouldwork.Soonafter,
GooglereleaseditsMapsAPI(https://developers.google.com/maps/),
whichallowedanydevelopertoembedmapsintheirownsites.
Sincethen,themarkethasmaturedagreatdeal.Therearenowseveral
optionsoutthereifyouarelookingtoembedcustommappingsolutions
inyourowndatavisualisationproject,andknowingwhentochooseone
overtheothersisakeybusinessdecision.Sure,youcanprobably
shoehorneverythingyouneedintoanyofthesemaps,butit'sbestnotto
haveahammerandvieweveryproblemasanail.

10. Modest Maps

ModestMaps(http://modestmaps.com/)isatinymappinglibrary.
Weighinginatonly10kB,itisthesmallestofoptionsdiscussedhere.
Thismakesitverylimitedinitsbasicformbutdon'tletthatfoolyou:
withafewextensions,suchasWax(http://mapbox.com/wax/),youcan
reallymakethislibrarysing.ThisisaproductofStamen
(http://stamen.com/),Bloom(http://bloom.io/)andMapBox
(http://mapbox.com/),soyouknowithasaninterestingtrackrecord.

(http://modestmaps.com/)
> Teamed with additional libraries, such as MapBox's Wax (pictured), the

tiny Modest Maps becomes a powerful tool

11. Leaflet
BroughttoyoubytheCloudMade(http://cloudmade.com)team,
Leaflet(http://leaflet.cloudmade.com/)isanothertinymapping
framework,designedtobesmallandlightweightenoughtocreate
mobilefriendlypages.BothLeafletandModestMapsareopensource
projects,whichmakesthemidealforusinginyourownsites:witha
strongcommunitybackingthem,youknowtheywon'tdisappearany
timesoon.

(http://leaflet.cloudmade.com/)
> Leaflet is a small, lightweight JavaScript library ideal for mobile-friendly

projects

12. Polymaps
Polymaps(http://polymaps.org/)isanothermappinglibrary,butitis
aimedmoresquarelyatadatavisualisationaudience.Offeringaunique
approachtostylingthethemapsitcreates,analagoustoCSSselectors,
it'sagreatresourcetoknowabout.

(http://polymaps.org/)
> Aimed more at specialist data visualisers, the Polymaps library creates

image and vector-tiled maps using SVG

13. OpenLayers
OpenLayers(http://openlayers.org/)isprobablythemostrobustof
thesemappinglibraries.Thedocumentationisn'tgreatandthelearning
curveissteep,butforcertaintasksnothingelsecancompete.Whenyou
needaveryspecifictoolnootherlibraryprovides,OpenLayersisalways
there.

(http://openlayers.org/)
> It isn't easy to master, but OpenLayers is arguably the most complete,

robust mapping solution discussed here

14. Kartograph
Kartograph(http://kartograph.org/)'staglineis'rethinkmapping'and
thatisexactlywhatitsdevelopersaredoing.We'reallusedtothe
Mercatorprojection
(http://en.wikipedia.org/wiki/Mercator_projection),butKartograph
bringsfarmorechoicestothetable.Ifyouaren'tworkingwith
worldwidedata,andcanplaceyourmapinadefinedbox,Kartograph
hastheoptionsyouneedtostandoutfromthecrowd.

(http://kartograph.org/)

> Kartograph's projections breathe new life into our standard slippy maps

15. CartoDB
Finally,CartoDB(http://cartodb.com/)isamustknowsite.Theease
withwhichyoucancombinetabulardatawithmapsissecondtonone.
Forexample,youcanfeedinaCSVfileofaddressstringsanditwill
convertthemtolatitudesandlongitudesandplotthemonamap,but
therearemanyotherusers.It'sfreeforuptofivetablesafterthat,there
aremonthlypricingplans.

(http://cartodb.com/)
> CartoDB provides an unparalleled way to combine maps and tabular data

to create visualisations

Charting fonts
Onerecenttrendinwebdevelopmentistomergesymbolfontswithfont
embeddingtocreatebeautifullyvectorisedicons.Theyscaleandprint
perfectly,andlookgreatonnewerRetinadevicestoo.Afewofthese
fonts,suchasFFChartwell(http://www.fontfont.com/howtouseff
chartwell)andChartjunk(http://nsfmc.github.com/chartjunk/),have
beenspeciallycraftedforthepurposeofdisplayingchartsandgraphs.
TheyhavetheusualproblemofOpenTypenotbeingfullysupportedin
allbrowsers,butthey'resomethingtoconsiderinthenearfuture.

Getting serious
Ifyou'regettingseriousaboutdatavisualisations,youneedtomove
beyondsimplewebbasedwidgetsontosomethingmorepowerful.This
couldmeandesktopapplicationsandprogrammingenvironments.

16. Processing
Processing(http://processing.org/)hasbecometheposterchildfor
interactivevisualisations.Itenablesyoutowritemuchsimplercode
whichisinturncompiledintoJava.ThereisalsoaProcessing.js
(http://processingjs.org/)projecttomakeiteasierforwebsitestouse
ProcessingwithoutJavaapplets,plusaporttoObjectiveCsoyoucan
useitoniOS.Itisadesktopapplication,butcanberunonallplatforms,
andgiventhatitisnowseveralyearsold,thereareplentyofexamples
andcodefromthecommunity.

(http://www.processing.org)
> Processing provides a cross-platform environment for creating images,

animations, and interactions

17. NodeBox

NodeBox(http://nodebox.net/)isanOSXapplicationforcreating2D
graphicsandvisualisations.YouneedtoknowandunderstandPython
code,butbeyondthatit'saquickandeasywaytotweakvariablesand
seeresultsinstantly.It'ssimilartoProcessing,butwithoutallthe
interactivity.

(http://nodebox.net/)
> NodeBox is a quick, easy way for Python-savvy developers to create 2D

visualisations

Pro tools
AttheoppositeendofthespectrumfromExcelareprofessionaldata
analysistools.Ifyouareseriousaboutdatavisualisation,youneedtobe
atleastawareof,ifnotproficientin,someofthese.Industrystandard
toolssuchasSPSS(http://www01.ibm.com/software/analytics/spss/)
andSAS(http://www.sas.com/)requireexpensivesubscriptions,so
onlylargeinstitutionsandacademiahaveaccesstothem,butthereare
severalfreealternativeswithstrongcommunities.Theopensource
softwareisjustasgood,andthepluginsandsupportarebetter.

18. R

Howmanyotherpiecesofsoftwarehaveanentiresearchengine
(http://www.rseek.org/)dedicatedtothem?Astatisticalpackageused
toparselargedatasets,R(http://www.rproject.org/)isaverycomplex
tool,andonethattakesawhiletounderstand,buthasastrong
communityandpackagelibrary,withmoreandmorebeingproduced.
Thelearningcurveisoneofthesteepestofanyofthesetoolslistedhere,
butyoumustbecomfortableusingitifyouwanttogettothislevel.

(http://www.rproject.org/)
> A powerful free software environment for statistical computing and

graphics, R is the most complex of the tools listed here

19. Weka
Whenyougetdeeperintobeingadatascientist,youwillneedtoexpand
yourcapabilitiesfromjustcreatingvisualisationstodatamining.Weka
(http://www.cs.waikato.ac.nz/ml/weka/)isagoodtoolforclassifying
andclusteringdatabasedonvariousattributesbothpowerfulwaysto
exploredatabutitalsohastheabilitytogeneratesimpleplots.

(http://www.cs.waikato.ac.nz/ml/weka/)
> A collection of machine-learning algorithms for data-mining tasks, Weka

is a powerful way to explore data

20. Gephi
Whenpeopletalkaboutrelatedness,socialgraphsandcorelations,they
arereallytalkingabouthowtwonodesarerelatedtooneanother
relativetotheothernodesinanetwork.Thenodesinquestioncouldbe
peopleinacompany,wordsinadocumentorpassesinafootballgame,
butthemathsisthesame.Gephi(http://gephi.org/),agraphbased
visualiseranddataexplorer,cannotonlycrunchlargedatasetsand
producebeautifulvisualisations,butalsoallowsyoutocleanandsort
thedata.It'saverynicheusecaseandacomplexpieceofsoftware,but
itputsyouaheadofanyoneelseinthefieldwhodoesn'tknowaboutthis
gem.

(http://gephi.org/)
> Gephi in action. Coloured regions represent clusters of data that the

system is guessing are similar

Further reading
AgreatTumblrblogforvisualisationexamplesandinspiration:
vizualize.tumblr.com(http://vizualize.tumblr.com)
NicholasFelton'sannualreportsarenowinfamous,buthealsohasa
Tumblrblog(http://feltron.tumblr.com)ofgreatthingshefinds.
FromtheguywhohelpedbringProcessingintotheworld:
benfry.com/writing(http://benfry.com/writing/)
StamenDesignisalwayscreatinginterestingprojects:stamen.com
(http://stamen.com)
EyeoFestival(http://eyeofestival.com)bringssomeofthegreatest
mindsindatavisualisationtogetherinoneplace,andyoucanwatchthe
videosonline.

Tags: Design(/tag/design), Inspiration(/tag/inspiration), JavaScript(/tag/javascript),

netmag(/tag/netmag), Infographic(/tag/infographic),
Webdesign(/tag/webdesign), Feature(/tag/feature), Howto(/tag/howto)

6Comments

CreativeBloq

Login

Share Favorite

SortbyBest

Jointhediscussion
Rupert ayearago

YoushouldalsocheckoutJolicharts(http://jolicharts.com).
Itcreatespresentationsdirectlyconnectedtoyourdata(Excel,GoogleDocs,Database,etc.)

Reply Share

Boostlabs ayearago

CheckoutBoostlabs(Boostlabs.com).TheyalmostworkinDataVisualization,UX/UIDesign,and
MotionGraphics.

Reply Share

AndyTice ayearago

Onthemappingsideofthings,IwouldsuggestQGIS(qgis.org).FullyfunctioningGISwithsome
ratherneatstylingandoutputoptions.

Reply Share

OlgaSudnishchikova ayearago

IwouldalsosuggesttotryKnoema,ifyouareinterestedindatavisualization.
Everyusercaneasilybuildinteractivemaps,charts,graphsandothersimpleinfographics,share
datadashboardsthroughtheusualvarietyofsocialnetworks,exportthemorsharethemonthe
Web.
http://knoema.com
Best,
Olga

Reply Share

Halpenfield ayearago

Greatlist.It'snotclearifthesearepaidorfreethough.Somereallygooddatavisualisationsoftware
isTibcoSpotfire.Itsincrediblypowerfulandreallyeasytouse.Youcangoto
http://www.halpenfield.co.ukformoreinformationonthis.

Reply Share

jordiruizr ayearago

Hi,whatdoyouthinkabouthttp://www.quadrigram.com/youcancreatecustomdata
visualizations

Reply Share

WHAT'STHIS?

ALSOONCREATIVEBLOQ

Thismonth'stopnewwebdesigntools

Makesureyourepartofthenewbreedof
21stcenturycreatives

2comments5daysago

1comment6daysago

urwebbyThesewebsitedesignshasreally

helpedmesavedlotoftimeinpreparingwebsite.
Thanksalot.

IshraqDhalyIworkinthecreativeindustryin

Bangladesh,adevelopingcountrywithunlimited
potential.Yet

FirstrealalternativetoPhotoshoplaunched
andit'sfree!

Shoulddesignerscareabouttypographic
mistakes?

196comments11daysago

4commentsadayago

LucaBertaiolaYou'llsticktothecrackedversion

JKWeneedtoraidpeoplewhodoesnotuse

ofPhotoshopandLightroom.

rulesoftypographytoformattexts.Thereasonis
simple:ifweallow

Subscribe

AddDisqustoyoursite

Advertising (/Advertising)

About Us (/About-Us)

Privacy

Contact (/Contact)

CreativeBloqispartofFutureplc,aninternationalmediagroupandleadingdigitalpublisher.Weproducecontentacrossfivecoreareas:

Technology

Entertainment

Music

Top

Creative

TechRadar(http://www.techradar.com/)
CVG(http://www.computerandvideogames.com/)
MusicRadar(http://www.musicradar.com/)
DigitalCameraWorld(http://www.digitalcameraw
T3(http://www.t3.com/)

PCGamer(http://www.pcgamer.com/)
Guitarist(http://www.musicradar.com/guitarist)
MollieMakes(http://www.molliemakes.com/)

Mac|Life(http://www.maclife.com/) GamesRadar(http://www.gamesradar.com/)
FutureMusic(http://www.musicradar.com/futuremusic)
PhotographyWeek(http://photographyweek.dig

GizmodoUK(http://www.gizmodo.co.uk/)
TotalFilm(http://www.totalfilm.com/)Rhythm(http://www.musicradar.com/rhythm)
TheSimpleThings(http://www.thesimplethings.

More...(http://www.futureplc.com/whatwedo/portfolios/technology/)
More...(http://www.futureplc.com/whatwedo/portfolios/entertainment/)
More...(http://www.futureplc.com/whatwedo/portfolios/music/)
More...(http://www.futureplc.com/whatwedo/p
Sport&Auto
BikeRadar(http://www.bikeradar.com/)
Cyclingnews(http://www.cyclingnews.com/)
FootballWeek(http://www.thefootballweek.net/)
TriRadar(http://www.triradar.com/)
More...(http://www.futureplc.com/whatwedo/portfolios/sportandauto/)

AboutFuture(http://www.futureplc.com/about/)

Jobs(http://www.yourfuturejob.com/)

PR(http://www.futureplc.com/news/)

Advertising(http://www.futureplc.com/whatwedo/advertisingsolutions/)

PrivacyPolicy(http://www.futureplc.com/privacypolicy/)

CookiesPolicy(http://www.futureplc.com/cookiespolicy/)

Terms&Conditions(http://www.futureplc.com/termsandconditions/)

InvestorRelations(http://www.futureplc.com/investors/)

DigitalFuture(http://advertising.digitalfuture.com/)

Subscriptions(http://www.myfavouritemagazines.co.uk/)

ContactFuture(http://www.futureplc.com/contact/)

FuturePublishingLimited,QuayHouse,TheAmbury,BathBA11UA.Allrightsreserved.EnglandandWalescompanyregistrationnumber
2008885.