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.
Visualizing Big Telecom Data and Trends for Marketing Insights
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/
Hinweis der Redaktion
A real use case for big data and design.The challenges and opportunities for designers when working with big data.The tools and skills of data analysts are changing. Your role will change too.
Tanya demos labs?
Query audience about working with data companies. More and more data-centric companies are popping up either as product or service. Disconnect between web dev and data science.Rare to find people with both sets of skills, but seeing convergence in team functions. Need to figure out most productive ways to work together.
Rstudio’s R Shiny is giving data scientists ability to create fully interactive websites. Poll audience about R familiarity and usage. Show first r shiny app (fantasy football, first tab only), shout out to Google Group for help and R Shiny tutorial. Helping data scientists that don’t know web dev and vice versa. Talk about adding d3-based charts and go to next slide.http://spark-1590165977.us-west-2.elb.amazonaws.com/jkatz/SurveyMaps/
Show interactive plots on 2nd tab of fantasy football app and describe rCharts. Show Twitter example. Small company, CEO wanted results, I was bottlenecked by small dev team. Analysis didn’t exist until he could see and interact with the data. Show mapping example.
Why am I telling you all of this, how does this involve you? This has evolved into labs.comlinkdata.com for both internal tools that can be built very quickly as well as prototypes for developers. Everyone talks about agile development, this is a way to create a quick feedback loop between the data teams, business users and product dev teams. Data team specs out the requirements in a shiny app, business users can test, refine the requirements and then feed those reqs to the product dev team. We are using this new method of collaboration at Comlinkdata and I think we’re witnessing a revolution in the way we structure our teams as well as the way we design, build and deploy big data web applications.