This document discusses designing visualizations for big data on the web. It introduces tools like R Shiny and rCharts that allow non-developers to build interactive websites and visualizations without JavaScript or HTML knowledge. The document uses a telecom use case to demonstrate how user personas can inform the design of customizable data profiles and visualizations to help analyze 50,000 daily transactions, 2.2 terabytes of data. Examples include monitoring displays, time series, heat maps, and side-by-side comparisons that could help a corporate strategist analyze trends over time.

1. Click to edit Master title style
Visualizing Big Data on the Web
9/25/13

2. Click to edit Master title style
2
Goals
• Talk about designing for a business opportunity
• Explore the intersection of data design and visual
design
• Introduce some tools to help in prototyping
solutions and visualization
• Discuss the potential for big data design on the web

3. Click to edit Master title style
3
The Opportunity: Real-time Telecom Insights
50,000 transactions a day
18MM+ a year
2.2 Terabytes Disk Space
3 years of data and growing
Demographics
Advertising spend
Events
Social Media
Distribution
Device
Real-time Telecom Switching Data

4. Click to edit Master title style
4
The Challenge: Our prospects are swimming
in data.

5. Click to edit Master title style
5
The Real Goal: Tell a story. Prioritize the data.

6. Click to edit Master title style
6
Off-the-shelf made solution feel off-the-shelf

7. Click to edit Master title style
7
Needed flexibility on how to optimize data and
display

8. Click to edit Master title style
8
First Goal: Access the data

9. Click to edit Master title style
9
Data Flow and Architecture

10. Click to edit Master title style
10
The Front End Framework
Web Application (Front End)
jQuery
AngularJS
d3.js
Twitter Bootstrap
Font Awesome
Javascript, HTML5, CSS3
Java Servlets API
(Service Layer)
1. Parse queries
2. Fetch data
3. Construct JSON
SQL Server /
Amazon
Redshift

11. Click to edit Master title style
11
Approach: Start with user personas
Regional Vice President
In charge of millions in
revenue.
Runs marketing
campaigns locally, gets
percentage of national
ad spend.
Handles regional
promotions and
partnerships.
Corporate marketing
In charge of hundreds
of millions of ad spend
Goaled to drive
acquisition and
retention
Thinks about channels
and customer segments
Corporate strategy
Monitors competitive
landscape and industry
trends
Approves
pricing, product, merge
r and acquisition
strategy
Reports to
CEO, board, and
investors.
Jane Bob Sue

12. Click to edit Master title style
12
Think about how these inform your design
Regional Vice President
In charge of millions in
revenue.
Runs marketing
campaigns locally, gets
percentage of national
ad spend.
Handles regional
promotions and
partnerships.
Jane
Title gives you sense of sphere of concern
Revenue gives you sense of urgency and
resources (aka access to other data)
How they spend their budget gives you more
insight into their sphere of concern. Jane fights
for a piece of the national budget.
Understanding third-party dependencies gives
you a sense of what other data you need to tell
the story.

13. Click to edit Master title style
13
Profile builder: set defaults, save queries
Step 1: Build profile (may use visualization tools to help users with prioritization. What
should I see? Why would I filter something in/out?)

14. Click to edit Master title style
14
Profile page: Jane
Default carrier view: Verizon (change)
Default time period: January 1, 2013 - Present (change)
Default geography: BTA (change)
Default coverage settings: Any 4G (change)
Default demographic: Hispanics (change)
Default tenure: All (change)
Default merger settings:
Nextel – excludes all wins from Nextel
Metro – treats all MetroPCS markets as if they are independent of Tmobile until 4/13
US Cellular – removes all territories that USC sold to Sprint
http://mountaingapsolutions.com/apps/comlinkdata/app/#/data/1/0/2/100/0b
http://comlinkdata.com/apps/comlinkdata/app/#/data/1/0/2/100/0b
http://comlinkdata.com/apps/comlinkdata/app/#/data/1/0/2/100/1b
Saved queries

15. Click to edit Master title style
15
Display options: Jane’s monitoring display

16. Click to edit Master title style
16
Display options: Sue’s time series

17. Click to edit Master title style
17
Display options: Bob’s heat map

18. Click to edit Master title style
18
Use Case: Sue spotting and analyzing trends

19. Click to edit Master title style
19
Display options: Sue monitoring display
What’s abnormal about
this period of time?
 Compare YOY, quarterly
 Check competitive pairs
 Check ad spend
 Check event database

20. Click to edit Master title style
20
Side-by-side time period comparison
Punch out
to selection
statistics

21. Click to edit Master title style
21
Why? Before and after comparisons on core data
32%
52%
22%
15%
33%
23%
14% 10%
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Before April 12, 2013 After April 12, 2013
Sprint Win Composition in Dallas BTA Before and After the
Divergence in Win Share
+20%

22. Click to edit Master title style
22
Same filters applied to supplemental data
*Source: Kantar Media, LLC -- Local Advertising Spend
includes Local Magazines, National Spot
Radio, Newspapers, and Spot TV
59%
96%
127%
0%
20%
40%
60%
80%
100%
120%
140%
National Atlanta BTA Dallas BTA
Combined March and April Local
Advertising Spend* Compared to Average
3.9%
7.2%
8.4%
0%
2%
4%
6%
8%
10%
National Atlanta BTA Dallas BTA
Increase in Overall Market Share after
4/12/13 Compared to Average
HIGH CORRELATION

23. Click to edit Master title style
23
See actual creative in context: how is this media
stored?
Sprint $100 Credit for Switching
Promotion on Samsung Galaxy Phones
Sprint $100 Credit for Switching
Promotion on Any Phone
Started on April 12, 2013
Ran throughout March and up
to April 11, 2013

24. Click to edit Master title style
24
Developers and data geeks tend to have
mutually exclusive sets of skills
Web Developers / Designers /
Engineers
Data Scientists / Analysts /
Researchers
!=

25. Click to edit Master title style
25
Rstudio’s R Shiny is empowering non-developers

26. Click to edit Master title style
26
R Shiny + rCharts = fully interactive website
with zero Javascript or HTML knowledge
Generates d3.js code

27. Click to edit Master title style
27
New method of collaboration and product
development in data-centric companies

28. Click to edit Master title style
28
References
1. R Shiny - http://www.rstudio.com/shiny/
2. rCharts - http://ramnathv.github.io/rCharts/