frontend architecture and data visualization
TRANSCRIPT
![Page 1: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/1.jpg)
Frontend Architecture and Data Visualization
@Darragh_Kirwan
![Page 2: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/2.jpg)
Topics we’ll cover
Why we chose the AngularJS framework for our web appsThe User Experience of Data VisualizationsOverview of D3.jsOur front-end architecture roadmapAdvice for teams who are considering using angular
![Page 3: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/3.jpg)
AngularJS is an MVC framework for web appsIt allows you to extend HTML’s syntax to express your app’s componentsVery easy to testFacilitates the re-use of componentsHuge community and lots of resourcesActively maintained by Google
![Page 4: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/4.jpg)
Easy to learnAllows fast prototyping of new featuresAmple ready to use component libraries (bootstrap, material)It is built to facilitate easy testingMVC done right
Why we Chose AngularJS
![Page 5: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/5.jpg)
Live Stats Group
D3 Donut Chart Component
D3 line chartComponent
Live Stats Item
Chart Controls & Legend
![Page 6: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/6.jpg)
Data Visualization Checklist
1. Is a chart necessary?2. Will your users understand it?3. Does it break any basic rules (unintentionally)?4. Are you using the best chart for the data?
![Page 7: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/7.jpg)
1. Is a Chart Necessary?
Tables are often overlooked for data visualizationSortableEasy to export the dataPerfect for showing precise figuresGood for small data sets (e.g.: top 10 bounce pages)
![Page 8: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/8.jpg)
2. Will Your Users Understand it?
![Page 9: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/9.jpg)
What are Humans Good at Interpreting?
http://www.creativebloq.com/how-design-better-data-visualisations-8134175 Relative accuracy of comparison using different basic visual features, from Cleveland and McGill. Visualization from Alberto Cairo’s The Functional Art
![Page 10: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/10.jpg)
C-Level Executives
High level reportsWant to see long-term trendsAverages across various departments
![Page 11: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/11.jpg)
Middle Management & Supervisors
Real-time data for key metrics (team utilisation, call volume, # of customers in queue)Historical reports for user demographicsOption to drill down into further detail is often required
![Page 12: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/12.jpg)
Analysts
Power usersVisualizations should be configurable to show various dimensions of data for a selected period of timeData should be exportable so they can make bespoke reportsShould show trends
![Page 13: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/13.jpg)
Customer Support Advisors
User-specific reportsReal-time data on overall team workload, with the ability to view own contribution
![Page 14: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/14.jpg)
3. Does it Break Any Basic Rules (Unintentionally)?
![Page 15: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/15.jpg)
Don’t mess with the y-axis*
*if it could cause confusion
![Page 16: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/16.jpg)
Inverted Y-Axis
The ‘Stand Your Ground’ law reduced gun deaths?
![Page 17: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/17.jpg)
Not starting the Y-Axis at 0 - not always bad
![Page 18: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/18.jpg)
Not starting the Y-Axis at 0 - not always bad
![Page 19: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/19.jpg)
No Y-Axis at all!
http://qz.com/580859/the-most-misleading-charts-of-2015-fixed/
![Page 20: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/20.jpg)
Redrawn…
http://qz.com/580859/the-most-misleading-charts-of-2015-fixed/
![Page 21: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/21.jpg)
“Use a baseline that shows the data, not the zero point” - E. Tufte
![Page 22: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/22.jpg)
Pie Charts
A bar chart is almost always a better optionHumans perceive length much easier than area/angleNot always bad - can be good for showing simple shares of proportion:
http://www2.le.ac.uk/offices/ld/resources/numerical-data/pie-charts
![Page 23: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/23.jpg)
3D Pie Charts are always bad
![Page 24: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/24.jpg)
4. Pick an Appropriate Chart Type for Your Data.Keep it Simple.
![Page 25: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/25.jpg)
http://www.labnol.org/software/find-right-chart-type-for-your-data/6523/
![Page 26: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/26.jpg)
• What does it actually tell us?
Why not a bar chart/table?
![Page 27: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/27.jpg)
Only use Subject Elements When They Improve User’s Ability to Interpret the Visualization
www.ft.com/intl/cms/s/2/1392ab72-64e2-11e4-ab2d-00144feabdc0.html#axzz48lfLdCDS
![Page 28: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/28.jpg)
Data-Driven Documents
D3 (Data Driven Documents)
![Page 29: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/29.jpg)
Data-Driven Documents
Not your typical charting libraryD3 allows you to manipulate the DOM based on your dataThis makes it very flexible and powerful - not restricted to any visualization typeGives the developer complete control in how the visualisation will look and feelEasy API’s to handle data updates and data manipulation
![Page 30: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/30.jpg)
Future of D3
The D3 library is becoming more modular (import what parts you need)
More automation
Doesn’t appear to be many breaking changes in upcoming 4.0 release, so don’t be afraid to start with that
![Page 31: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/31.jpg)
Future Plans for Frontend Architecture
Internal Components LibraryAltocloud Style GuideUpgrade angular to version 1.5Merge both admin and agent web applications at build time
![Page 32: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/32.jpg)
Advice for teams who are considering using Angular
Use John Papa’s AngularJS style guide and stick to itUse JSHint (this applies to all JS development)2.0 is not production ready yet. Use version 1.5 for the near futureCheck out angular material for fast, responsive prototypingUse the angular-seed or angular-material-seed project to get started quickly (complete w/ unit tests, directory structure)
![Page 33: Frontend Architecture and Data Visualization](https://reader038.vdocuments.net/reader038/viewer/2022102821/58a831571a28abbe408b64a3/html5/thumbnails/33.jpg)
Key Points on the UX of Data Visualizations
Give your charts a title - it provides context
Charts should be interactive, hovering over an element should reveal more information, precise numbers, etc.
Always have empty and error states
“Data visualization is not your creative outlet; data visualisation is about making data understandable.” - Rachel Binx, NASA