DUBLIN DATAVISUALISATIONMEETUP#DUBLINDATAVIS (21ST MAY 2013)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
WHY DID WE CREATETHIS MEETUP?A community for those interested in creating, sharing, discussing orlearning how to create da...
EVENTS WE’D LIKE TOHOSTWalkthroughs (like this one)Short sharing sessionsDiscussions on technologiesVisualisation ‘Cook-Of...
CREATE RICHINTERACTIVEDATAVISUALISATIONSEAMONN O’LOUGHLIN#DUBLINDATAVIS (21ST MAY 2013)© Eamonn O’LoughlinCreate Rich Inte...
EAMONN O’LOUGHLIN6 years as Management Consultant / Analytics ConsultantDeveloping / implementing insight-generating solut...
RICH INTERACTIVEVISUALISATIONSAccessible in browserInteractiveScalable to moderate-sized datasets (~1M rows)Easy / Quick t...
WHAT TODAY IS NOTABOUTEnterprise SolutionScalable to ‘Big Data’Unique VisualisationsExtensive Customisation© Eamonn O’Loug...
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
TODAY WE WILL BEUSINGWeb Serverdc.jsBootstrapNote: dc.js is built on top of d3.js and crossfilter.js(so we will only be us...
D3.JS“D3.js is a JavaScript library for manipulating documentsbased on data. D3 helps you bring data to life using HTML,SV...
CROSSFILTER.JS“Crossfilter is a JavaScript library for exploring largemultivariate datasets in the browser. Crossfilter su...
DC.JS“dc.js is a javascript charting library with native crossfiltersupport and allowing highly efficient exploration on l...
BOOTSTRAP“Sleek, intuitive, and powerful front-end framework for fasterand easier web development. Bootstrap was made to n...
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
YELP KAGGLECHALLENGEDownload the yelp test set© Eamonn O’LoughlinCreate Rich Interactive Visualisations
YELP KAGGLECHALLENGEyelp_test_set_business.json© Eamonn O’LoughlinCreate rich interactive visualisations of your data
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
DATA STRUCTURE© Eamonn O’LoughlinCreate Rich Interactive Visualisations
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
DC.JS LIBRARYBubble ChartLine ChartPie ChartRow ChartBar ChartData TableChoropleth Map© Eamonn O’LoughlinCreate Rich Inter...
DESIGN OUR VISUALISATION© Eamonn O’LoughlinCreate Rich Interactive Visualisations
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
IMPLEMENTATION3 Stages to Implement1.  Development Environment2.  HTML3.  JavaScript© Eamonn O’LoughlinCreate Rich Interac...
SIMPLE STEP-BY-STEPAPPROACHDevelopment Environment1.  In a new folder create index.html, simple_vis.js2.  Copy yelp data a...
SIMPLE STEP-BY-STEPAPPROACHHTML•  Setup simple structure•  <head>•  <body>•  Load javascript libraries (d3, crossfilter, d...
SIMPLE STEP-BY-STEPAPPROACHJavaScript (simple_vis.js)1.  Load Data2.  Create Chart Object(s)3.  Run Data Through Crossfilt...
SEGWAY #1DIMENSIONS / GROUPSDimensionReturns ordered (and cached) data based on selected variablefrom the underlying dataG...
SEGWAY #2CHAININGMajority of dc functions are designed to allow function chaining,meaning it will return the current chart...
WHAT WE’RE GOINGTO DOQuick Review of underlying componentsDownload a datasetExplore the Data StructureDesign our Visualisa...
SEGWAY #3BOOTSTRAP FLUID NESTING© Eamonn O’LoughlinCreate Rich Interactive Visualisations
© Eamonn O’LoughlinCreate rich interactive visualisations of your data
FINAL VISUALISATION (HERE)© Eamonn O’LoughlinCreate Rich Interactive VisualisationsCode
© Eamonn O’LoughlinCreate rich interactive visualisations of your data
THAT’S IT. THANK YOU© Eamonn O’LoughlinCreate rich interactive visualisations of your dataBlue Dog Images from blog of Wen...
THAT’S IT. THANK YOU© Eamonn O’LoughlinCreate rich interactive visualisations of your dataBlue Dog Images from blog of Wen...
Upcoming SlideShare
Loading in...5
×

Create Neat Interactive Visualisations

1,109

Published on

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,109
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • python -m SimpleHTTPServer 8080 / python -m http.server 8080
  • Create Neat Interactive Visualisations

    1. 1. DUBLIN DATAVISUALISATIONMEETUP#DUBLINDATAVIS (21ST MAY 2013)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    2. 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. 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. 4. CREATE RICHINTERACTIVEDATAVISUALISATIONSEAMONN O’LOUGHLIN#DUBLINDATAVIS (21ST MAY 2013)© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    5. 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. 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. 7. WHAT TODAY IS NOTABOUTEnterprise SolutionScalable to ‘Big Data’Unique VisualisationsExtensive Customisation© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    8. 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. 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. 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. 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. 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. 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. 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. 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. 16. YELP KAGGLECHALLENGEDownload the yelp test set© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    17. 17. YELP KAGGLECHALLENGEyelp_test_set_business.json© Eamonn O’LoughlinCreate rich interactive visualisations of your data
    18. 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. 19. DATA STRUCTURE© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    20. 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. 21. DC.JS LIBRARYBubble ChartLine ChartPie ChartRow ChartBar ChartData TableChoropleth Map© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    22. 22. DESIGN OUR VISUALISATION© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    23. 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. 24. IMPLEMENTATION3 Stages to Implement1.  Development Environment2.  HTML3.  JavaScript© Eamonn O’LoughlinCreate Rich Interactive Visualisations+ +
    25. 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. 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. 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. 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. 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. 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. 31. SEGWAY #3BOOTSTRAP FLUID NESTING© Eamonn O’LoughlinCreate Rich Interactive Visualisations
    32. 32. © Eamonn O’LoughlinCreate rich interactive visualisations of your data
    33. 33. FINAL VISUALISATION (HERE)© Eamonn O’LoughlinCreate Rich Interactive VisualisationsCode
    34. 34. © Eamonn O’LoughlinCreate rich interactive visualisations of your data
    35. 35. THAT’S IT. THANK YOU© Eamonn O’LoughlinCreate rich interactive visualisations of your dataBlue Dog Images from blog of Wendy Rodrigue
    36. 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?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×