Click to edit Master title style
Visualizing Big Data on the Web
9/25/13
Click to edit Master title style
2
Goals
• Talk about designing for a business opportunity
• Explore the intersection of d...
Click to edit Master title style
3
The Opportunity: Real-time Telecom Insights
50,000 transactions a day
18MM+ a year
2.2 ...
Click to edit Master title style
4
The Challenge: Our prospects are swimming
in data.
Click to edit Master title style
5
The Real Goal: Tell a story. Prioritize the data.
Click to edit Master title style
6
Off-the-shelf made solution feel off-the-shelf
Click to edit Master title style
7
Needed flexibility on how to optimize data and
display
Click to edit Master title style
8
First Goal: Access the data
Click to edit Master title style
9
Data Flow and Architecture
Click to edit Master title style
10
The Front End Framework
Web Application (Front End)
jQuery
AngularJS
d3.js
Twitter Boo...
Click to edit Master title style
11
Approach: Start with user personas
Regional Vice President
In charge of millions in
re...
Click to edit Master title style
12
Think about how these inform your design
Regional Vice President
In charge of millions...
Click to edit Master title style
13
Profile builder: set defaults, save queries
Step 1: Build profile (may use visualizati...
Click to edit Master title style
14
Profile page: Jane
Default carrier view: Verizon (change)
Default time period: January...
Click to edit Master title style
15
Display options: Jane’s monitoring display
Click to edit Master title style
16
Display options: Sue’s time series
Click to edit Master title style
17
Display options: Bob’s heat map
Click to edit Master title style
18
Use Case: Sue spotting and analyzing trends
Click to edit Master title style
19
Display options: Sue monitoring display
What’s abnormal about
this period of time?
 C...
Click to edit Master title style
20
Side-by-side time period comparison
Punch out
to selection
statistics
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%
...
Click to edit Master title style
22
Same filters applied to supplemental data
*Source: Kantar Media, LLC -- Local Advertis...
Click to edit Master title style
23
See actual creative in context: how is this media
stored?
Sprint $100 Credit for Switc...
Click to edit Master title style
24
Developers and data geeks tend to have
mutually exclusive sets of skills
Web Developer...
Click to edit Master title style
25
Rstudio’s R Shiny is empowering non-developers
Click to edit Master title style
26
R Shiny + rCharts = fully interactive website
with zero Javascript or HTML knowledge
G...
Click to edit Master title style
27
New method of collaboration and product
development in data-centric companies
Click to edit Master title style
28
References
1. R Shiny - http://www.rstudio.com/shiny/
2. rCharts - http://ramnathv.git...
Upcoming SlideShare
Loading in …5
×

Front endrequirements 09_25_2013

432 views
359 views

Published on

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
432
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Front endrequirements 09_25_2013

    1. 1. Click to edit Master title style Visualizing Big Data on the Web 9/25/13
    2. 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. 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. 4. Click to edit Master title style 4 The Challenge: Our prospects are swimming in data.
    5. 5. Click to edit Master title style 5 The Real Goal: Tell a story. Prioritize the data.
    6. 6. Click to edit Master title style 6 Off-the-shelf made solution feel off-the-shelf
    7. 7. Click to edit Master title style 7 Needed flexibility on how to optimize data and display
    8. 8. Click to edit Master title style 8 First Goal: Access the data
    9. 9. Click to edit Master title style 9 Data Flow and Architecture
    10. 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. 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. 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. 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. 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. 15. Click to edit Master title style 15 Display options: Jane’s monitoring display
    16. 16. Click to edit Master title style 16 Display options: Sue’s time series
    17. 17. Click to edit Master title style 17 Display options: Bob’s heat map
    18. 18. Click to edit Master title style 18 Use Case: Sue spotting and analyzing trends
    19. 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. 20. Click to edit Master title style 20 Side-by-side time period comparison Punch out to selection statistics
    21. 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. 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. 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. 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. 25. Click to edit Master title style 25 Rstudio’s R Shiny is empowering non-developers
    26. 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. 27. Click to edit Master title style 27 New method of collaboration and product development in data-centric companies
    28. 28. Click to edit Master title style 28 References 1. R Shiny - http://www.rstudio.com/shiny/ 2. rCharts - http://ramnathv.github.io/rCharts/

    ×