NEW TECHNOLOGIES FOR VISUALIZATION AND INTERACTION APPLICATIONS IN ARCHITECTURE
Frontend Architecture and Data Visualization
-
Upload
altocloud -
Category
Data & Analytics
-
view
684 -
download
2
Transcript of Frontend Architecture and Data Visualization
Frontend Architecture and Data Visualization
@Darragh_Kirwan
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
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
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
Live Stats Group
D3 Donut Chart Component
D3 line chartComponent
Live Stats Item
Chart Controls & Legend
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?
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)
2. Will Your Users Understand it?
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
C-Level Executives
High level reportsWant to see long-term trendsAverages across various departments
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
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
Customer Support Advisors
User-specific reportsReal-time data on overall team workload, with the ability to view own contribution
3. Does it Break Any Basic Rules (Unintentionally)?
Don’t mess with the y-axis*
*if it could cause confusion
Inverted Y-Axis
The ‘Stand Your Ground’ law reduced gun deaths?
Not starting the Y-Axis at 0 - not always bad
Not starting the Y-Axis at 0 - not always bad
No Y-Axis at all!
http://qz.com/580859/the-most-misleading-charts-of-2015-fixed/
Redrawn…
http://qz.com/580859/the-most-misleading-charts-of-2015-fixed/
“Use a baseline that shows the data, not the zero point” - E. Tufte
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
3D Pie Charts are always bad
4. Pick an Appropriate Chart Type for Your Data.Keep it Simple.
http://www.labnol.org/software/find-right-chart-type-for-your-data/6523/
• What does it actually tell us?
Why not a bar chart/table?
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
Data-Driven Documents
D3 (Data Driven Documents)
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
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
Future Plans for Frontend Architecture
Internal Components LibraryAltocloud Style GuideUpgrade angular to version 1.5Merge both admin and agent web applications at build time
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)
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
We are Hiring!Check out altocloud.com/careers