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