20 Superb Data Visualisation Tools for Web Designers

>Comments (http://www.creativebloq.com/web-design/top-data-visualisation-tools-9122832#disqus_thread)

Sep 16, 2012 00:00 am

Tweet

137 2.4k

Like

432

DESIGN HOW TO

From simple charts to complex maps and infographics, BrianSuda's round-up of the best and mostly free tools haseverything you need to bring your data to life.

20 superb data visualisation tools forweb designers

>1,763

Share

Weusecookiesonthiswebsite.Byusingthissite,youagreethatwemaystoreandaccesscookiesonyourdevice.Findout

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

x

OneofthemostcommonquestionsIgetaskedishowtogetstartedwithdatavisualisations.Beyondfollowingblogs,youneedtopractiseandtopractise,youneedtounderstandthetoolsavailable.Inthisarticle,Iwanttointroduceyouto20differenttoolsforcreatingvisualisations:fromsimplechartstocomplexgraphs,mapsandinfographics.Almosteverythinghereisavailableforfree,andsomeyouhaveprobablyinstalledalready.

Entry-level toolsAttheentrylevel,we'llbelookingatunexpectedusesforfamiliartools.YoumightnotthinkofExcelasavisualisationpackage,forexamplebutit'scapableofsurprisinglycomplexresults.Ifyouarejustgettingstarted,thesetoolsaremuststounderstand.Ifyoudealwithvisualisationseveryday,you'llquicklyfindyourselfadvancingbeyondthem,butnoteveryonewill,soyou'llalwaysbedealingwithdatacominginfromsourcesyou'drathernotdealwith.

NOTE:You'llfindanupdatedversionofthisarticlehere(http://www.creativebloq.com/designtools/datavisualization712402)

01. Excel

YoucanactuallydosomeprettycomplexthingswithExcel(http://office.microsoft.com/engb/excel/),from'heatmaps'ofcellstoscatterplots.Asanentryleveltool,itcanbeagoodwayofquicklyexploringdata,orcreatingvisualisationsforinternaluse,butthelimiteddefaultsetofcolours,linesandstylesmakeitdifficulttocreategraphicsthatwouldbeusableinaprofessionalpublicationorwebsite.Nevertheless,asameansofrapidlycommunicatingideas,Excelshouldbepartofyourtoolbox.

ExcelcomesaspartofthecommercialMicrosoftOfficesuite(http://office.microsoft.com/engb/),soifyoudon'thaveaccesstoit,Google'sspreadsheetspartofGoogleDocs(http://docs.google.com)andGoogleDrive(http://drive.google.com)candomanyofthesamethings.Google'eatsitsowndogfood',sothespreadsheetcangeneratethesamechartsastheGoogleChartAPI(https://developers.google.com/chart/).ThiswillgetyourfamiliarwithwhatispossiblebeforesteppingoffandusingtheAPIdirectlyforyourownprojects.

(http://office.microsoft.com/engb/excel/)

It isn't graphically flexible, but Excel is a good way to explore data: forexample, by creating 'heat maps' like this one

>

CSV(http://en.wikipedia.org/wiki/Commaseparated_values)(CommaSeparatedValues)andJSON(http://www.json.org/)(JavaScriptObjectNotation)aren'tactualvisualisationtools,buttheyarecommonformatsfordata.You'llneedtounderstandtheirstructuresandhowtogetdatainoroutofthem.Allofthefollowingtoolkitsacceptatleastoneofthetwoformatsasinput.

Online visualisations

Theportionofthetoolsetforstaticimageshasbeendeprecated(https://developers.google.com/chart/image/),sotheGoogleChartTools(https://developers.google.com/chart/)sitenowonlyofferstoolsfordynamiccharts.TheyarerobustandworkonallbrowserssupportingSVG,canvasandVML,butonebigproblemisthattheyaregeneratedontheclientside,whichcreatesproblemsfordeviceswithoutJavaScript,offlineuseorjustwhensavingindifferentformats.Staticimagesdidn'thavethesameissues,soI'msorrytoseethemgo.

However,theAPIhasjustabouteverythingbutthekitchensink,frombarchartsandlinegraphstomapsandevenQRcodes.YouwillprobablyfindtherightvisualisationforyourneedsaslongasyouarecomfortablewiththeGooglelookandnotinneedofextremecustomisation.Asajumpingoffpoint,itisagreattooltoknowhowtouse.

02. CSV/JSON

03. Google Chart API

Flot(http://www.flotcharts.org/)isagreatlibraryforlinegraphsandbarcharts.Itworksinallbrowsersthatsupportcanvaswhichmeansmostofthepopularones,withsomeextralibrariestogetcanvastoworkasVMLinolderbrowsers.It'sajQuerylibrary,soifyou'realreadyfamiliarwithjQuery,it'seasytomanipulatethecallsback,stylingandbehaviourofthegraphics.

ThenicethingaboutFlotisthatyouhaveaccesstoplentyofcallbackfunctionssoyoucanrunyourowncodeandstyletheresultswhenreadershover,click,mouseout,andothercommonevents.Thisgivesyoumuchmoreflexibilitythanotherchartingpackages,butthereisasteeperlearningcurve.Flotisalsolimitedtolineandbarcharts.Itdoesn'thaveasmanyoptionsasotherlibraries,butitperformscommontasksreallywell.

(http://developers.google.com/chart/)

The portion for static images has been deprecated, but the Google ChartAPI is a good way to create dynamic visualisations

>

04. Flot

Raphal(http://raphaeljs.com/)isanothergreatJavaScriptlibraryforcreatingchartsandgraphs.ThebiggestdifferencetootherlibrariesisthatitfocusesonSVGandVMLasoutput.Thishasprosandcons.SinceSVGisavectorformat,theresultslookgreatatanyresolutionbutsinceitcreatesaDOMnodeforeachelement,itcanbeslowerthancreatingrasterisedimagesviacanvas.However,theupsideisthatyoucaninteractwitheachDOMelementandattachevents,justlikeHTML.

ThewebsiteincludesplentyofdemostoshowhoweasilyRaphalcancreatecommonchartsandgraphsbut,becauseitcanalsorenderarbitrarySVG,ithastheabilitytocreatesomeverycomplexvisualisationsforwhichyoumightotherwisehavetoresorttoothervectortoolssuchasIllustrator(http://www.adobe.com/uk/products/illustrator.html)orInkscape(http://inkscape.org/).

(http://www.flotcharts.org/)

It's specialised on line and bar charts, but if you know jQuery, Flot is apowerful option

>

05. Raphal

D3(http://d3js.org/)(DataDrivenDocuments)isanotherJavaScriptlibrarythatsupportsSVGrendering.TheexamplesgobeyondthesimplebarchartsandlinegraphstomuchmorecomplicatedVoronoidiagrams,treemaps,circularclustersandwordclouds.It'sanothergreattooltohaveinyourtoolbox,butIwouldn'talwaysrecommendD3asthegotolibrary.It'sgreatforcreatingverycomplicatedinteractionsbutjustbecauseyoucan,itdoesn'tmeanyoushould.Knowingwhentostaysimpleisabigpartofchoosingtherightvisualisationtool.

(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

Ifyouareinneedofaninfographicratherthanadatavisualisation,thereisanewcropoftoolsouttheretohelp.Visual.ly(http://visual.ly/)isprobablythemostpopularofthese.Althoughprimarilyanonlinemarketplaceforinfographicdesigners,itsCreateoptionletsyoupickatemplate,connectittoyourFacebookorTwitteraccountandgetsomenicecartoongraphicsback.Whiletheresultsarecurrentlylimited,it'sausefulsourceofinspirationbothgoodandbadandasiteIexpecttoseegrowinfuture,acceptingmoreformatsandcreatingmoreinterestinggraphics.

(http://d3js.org/)

D3 is capable of creating very complex output but it's best saved forspecial cases, not everyday use

>

07. Visual.ly

Interactive GUI controlsWhathappenswhendatavisualisationsbecomesointeractivetheythemselvesbecomeGUIcontrols?Asonlinevisualisationsevolve,buttons,dropdownsandslidersaremorphingintomorecomplexinterfaceelements,suchaslittlehandlesthatletyoumanipulateranges,changingtheinputparametersandthedataatthesametime.Controlsandcontentarebecomingone.Thefollowingtoolswillhelpyouexplorethepossibilitiesthisoffers.

Aswebuildmorecomplextoolstoenableclientstowadethroughtheirdata,wearestartingtocreategraphsandchartsthatdoubleasinteractiveGUIwidgets.JavaScriptlibraryCrossfilter(http://square.github.com/crossfilter/)canbebothofthese.Itdisplaysdata,butatthesametime,youcanrestricttherangeofthatdataandseeotherlinkedchartsreact.

(http://visual.ly/)

Visual.ly acts both as an online marketplace and simple creation tool forinfographics

>

08. Crossfilter

ThelinebetweencontentandcontrolblursevenfurtherwithTangle(http://worrydream.com/Tangle/).Whenyouaretryingtodescribeacomplexinteractionorequation,lettingthereadertweaktheinputvaluesandseetheoutcomeforthemselvesprovidesbothasenseofcontrolandapowerfulwaytoexploredata.JavaScriptlibraryTangleisasetoftoolstodojustthis.Draggingonvariablesenablesyoutoincreaseordecreasetheirvaluesandseeanaccompanyingchartupdateautomatically.Theresultsareonlyjustshortofmagical.

(http://square.github.com/crossfilter/)

Crossfilter in action: by restricting the input range on any one chart, datais affected everywhere. This is a great tool for dashboards or otherinteractive tools with large volumes of data behind them

>

09. Tangle

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

MappingMappingusedtobeareallyhardtaskontheweb.ThenGoogleMaps(http://maps.google.co.uk/)camealongandblewawayeverypreconceivednotionofhowanonlinemapshouldwork.Soonafter,GooglereleaseditsMapsAPI(https://developers.google.com/maps/),whichallowedanydevelopertoembedmapsintheirownsites.

Sincethen,themarkethasmaturedagreatdeal.Therearenowseveraloptionsoutthereifyouarelookingtoembedcustommappingsolutionsinyourowndatavisualisationproject,andknowingwhentochooseoneovertheothersisakeybusinessdecision.Sure,youcanprobablyshoehorneverythingyouneedintoanyofthesemaps,butit'sbestnottohaveahammerandvieweveryproblemasanail.

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

Tangle creates complex interactive graphics. Pulling on any one of theknobs affects data throughout all of the linked charts. This creates a real-time feedback loop, enabling you to understand complex equations in amore intuitive way

>

10. Modest Maps

BroughttoyoubytheCloudMade(http://cloudmade.com)team,Leaflet(http://leaflet.cloudmade.com/)isanothertinymappingframework,designedtobesmallandlightweightenoughtocreatemobilefriendlypages.BothLeafletandModestMapsareopensourceprojects,whichmakesthemidealforusinginyourownsites:withastrongcommunitybackingthem,youknowtheywon'tdisappearanytimesoon.

(http://modestmaps.com/)

Teamed with additional libraries, such as MapBox's Wax (pictured), thetiny Modest Maps becomes a powerful tool

>

11. Leaflet

(http://leaflet.cloudmade.com/)

Leaflet is a small, lightweight JavaScript library ideal for mobile-friendly>

Polymaps(http://polymaps.org/)isanothermappinglibrary,butitisaimedmoresquarelyatadatavisualisationaudience.Offeringauniqueapproachtostylingthethemapsitcreates,analagoustoCSSselectors,it'sagreatresourcetoknowabout.

OpenLayers(http://openlayers.org/)isprobablythemostrobustofthesemappinglibraries.Thedocumentationisn'tgreatandthelearningcurveissteep,butforcertaintasksnothingelsecancompete.Whenyouneedaveryspecifictoolnootherlibraryprovides,OpenLayersisalwaysthere.

projects

12. Polymaps

(http://polymaps.org/)

Aimed more at specialist data visualisers, the Polymaps library createsimage and vector-tiled maps using SVG

>

13. OpenLayers

Kartograph(http://kartograph.org/)'staglineis'rethinkmapping'andthatisexactlywhatitsdevelopersaredoing.We'reallusedtotheMercatorprojection(http://en.wikipedia.org/wiki/Mercator_projection),butKartographbringsfarmorechoicestothetable.Ifyouaren'tworkingwithworldwidedata,andcanplaceyourmapinadefinedbox,Kartographhastheoptionsyouneedtostandoutfromthecrowd.

(http://openlayers.org/)

It isn't easy to master, but OpenLayers is arguably the most complete,robust mapping solution discussed here

>

14. Kartograph

(http://kartograph.org/)

Finally,CartoDB(http://cartodb.com/)isamustknowsite.Theeasewithwhichyoucancombinetabulardatawithmapsissecondtonone.Forexample,youcanfeedinaCSVfileofaddressstringsanditwillconvertthemtolatitudesandlongitudesandplotthemonamap,buttherearemanyotherusers.It'sfreeforuptofivetablesafterthat,therearemonthlypricingplans.

Charting fontsOnerecenttrendinwebdevelopmentistomergesymbolfontswithfontembeddingtocreatebeautifullyvectorisedicons.Theyscaleandprintperfectly,andlookgreatonnewerRetinadevicestoo.Afewofthesefonts,suchasFFChartwell(http://www.fontfont.com/howtouseffchartwell)andChartjunk(http://nsfmc.github.com/chartjunk/),havebeenspeciallycraftedforthepurposeofdisplayingchartsandgraphs.TheyhavetheusualproblemofOpenTypenotbeingfullysupportedinallbrowsers,butthey'resomethingtoconsiderinthenearfuture.

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

15. CartoDB

(http://cartodb.com/)

CartoDB provides an unparalleled way to combine maps and tabular datato create visualisations

>

Getting seriousIfyou'regettingseriousaboutdatavisualisations,youneedtomovebeyondsimplewebbasedwidgetsontosomethingmorepowerful.Thiscouldmeandesktopapplicationsandprogrammingenvironments.

Processing(http://processing.org/)hasbecometheposterchildforinteractivevisualisations.ItenablesyoutowritemuchsimplercodewhichisinturncompiledintoJava.ThereisalsoaProcessing.js(http://processingjs.org/)projecttomakeiteasierforwebsitestouseProcessingwithoutJavaapplets,plusaporttoObjectiveCsoyoucanuseitoniOS.Itisadesktopapplication,butcanberunonallplatforms,andgiventhatitisnowseveralyearsold,thereareplentyofexamplesandcodefromthecommunity.

16. Processing

(http://www.processing.org)

Processing provides a cross-platform environment for creating images,animations, and interactions

>

17. NodeBox

NodeBox(http://nodebox.net/)isanOSXapplicationforcreating2Dgraphicsandvisualisations.YouneedtoknowandunderstandPythoncode,butbeyondthatit'saquickandeasywaytotweakvariablesandseeresultsinstantly.It'ssimilartoProcessing,butwithoutalltheinteractivity.

Pro toolsAttheoppositeendofthespectrumfromExcelareprofessionaldataanalysistools.Ifyouareseriousaboutdatavisualisation,youneedtobeatleastawareof,ifnotproficientin,someofthese.IndustrystandardtoolssuchasSPSS(http://www01.ibm.com/software/analytics/spss/)andSAS(http://www.sas.com/)requireexpensivesubscriptions,soonlylargeinstitutionsandacademiahaveaccesstothem,butthereareseveralfreealternativeswithstrongcommunities.Theopensourcesoftwareisjustasgood,andthepluginsandsupportarebetter.

(http://nodebox.net/)

NodeBox is a quick, easy way for Python-savvy developers to create 2Dvisualisations

>

18. R

Howmanyotherpiecesofsoftwarehaveanentiresearchengine(http://www.rseek.org/)dedicatedtothem?Astatisticalpackageusedtoparselargedatasets,R(http://www.rproject.org/)isaverycomplextool,andonethattakesawhiletounderstand,buthasastrongcommunityandpackagelibrary,withmoreandmorebeingproduced.Thelearningcurveisoneofthesteepestofanyofthesetoolslistedhere,butyoumustbecomfortableusingitifyouwanttogettothislevel.

Whenyougetdeeperintobeingadatascientist,youwillneedtoexpandyourcapabilitiesfromjustcreatingvisualisationstodatamining.Weka(http://www.cs.waikato.ac.nz/ml/weka/)isagoodtoolforclassifyingandclusteringdatabasedonvariousattributesbothpowerfulwaystoexploredatabutitalsohastheabilitytogeneratesimpleplots.

(http://www.rproject.org/)

A powerful free software environment for statistical computing andgraphics, R is the most complex of the tools listed here

>

19. Weka

Whenpeopletalkaboutrelatedness,socialgraphsandcorelations,theyarereallytalkingabouthowtwonodesarerelatedtooneanotherrelativetotheothernodesinanetwork.Thenodesinquestioncouldbepeopleinacompany,wordsinadocumentorpassesinafootballgame,butthemathsisthesame.Gephi(http://gephi.org/),agraphbasedvisualiseranddataexplorer,cannotonlycrunchlargedatasetsandproducebeautifulvisualisations,butalsoallowsyoutocleanandsortthedata.It'saverynicheusecaseandacomplexpieceofsoftware,butitputsyouaheadofanyoneelseinthefieldwhodoesn'tknowaboutthisgem.

(http://www.cs.waikato.ac.nz/ml/weka/)

A collection of machine-learning algorithms for data-mining tasks, Wekais a powerful way to explore data

>

20. Gephi

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)

(http://gephi.org/)

Gephi in action. Coloured regions represent clusters of data that thesystem is guessing are similar

>

Further readingAgreatTumblrblogforvisualisationexamplesandinspiration:vizualize.tumblr.com(http://vizualize.tumblr.com)

NicholasFelton'sannualreportsarenowinfamous,buthealsohasaTumblrblog(http://feltron.tumblr.com)ofgreatthingshefinds.

FromtheguywhohelpedbringProcessingintotheworld:benfry.com/writing(http://benfry.com/writing/)

StamenDesignisalwayscreatinginterestingprojects:stamen.com(http://stamen.com)

EyeoFestival(http://eyeofestival.com)bringssomeofthegreatestmindsindatavisualisationtogetherinoneplace,andyoucanwatchthevideosonline.

6Comments CreativeBloq Login

SortbyBest Share

Jointhediscussion

Reply

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

Reply

Boostlabs ayearagoCheckoutBoostlabs(Boostlabs.com).TheyalmostworkinDataVisualization,UX/UIDesign,andMotionGraphics.

Reply

AndyTice ayearagoOnthemappingsideofthings,IwouldsuggestQGIS(qgis.org).FullyfunctioningGISwithsomeratherneatstylingandoutputoptions.

Reply

OlgaSudnishchikova ayearagoIwouldalsosuggesttotryKnoema,ifyouareinterestedindatavisualization.Everyusercaneasilybuildinteractivemaps,charts,graphsandothersimpleinfographics,sharedatadashboardsthroughtheusualvarietyofsocialnetworks,exportthemorsharethemontheWeb.

http://knoema.comBest,Olga

Reply

Halpenfield ayearagoGreatlist.It'snotclearifthesearepaidorfreethough.SomereallygooddatavisualisationsoftwareisTibcoSpotfire.Itsincrediblypowerfulandreallyeasytouse.Youcangotohttp://www.halpenfield.co.ukformoreinformationonthis.

Reply

jordiruizr ayearagoHi,whatdoyouthinkabouthttp://www.quadrigram.com/youcancreatecustomdatavisualizations

Favorite

Share

Share

Share

Share

Share

Share

Advertising (/Advertising) About Us (/About-Us) Contact (/Contact)

CreativeBloqispartofFutureplc,aninternationalmediagroupandleadingdigitalpublisher.Weproducecontentacrossfivecoreareas:

TechRadar(http://www.techradar.com/)

T3(http://www.t3.com/)

Mac|Life(http://www.maclife.com/)

GizmodoUK(http://www.gizmodo.co.uk/)

More...(http://www.futureplc.com/whatwedo/portfolios/technology/)

TechnologyCVG(http://www.computerandvideogames.com/)

PCGamer(http://www.pcgamer.com/)

GamesRadar(http://www.gamesradar.com/)

TotalFilm(http://www.totalfilm.com/)

More...(http://www.futureplc.com/whatwedo/portfolios/entertainment/)

EntertainmentMusicRadar(http://www.musicradar.com/)

Guitarist(http://www.musicradar.com/guitarist)

FutureMusic(http://www.musicradar.com/futuremusic)

Rhythm(http://www.musicradar.com/rhythm)

More...(http://www.futureplc.com/whatwedo/portfolios/music/)

MusicDigitalCameraWorld(http://www.digitalcameraworld.com/)

MollieMakes(http://www.molliemakes.com/)

PhotographyWeek(http://photographyweek.digitalcameraworld.com/)

TheSimpleThings(http://www.thesimplethings.com/)

More...(http://www.futureplc.com/whatwedo/portfolios/creative/)

Creative

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/)

Sport&Auto

AboutFuture(http://www.futureplc.com/about/) Jobs(http://www.yourfuturejob.com/) PR(http://www.futureplc.com/news/)

Top

Thismonth'stopnewwebdesigntools2comments5daysago

urwebbyThesewebsitedesignshasreallyhelpedmesavedlotoftimeinpreparingwebsite.Thanksalot.

Makesureyourepartofthenewbreedof21stcenturycreatives1comment6daysago

IshraqDhalyIworkinthecreativeindustryinBangladesh,adevelopingcountrywithunlimitedpotential.Yet

FirstrealalternativetoPhotoshoplaunchedandit'sfree!196comments11daysago

LucaBertaiolaYou'llsticktothecrackedversionofPhotoshopandLightroom.

Shoulddesignerscareabouttypographicmistakes?4commentsadayago

JKWeneedtoraidpeoplewhodoesnotuserulesoftypographytoformattexts.Thereasonissimple:ifweallow

ALSOONCREATIVEBLOQ WHAT'STHIS?

Subscribe AddDisqustoyoursited Privacy

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

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

Terms&Conditions(http://www.futureplc.com/termsandconditions/) Subscriptions(http://www.myfavouritemagazines.co.uk/)

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

FuturePublishingLimited,QuayHouse,TheAmbury,BathBA11UA.Allrightsreserved.EnglandandWalescompanyregistrationnumber2008885.