20 superb data visualisation tools for web designers
DESCRIPTION
Data VisualisationTRANSCRIPT
-
>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.