Your SlideShare is downloading. ×
  • Like
Create Neat Interactive Visualisations
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Create Neat Interactive Visualisations

  • 1,021 views
Published

Using dc.js to create rich, interactive web data visualisations - 1 hour tutorial / session. You will leave this session with an appreciation of how easy it is to use standard javascript libraries to …

Using dc.js to create rich, interactive web data visualisations - 1 hour tutorial / session. You will leave this session with an appreciation of how easy it is to use standard javascript libraries to create really rich web visualisations that can easily be shared across teams.

It is possible to build an interactive dashboard that visualises csv, excel, database file in less than an hour.

We will start this session with a basic csv file of data. We will finish with everyone having created an interactive visualisation similar to the screenshot below. All welcome.

Prerequisites: (1) basic understanding of html & javascript

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,021
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
13
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • python -m SimpleHTTPServer 8080 / python -m http.server 8080

Transcript

  • 1. DUBLIN DATAVISUALISATIONMEETUP#DUBLINDATAVIS (21ST MAY 2013)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 2. WHY DID WE CREATETHIS MEETUP?A community for those interested in creating, sharing, discussing orlearning how to create data-driven visualisations.Fighting the good fight against a massive data deluge.© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 3. EVENTS WE’D LIKE TOHOSTWalkthroughs (like this one)Short sharing sessionsDiscussions on technologiesVisualisation ‘Cook-Off’ (for fun!)Share Neat VisualisationsShare Visualisation Stories (when it worked / why it worked)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 4. CREATE RICHINTERACTIVEDATAVISUALISATIONSEAMONN O’LOUGHLIN#DUBLINDATAVIS (21ST MAY 2013)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 5. EAMONN O’LOUGHLIN6 years as Management Consultant / Analytics ConsultantDeveloping / implementing insight-generating solutions(customer segmentation, loss-default forecasting, business eventsimulation, operations strategy)Researching behaviour through the lens of Social NetworkAnalysis (Dynamics Lab at UCD)Interested in visualisation of dynamic social networks,algorithms, web application frameworks, mobile deviceinteraction, collaboration technologies@ieeamo / http://www.linkedin.com/in/eamonnoloughlin© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 6. RICH INTERACTIVEVISUALISATIONSAccessible in browserInteractiveScalable to moderate-sized datasets (~1M rows)Easy / Quick to ImplementFlexibleEnables Rapid PrototypingEncourages Data Exploration© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 7. WHAT TODAY IS NOTABOUTEnterprise SolutionScalable to ‘Big Data’Unique VisualisationsExtensive Customisation© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 8. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our Visualisation*Tidy and Wrap Up*This is the hardest part© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 9. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our VisualisationTidy and Wrap Up© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 10. TODAY WE WILL BEUSINGWeb Serverdc.jsBootstrapNote: dc.js is built on top of d3.js and crossfilter.js(so we will only be using these indirectly)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 11. D3.JS“D3.js is a JavaScript library for manipulating documentsbased on data. D3 helps you bring data to life using HTML,SVG and CSS. D3’s emphasis on web standards gives youthe full capabilities of modern browsers without tyingyourself to a proprietary framework, combining powerfulvisualization components.”Developed by Mike Bostock (Graphic Editor of New YorkTimes)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 12. CROSSFILTER.JS“Crossfilter is a JavaScript library for exploring largemultivariate datasets in the browser. Crossfilter supportsextremely fast (<30ms) interaction with coordinated views,even with datasets containing a million or more records.”Built to power analytics for Square Register, allowingmerchants to slice and dice their payment history fluidly.© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 13. DC.JS“dc.js is a javascript charting library with native crossfiltersupport and allowing highly efficient exploration on largemulti-dimensional dataset. It leverages d3 engine to rendercharts in css friendly svg format.”Developed by Nick Qi Zhu at Thoughtworks to perform datavisualization and analysis in browser as well as on mobiledevice© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 14. BOOTSTRAP“Sleek, intuitive, and powerful front-end framework for fasterand easier web development. Bootstrap was made to notonly look and behave great in the latest desktop browsers,but in tablet and smartphone browsers via responsive CSSas well.”Developed by a team at Twitter.© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 15. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our VisualisationTidy and Wrap Up© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 16. YELP KAGGLECHALLENGEDownload the yelp test set© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 17. YELP KAGGLECHALLENGEyelp_test_set_business.json© Eamonn O’LoughlinCreate rich interactive visualisations of your data
  • 18. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our VisualisationTidy and Wrap Up© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 19. DATA STRUCTURE© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 20. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our VisualisationTidy and Wrap Up© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 21. DC.JS LIBRARYBubble ChartLine ChartPie ChartRow ChartBar ChartData TableChoropleth Map© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 22. DESIGN OUR VISUALISATION© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 23. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our VisualisationTidy and Wrap Up© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 24. IMPLEMENTATION3 Stages to Implement1.  Development Environment2.  HTML3.  JavaScript© Eamonn O’LoughlinCreate Rich Interactive Visualisations+ +
  • 25. SIMPLE STEP-BY-STEPAPPROACHDevelopment Environment1.  In a new folder create index.html, simple_vis.js2.  Copy yelp data and components (js/css) into folder3.  Start web server (mongoose) from folder4.  Open browser to url localhost:80805.  Open javascript console© Eamonn O’LoughlinCreate Rich Interactive VisualisationsWalk throughsteps duringpresentation
  • 26. SIMPLE STEP-BY-STEPAPPROACHHTML•  Setup simple structure•  <head>•  <body>•  Load javascript libraries (d3, crossfilter, dc)•  Load stylesheets (dc)•  Setup <div> placeholders© Eamonn O’LoughlinCreate Rich Interactive VisualisationsWalk throughsteps duringpresentation
  • 27. SIMPLE STEP-BY-STEPAPPROACHJavaScript (simple_vis.js)1.  Load Data2.  Create Chart Object(s)3.  Run Data Through Crossfilter4.  Create Data Dimensions & Groups5.  Implement Charts6.  Render Charts© Eamonn O’LoughlinCreate Rich Interactive VisualisationsWalk throughsteps duringpresentation
  • 28. SEGWAY #1DIMENSIONS / GROUPSDimensionReturns ordered (and cached) data based on selected variablefrom the underlying dataGroupReturn aggregation of the data, based on chosen dimension.Typical examples include:•  ReduceSum (sum the values)•  ReduceCount (count of items)•  Reduce (custom) – describe what happens aggregation whenitems are added / removed from group© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 29. SEGWAY #2CHAININGMajority of dc functions are designed to allow function chaining,meaning it will return the current chart instance whenever it isappropriate.Therefore configuration of a chart can be written in the followingstyle:myChart.width(300)!! .height(300)!! .filter("sunday");!© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 30. WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisation (Rough Plan)Iteratively Implement our VisualisationTidy and Wrap Up© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 31. SEGWAY #3BOOTSTRAP FLUID NESTING© Eamonn O’LoughlinCreate Rich Interactive Visualisations
  • 32. © Eamonn O’LoughlinCreate rich interactive visualisations of your data
  • 33. FINAL VISUALISATION (HERE)© Eamonn O’LoughlinCreate Rich Interactive VisualisationsCode
  • 34. © Eamonn O’LoughlinCreate rich interactive visualisations of your data
  • 35. THAT’S IT. THANK YOU© Eamonn O’LoughlinCreate rich interactive visualisations of your dataBlue Dog Images from blog of Wendy Rodrigue
  • 36. THAT’S IT. THANK YOU© Eamonn O’LoughlinCreate rich interactive visualisations of your dataBlue Dog Images from blog of Wendy RodrigueWhatquestions /comments doyou have?