├── .DS_Store
├── retention_playbook
    ├── .DS_Store
    ├── metrics_that_matter_p1
    │   ├── postgres.sql
    │   └── presentation.html
    ├── metrics_that_matter_p2
    │   ├── postgres.sql
    │   └── presentation.html
    ├── describing_retention
    │   ├── postgres.sql
    │   └── presentation.html
    └── retention_cohorts
    │   ├── postgres.sql
    │   └── presentation.html
├── user_behavior_playbook
    ├── .DS_Store
    ├── measuring_feature_use
    │   ├── presentation.html
    │   └── postgres.sql
    ├── how_effective_are_interventions
    │   ├── presentation.html
    │   └── postgres.sql
    ├── how_users_move_through_your_product
    │   ├── postgres.sql
    │   └── presentation.html
    └── when_do_users_slip_away
    │   ├── postgres.sql
    │   └── presentation.html
├── LICENSE
└── README.md


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mode/playbook/HEAD/.DS_Store


--------------------------------------------------------------------------------
/retention_playbook/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mode/playbook/HEAD/retention_playbook/.DS_Store


--------------------------------------------------------------------------------
/user_behavior_playbook/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mode/playbook/HEAD/user_behavior_playbook/.DS_Store


--------------------------------------------------------------------------------
/user_behavior_playbook/measuring_feature_use/presentation.html:
--------------------------------------------------------------------------------
1 | <div mode-chart="" dataset="dataset" options="chart_options"></div>
2 | <div mode-table="" dataset="dataset" options="table_options"></div>


--------------------------------------------------------------------------------
/user_behavior_playbook/how_effective_are_interventions/presentation.html:
--------------------------------------------------------------------------------
1 | <div mode-chart dataset="dataset" options="chart_options"></div>
2 | <div mode-table dataset="dataset" options="table_options"></div>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2017 Mode Analytics, Inc.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | playbook
 2 | ========
 3 | 
 4 | Welcome to the Mode Playbook! Playbook is a repository of open-source SQL queries and visualizations you can tailor to your data. All the reports are designed to be used in [Mode](http://www.modeanalytics.com/), and live examples are available in Mode and on the [Playbook](http://about.modeanalytics.com/playbook) page.
 5 | 
 6 | ![example_img](https://modeanalytics.zendesk.com/hc/en-us/article_attachments/201565660/How_Users_Move_Through_Your_Product___Mode.png)
 7 | 
 8 | 
 9 | Playbook reports are designed to answer common questions that many companies ask. Each report provides access to the raw SQL query and the HTML, CSS, and Javascript code that powers the visualization. 
10 | 
11 | To read more, see the [Playbook](http://about.modeanalytics.com/playbook) page on Mode. [Additional documentation](https://modeanalytics.zendesk.com/hc/en-us/articles/203511970-Playbook-Overview) is also available.
12 | 
13 | If you have comments, suggestions for improvements, requests for additional reports—or best of all, analysis that you too would like to open source—we'd love to hear from you. We can be reached at [hi@modeanalytics.com](mailto:hi@modeanalytics.com).
14 | 


--------------------------------------------------------------------------------
/retention_playbook/metrics_that_matter_p1/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203317944
 3 | 
 4 | WITH 
 5 |   users AS (
 6 | 
 7 | SELECT user_id,
 8 |        activated_at
 9 |   FROM tutorial.playbook_users
10 | 
11 | ),
12 | 
13 |   events AS (
14 | 
15 | SELECT user_id,
16 |        event_name,
17 |        occurred_at
18 |   FROM tutorial.playbook_events
19 | )
20 | 
21 | SELECT u.user_id,
22 |        u.activated_at,
23 |        MAX(CASE WHEN e.occurred_at >= u.activated_at + INTERVAL '7 DAY' THEN 1 ELSE 0 END) AS retained,
24 |        COUNT(CASE WHEN e.event_name = 'home_page' THEN e.user_id ELSE NULL END) AS home_page_visits,
25 |        COUNT(CASE WHEN e.event_name = 'search_run' THEN e.user_id ELSE NULL END) AS searches,
26 |        COUNT(CASE WHEN e.event_name = 'send_message' THEN e.user_id ELSE NULL END) AS messages,
27 |        COUNT(CASE WHEN e.event_name = 'like_message' THEN e.user_id ELSE NULL END) AS like_message,
28 |        COUNT(CASE WHEN e.event_name = 'view_inbox' THEN e.user_id ELSE NULL END) AS view_inbox
29 |   FROM users u
30 |   JOIN events e
31 |     ON e.user_id = u.user_id
32 |    AND e.occurred_at >= u.activated_at
33 |    AND e.occurred_at < u.activated_at + INTERVAL '14 DAY'
34 |  GROUP BY 1,2


--------------------------------------------------------------------------------
/retention_playbook/metrics_that_matter_p2/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203317944
 3 | 
 4 | WITH 
 5 |   users AS (
 6 | 
 7 | SELECT user_id,
 8 |        activated_at
 9 |   FROM tutorial.playbook_users
10 | 
11 | ),
12 | 
13 |   events AS (
14 | 
15 | SELECT user_id,
16 |        event_name,
17 |        occurred_at
18 |   FROM tutorial.playbook_events
19 | )
20 | 
21 | SELECT u.user_id,
22 |        u.activated_at,
23 |        MAX(CASE WHEN e.occurred_at >= u.activated_at + INTERVAL '7 DAY' THEN 1 ELSE 0 END) AS retained,
24 |        COUNT(CASE WHEN e.event_name = 'home_page' THEN e.user_id ELSE NULL END) AS home_page_visits,
25 |        COUNT(CASE WHEN e.event_name = 'search_run' THEN e.user_id ELSE NULL END) AS searches,
26 |        COUNT(CASE WHEN e.event_name = 'send_message' THEN e.user_id ELSE NULL END) AS messages,
27 |        COUNT(CASE WHEN e.event_name = 'like_message' THEN e.user_id ELSE NULL END) AS like_message,
28 |        COUNT(CASE WHEN e.event_name = 'view_inbox' THEN e.user_id ELSE NULL END) AS view_inbox
29 |   FROM users u
30 |   JOIN events e
31 |     ON e.user_id = u.user_id
32 |    AND e.occurred_at >= u.activated_at
33 |    AND e.occurred_at < u.activated_at + INTERVAL '14 DAY'
34 |  GROUP BY 1,2


--------------------------------------------------------------------------------
/retention_playbook/describing_retention/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203484670
 3 | 
 4 | WITH 
 5 | 
 6 | users AS (
 7 |   SELECT customer_id AS user_id,
 8 |          signup_date AS activated_at
 9 |     FROM benn.sample_customer_table
10 | ),
11 |   
12 | events AS (
13 |   SELECT customer_id AS user_id,
14 |          event_name,
15 |          event_date AS occurred_at
16 |     FROM benn.sample_event_table
17 | )
18 | 
19 | SELECT DATE_TRUNC('{{time_interval}}',u.activated_at) AS signup_date,
20 | 
21 | {% if time_interval == 'month' %}
22 |        (EXTRACT('year' FROM e.occurred_at) - EXTRACT('year' FROM u.activated_at)) * 12 + 
23 |        (EXTRACT('month' FROM e.occurred_at) - EXTRACT('month' FROM u.activated_at)) - 
24 |        CASE WHEN (CEILING(DATE_PART('day',e.occurred_at) - DATE_PART('day',u.activated_at))) < 0 THEN 1 ELSE 0 END AS user_period,
25 | {% elsif time_interval == 'week' %}
26 |        TRUNC(DATE_PART('day',e.occurred_at - u.activated_at)/7) AS user_period,
27 | {% endif %}
28 | 
29 |        COUNT(DISTINCT e.user_id) AS retained_users
30 |   FROM users u
31 |   JOIN events e
32 |     ON e.user_id = u.user_id
33 |    AND e.occurred_at >= u.activated_at
34 |    AND e.occurred_at <= '2014-10-31'::TIMESTAMP
35 |  WHERE u.activated_at >= '2014-10-31'::TIMESTAMP - INTERVAL '11 {{time_interval}}'
36 |    AND u.activated_at <= '2014-10-31'::TIMESTAMP
37 |  GROUP BY 1,2
38 |  ORDER BY 1,2
39 | 
40 | {% form %}
41 | 
42 | time_interval:
43 |   type: select
44 |   default: month
45 |   options: [[week, week],
46 |             [month, month]
47 |            ]
48 |            
49 | {% endform %}


--------------------------------------------------------------------------------
/user_behavior_playbook/measuring_feature_use/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203326184
 3 | 
 4 | WITH 
 5 | 
 6 | users AS (
 7 | 
 8 |   SELECT user_id,
 9 |          activated_at
10 |     FROM tutorial.playbook_users
11 | ),
12 | 
13 | events AS (
14 |   SELECT user_id,
15 |          event_name,
16 |          occurred_at
17 |     FROM tutorial.playbook_events
18 | )
19 | 
20 | SELECT time_id,
21 | 
22 | 
23 | 
24 |        home_page_visits_users AS home_page_visits,
25 |        searches_users AS searches,
26 |        messages_users AS messages,
27 |        like_message_users AS like_messages,
28 |        view_inbox_users AS view_inbox
29 | 
30 | 
31 |        
32 |   FROM (
33 | SELECT DATE_TRUNC('day',e.occurred_at) AS time_id,
34 |        COUNT(DISTINCT CASE WHEN e.event_name = 'home_page' THEN e.user_id ELSE NULL END) AS home_page_visits_users,
35 |        COUNT(DISTINCT CASE WHEN e.event_name = 'search_run' THEN e.user_id ELSE NULL END) AS searches_users,
36 |        COUNT(DISTINCT CASE WHEN e.event_name = 'send_message' THEN e.user_id ELSE NULL END) AS messages_users,
37 |        COUNT(DISTINCT CASE WHEN e.event_name = 'like_message' THEN e.user_id ELSE NULL END) AS like_message_users,
38 |        COUNT(DISTINCT CASE WHEN e.event_name = 'view_inbox' THEN e.user_id ELSE NULL END) AS view_inbox_users,
39 |        COUNT(CASE WHEN e.event_name = 'home_page' THEN e.user_id ELSE NULL END) AS home_page_visits,
40 |        COUNT(CASE WHEN e.event_name = 'search_run' THEN e.user_id ELSE NULL END) AS searches,
41 |        COUNT(CASE WHEN e.event_name = 'send_message' THEN e.user_id ELSE NULL END) AS messages,
42 |        COUNT(CASE WHEN e.event_name = 'like_message' THEN e.user_id ELSE NULL END) AS like_message,
43 |        COUNT(CASE WHEN e.event_name = 'view_inbox' THEN e.user_id ELSE NULL END) AS view_inbox
44 |   FROM users u
45 |   JOIN events e
46 |     ON e.user_id = u.user_id
47 |    AND e.occurred_at >= '2014-01-01'
48 |    AND e.occurred_at <= '2014-10-31'
49 |  GROUP BY 1
50 |  ORDER BY 1
51 |        ) z


--------------------------------------------------------------------------------
/user_behavior_playbook/how_users_move_through_your_product/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203501570
 3 | 
 4 | WITH 
 5 | 
 6 |   events AS (
 7 | 
 8 | SELECT user_id,
 9 |        event_name,
10 |        occurred_at
11 |   FROM tutorial.playbook_events
12 |  WHERE event_type = 'engagement'
13 | )
14 | 
15 | SELECT e1,
16 |        e2,
17 |        e3,
18 |        e4,
19 |        e5,
20 |        COUNT(*) AS occurrances
21 |   FROM (
22 | --Pivot out first five events in each session
23 | SELECT user_id,
24 |        session,
25 |        MAX(CASE WHEN event_number = 1 THEN event_name ELSE NULL END) AS e1,
26 |        MAX(CASE WHEN event_number = 2 THEN event_name ELSE NULL END) AS e2,
27 |        MAX(CASE WHEN event_number = 3 THEN event_name ELSE NULL END) AS e3,
28 |        MAX(CASE WHEN event_number = 4 THEN event_name ELSE NULL END) AS e4,
29 |        MAX(CASE WHEN event_number = 5 THEN event_name ELSE NULL END) AS e5
30 |   FROM (
31 |        -- Find event number in session
32 |        SELECT z.*,
33 |               ROW_NUMBER() OVER (PARTITION BY user_id, session ORDER BY occurred_at) AS event_number
34 |          FROM (
35 |               -- Sum breaks to find sessions
36 |               SELECT y.*,
37 |                      SUM(break) OVER (ORDER BY user_id,occurred_at ROWS UNBOUNDED PRECEDING) AS session
38 |                 FROM (
39 |                      -- Add flag if last event was more than 10 minutes ago
40 |                      SELECT x.*,
41 |                             CASE WHEN last_event IS NULL OR occurred_at >= last_event + INTERVAL '10 MINUTE' THEN 1 ELSE 0 END AS break
42 |                        FROM (
43 |                             -- Find last event
44 |                             SELECT *,
45 |                                    LAG(occurred_at,1) OVER (PARTITION BY user_id ORDER BY occurred_at) AS last_event
46 |                               FROM events
47 |                               
48 |                             ) x
49 |                      ) y
50 |               ) z
51 |        ) a
52 |  WHERE event_number <= 5
53 |  GROUP BY 1,2
54 |        ) final
55 |  GROUP BY 1,2,3,4,5
56 |  ORDER BY 6 DESC


--------------------------------------------------------------------------------
/user_behavior_playbook/how_effective_are_interventions/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203501550
 3 | 
 4 | WITH 
 5 | 
 6 |   users AS (
 7 | 
 8 | SELECT user_id,
 9 |        activated_at
10 |   FROM tutorial.playbook_users
11 | 
12 | ),
13 | 
14 |   events AS (
15 | 
16 | SELECT user_id,
17 |        occurred_at
18 |   FROM tutorial.playbook_events
19 |  WHERE event_type = 'engagement'
20 |    AND event_name = 'login'
21 | 
22 | ),
23 | 
24 |   interventions AS (
25 | 
26 | SELECT user_id,
27 |        occurred_at
28 |   FROM tutorial.playbook_emails
29 |  WHERE action = 'sent_reengagement_email'
30 | )
31 | 
32 | SELECT z.counter AS time_from_event,
33 |        COUNT(DISTINCT CASE WHEN z.user_age BETWEEN 31 AND 60 AND z.logged_event = TRUE THEN z.user_id ELSE NULL END)/
34 |           COUNT(DISTINCT CASE WHEN z.user_age BETWEEN 31 AND 60 THEN z.user_id ELSE NULL END)::FLOAT AS "31 to 60 days old",
35 |        COUNT(DISTINCT CASE WHEN z.user_age BETWEEN 61 AND 90 AND z.logged_event = TRUE THEN z.user_id ELSE NULL END)/
36 |           COUNT(DISTINCT CASE WHEN z.user_age BETWEEN 61 AND 90 THEN z.user_id ELSE NULL END)::FLOAT AS "61 to 90 days old",
37 |        COUNT(DISTINCT CASE WHEN z.user_age BETWEEN 91 AND 150 AND z.logged_event = TRUE THEN z.user_id ELSE NULL END)/
38 |           COUNT(DISTINCT CASE WHEN z.user_age BETWEEN 91 AND 150 THEN z.user_id ELSE NULL END)::FLOAT AS "91 to 150 days old",
39 |        COUNT(DISTINCT CASE WHEN z.user_age >= 151 AND z.logged_event = TRUE THEN z.user_id ELSE NULL END)/
40 |           COUNT(DISTINCT CASE WHEN z.user_age >= 151 THEN z.user_id ELSE NULL END)::FLOAT AS "151 days and older"
41 |   FROM (
42 | SELECT u.user_id,
43 |        EXTRACT('day' FROM i.occurred_at - u.activated_at) AS user_age,
44 |        i.occurred_at,
45 |        u.activated_at,
46 |        c.counter,
47 |        CASE WHEN e.occurred_at IS NOT NULL THEN TRUE ELSE FALSE END AS logged_event
48 |   FROM interventions i
49 |   JOIN users u
50 |     ON u.user_id = i.user_id
51 |    AND u.activated_at < i.occurred_at
52 |   JOIN (SELECT s.a - 30 AS counter FROM generate_series(0,60) AS s(a)) c
53 |     ON c.counter >= -30
54 |    AND c.counter <= 30
55 |   LEFT JOIN events e
56 |     ON e.user_id = i.user_id
57 |    AND EXTRACT('day' FROM e.occurred_at - i.occurred_at) = c.counter
58 |  WHERE EXTRACT('day' FROM NOW() - i.occurred_at) >= 30
59 |        ) z
60 |  GROUP BY 1
61 |  ORDER BY 1
62 | LIMIT 100


--------------------------------------------------------------------------------
/retention_playbook/retention_cohorts/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203503600
 3 | 
 4 | WITH 
 5 | 
 6 | users AS (
 7 |   SELECT user_id,
 8 |          activated_at
 9 |     FROM tutorial.playbook_users
10 | ),
11 | 
12 | events AS (
13 |   SELECT user_id,
14 |          occurred_at,
15 |          event_name
16 |     FROM tutorial.playbook_events
17 |    WHERE event_type = 'engagement'
18 | )
19 | 
20 | SELECT CASE WHEN dow = 0 THEN 'Sunday'
21 |             WHEN dow = 1 THEN 'Monday'
22 |             WHEN dow = 2 THEN 'Tuesday'
23 |             WHEN dow = 3 THEN 'Wednesday'
24 |             WHEN dow = 4 THEN 'Thursday'
25 |             WHEN dow = 5 THEN 'Friday'
26 |             WHEN dow = 6 THEN 'Saturday'
27 |             ELSE 'error' END AS "Signup day",
28 |        COUNT(*) AS users,
29 |        COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '2 DAY' AND z.r_1_day > 0 THEN z.user_id ELSE NULL END)/
30 |           (COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '2 DAY' THEN z.user_id ELSE NULL END) + 1)::FLOAT AS "1 day retention",
31 |        COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '14 DAY' AND z.r_7_day > 0 THEN z.user_id ELSE NULL END)/
32 |           (COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '14 DAY' THEN z.user_id ELSE NULL END) + 1)::FLOAT AS "7 day retention",
33 |        COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '21 DAY' AND z.r_14_day > 0 THEN z.user_id ELSE NULL END)/
34 |           (COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '21 DAY' THEN z.user_id ELSE NULL END) + 1)::FLOAT AS "14 day retention",
35 |        COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '35 DAY' AND z.r_28_day > 0 THEN z.user_id ELSE NULL END)/
36 |           (COUNT(CASE WHEN z.activated_at <= NOW() - INTERVAL '35 DAY' THEN z.user_id ELSE NULL END) + 1)::FLOAT AS "28 day retention"
37 |   FROM (
38 | SELECT u.user_id,
39 |        EXTRACT('DOW' FROM u.activated_at) AS dow,
40 |        u.activated_at,
41 |        COUNT(CASE WHEN e.occurred_at >= u.activated_at + INTERVAL '1 DAY' AND e.occurred_at < u.activated_at + INTERVAL '2 DAY' 
42 |                   THEN u.user_id ELSE NULL END) AS r_1_day,
43 |        COUNT(CASE WHEN e.occurred_at >= u.activated_at + INTERVAL '7 DAY' AND e.occurred_at < u.activated_at + INTERVAL '14 DAY' 
44 |                   THEN u.user_id ELSE NULL END) AS r_7_day,
45 |        COUNT(CASE WHEN e.occurred_at >= u.activated_at + INTERVAL '14 DAY' AND e.occurred_at < u.activated_at + INTERVAL '21 DAY' 
46 |                   THEN u.user_id ELSE NULL END) AS r_14_day,
47 |        COUNT(CASE WHEN e.occurred_at >= u.activated_at + INTERVAL '28 DAY' AND e.occurred_at < u.activated_at + INTERVAL '35 DAY' 
48 |                   THEN u.user_id ELSE NULL END) AS r_28_day
49 |   FROM users u
50 |   LEFT JOIN events e
51 |     ON e.user_id = u.user_id
52 |    AND e.occurred_at >= u.activated_at
53 |    AND e.occurred_at < u.activated_at + INTERVAL '35 DAY'
54 |  WHERE u.activated_at IS NOT NULL
55 |  GROUP BY 1,2,3
56 |        ) z
57 |  GROUP BY dow
58 |  ORDER BY dow
59 | LIMIT 100


--------------------------------------------------------------------------------
/user_behavior_playbook/when_do_users_slip_away/postgres.sql:
--------------------------------------------------------------------------------
 1 | -- For details on how to use this report, visit
 2 | -- https://modeanalytics.zendesk.com/hc/en-us/articles/203326234
 3 | 
 4 | 
 5 | WITH 
 6 | 
 7 |   events AS (
 8 |   
 9 | SELECT user_id,
10 |        occurred_at
11 |   FROM tutorial.playbook_events
12 |  WHERE event_name = 'send_message'
13 |  
14 | )
15 | 
16 | SELECT days_since_last_event AS "Days since last event",
17 | 
18 | 
19 | 
20 | 
21 |        COUNT(CASE WHEN event_number BETWEEN 1 AND 5 AND event_number < total_events THEN user_id ELSE NULL END)/
22 |           (COUNT(CASE WHEN event_number BETWEEN 1 AND 5 THEN user_id ELSE NULL END) + 1)::FLOAT AS "1-5",
23 |        COUNT(CASE WHEN event_number BETWEEN 6 AND 10 AND event_number < total_events THEN user_id ELSE NULL END)/
24 |           (COUNT(CASE WHEN event_number BETWEEN 6 AND 10 THEN user_id ELSE NULL END) + 1)::FLOAT AS "6-10",
25 |        COUNT(CASE WHEN event_number BETWEEN 11 AND 15 AND event_number < total_events THEN user_id ELSE NULL END)/
26 |           (COUNT(CASE WHEN event_number BETWEEN 11 AND 15 THEN user_id ELSE NULL END) + 1)::FLOAT AS "10-15",
27 |        COUNT(CASE WHEN event_number BETWEEN 16 AND 20 AND event_number < total_events THEN user_id ELSE NULL END)/
28 |           (COUNT(CASE WHEN event_number BETWEEN 16 AND 20 THEN user_id ELSE NULL END) + 1)::FLOAT AS "16-20",
29 |        COUNT(CASE WHEN event_number BETWEEN 21 AND 25 AND event_number < total_events THEN user_id ELSE NULL END)/
30 |           (COUNT(CASE WHEN event_number BETWEEN 21 AND 25 THEN user_id ELSE NULL END) + 1)::FLOAT AS "21-25",
31 |        COUNT(CASE WHEN event_number BETWEEN 26 AND 30 AND event_number < total_events THEN user_id ELSE NULL END)/
32 |           (COUNT(CASE WHEN event_number BETWEEN 26 AND 30 THEN user_id ELSE NULL END) + 1)::FLOAT AS "26-30",
33 |        COUNT(CASE WHEN event_number BETWEEN 31 AND 35 AND event_number < total_events THEN user_id ELSE NULL END)/
34 |           (COUNT(CASE WHEN event_number BETWEEN 31 AND 35 THEN user_id ELSE NULL END) + 1)::FLOAT AS "31-35",
35 |        COUNT(CASE WHEN event_number BETWEEN 36 AND 40 AND event_number < total_events THEN user_id ELSE NULL END)/
36 |           (COUNT(CASE WHEN event_number BETWEEN 36 AND 40 THEN user_id ELSE NULL END) + 1)::FLOAT AS "36-40",
37 |        COUNT(CASE WHEN event_number BETWEEN 41 AND 45 AND event_number < total_events THEN user_id ELSE NULL END)/
38 |           (COUNT(CASE WHEN event_number BETWEEN 41 AND 45 THEN user_id ELSE NULL END) + 1)::FLOAT AS "41-45",
39 |        COUNT(CASE WHEN event_number BETWEEN 46 AND 50 AND event_number < total_events THEN user_id ELSE NULL END)/
40 |           (COUNT(CASE WHEN event_number BETWEEN 46 AND 50 THEN user_id ELSE NULL END) + 1)::FLOAT AS "46-50",
41 |        COUNT(CASE WHEN event_number BETWEEN 51 AND 55 AND event_number < total_events THEN user_id ELSE NULL END)/
42 |           (COUNT(CASE WHEN event_number BETWEEN 51 AND 55 THEN user_id ELSE NULL END) + 1)::FLOAT AS "51-55",
43 |        COUNT(CASE WHEN event_number BETWEEN 56 AND 60 AND event_number < total_events THEN user_id ELSE NULL END)/
44 |           (COUNT(CASE WHEN event_number BETWEEN 56 AND 60 THEN user_id ELSE NULL END) + 1)::FLOAT AS "56-60",
45 |        COUNT(CASE WHEN event_number BETWEEN 61 AND 65 AND event_number < total_events THEN user_id ELSE NULL END)/
46 |           (COUNT(CASE WHEN event_number BETWEEN 61 AND 65 THEN user_id ELSE NULL END) + 1)::FLOAT AS "61-65",
47 |        COUNT(CASE WHEN event_number BETWEEN 66 AND 70 AND event_number < total_events THEN user_id ELSE NULL END)/
48 |           (COUNT(CASE WHEN event_number BETWEEN 66 AND 70 THEN user_id ELSE NULL END) + 1)::FLOAT AS "66-70",
49 |        COUNT(CASE WHEN event_number BETWEEN 71 AND 75 AND event_number < total_events THEN user_id ELSE NULL END)/
50 |           (COUNT(CASE WHEN event_number BETWEEN 71 AND 75 THEN user_id ELSE NULL END) + 1)::FLOAT AS "71-75"
51 | 
52 | 
53 | 
54 | 
55 |   FROM (
56 | 
57 | SELECT c.counter AS days_since_last_event,
58 |        x.*
59 |   FROM (SELECT s.a AS counter FROM generate_series(0,100) AS s(a)) c
60 |   LEFT JOIN ( 
61 |        SELECT e.user_id,
62 |               e.occurred_at,
63 |               EXTRACT('day' FROM NOW() - e.occurred_at) AS days_until_now,
64 |               COUNT(*) OVER (PARTITION BY e.user_id) AS total_events,
65 |               ROW_NUMBER() OVER (PARTITION BY e.user_id ORDER BY e.occurred_at) AS event_number,
66 |               COALESCE(
67 |                 EXTRACT('DAY' FROM LEAD(e.occurred_at,1) OVER (PARTITION BY e.user_id ORDER BY e.occurred_at) - e.occurred_at),
68 |                 EXTRACT('DAY' FROM NOW() - e.occurred_at)
69 |               ) AS days_until_next
70 |          FROM events e
71 |        ) x
72 |     ON x.days_until_next > c.counter
73 |        ) z
74 |  WHERE days_until_now >= 30
75 |    AND days_since_last_event <= 100
76 |    AND event_number <= 75
77 |  GROUP BY 1
78 |  ORDER BY 1


--------------------------------------------------------------------------------
/retention_playbook/retention_cohorts/presentation.html:
--------------------------------------------------------------------------------
  1 | <link href="https://cdn.rawgit.com/jaz303/tipsy/master/src/stylesheets/tipsy.css" rel="stylesheet" type="text/css">
  2 | <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  3 | <style>
  4 | 
  5 | body {
  6 |   color: #788a8c;
  7 | }
  8 | 
  9 | table {
 10 |   margin: 0 auto;
 11 | }
 12 | 
 13 | .tipsy { font-size: 14px; }
 14 | 
 15 | .btn {
 16 |   color: #788a8c;
 17 |   background-color: white;
 18 |   border: 1px Solid #5b7b94;
 19 |   height:25px;
 20 |   line-height: 25px;
 21 |   width: 80px;
 22 |   cursor: pointer;
 23 |   padding: 2px 0px 0px 0px;
 24 |   margin: 1px;
 25 |   border-radius: 3px;
 26 |   text-align: center;
 27 | }
 28 | 
 29 | .btn:hover {
 30 |   background-color: #eee;
 31 | }
 32 | 
 33 | .btn.active {
 34 |   background-color: #81CADA;
 35 |   border: 1px Solid #81CADA;
 36 |   color: white;
 37 | }
 38 | 
 39 | .btn.active:hover {
 40 |   background-color: #74B6C4;
 41 |   border: 1px Solid #74B6C4;
 42 | }
 43 | 
 44 | select {
 45 |   color: #788a8c;
 46 |   border-color: #5b7b94;
 47 |   background-color: transparent;
 48 |   margin: 10px;
 49 |   height: 25px;
 50 | }
 51 | 
 52 | td { 
 53 |   height: 30px;
 54 | }
 55 | 
 56 | .cell-string { text-align: left; padding: 5px; }
 57 | .cell-number { text-align: right; padding: 5px; }
 58 | 
 59 | th {
 60 |   background-color: #8B979C;
 61 |   color: #fff;
 62 |   font-weight: normal;
 63 |   font-size: 12px;
 64 |   border-bottom: 2px solid white;
 65 |   border-right: 2px solid white !important;
 66 |   text-transform: uppercase;
 67 |   text-align: center;
 68 |   vertical-align: middle;
 69 | }
 70 | 
 71 | th.option-header {
 72 |   padding: 15px 8px 3px 8px;
 73 | }
 74 | 
 75 | .sort:hover {
 76 |   cursor: pointer;
 77 | }
 78 | 
 79 | .buttons {
 80 |   padding-top: 10px;
 81 |   padding-bottom: 5px;
 82 |   margin: 5px;
 83 |   text-align: center;
 84 | }
 85 | 
 86 | .hide {
 87 |   opacity: 0;
 88 | }
 89 | 
 90 | </style>
 91 | 
 92 | <div class="buttons">
 93 |   Gradient options:
 94 |   <select>
 95 |     <option value="Blues">Blues</option>
 96 |     <option value="Reds">Reds</option>
 97 |     <option value="RdBu">Red to Blue</option>
 98 |     <option value="RdYlGn">Red to Green</option>
 99 |     <option value="YlOrRd">Yellow to Red</option>
100 |     <option value="YlGn">Yellow to Green</option>
101 |   </select>
102 |   <div title="Each column uses an independent gradient" class="btn active" id="columns">By Column</div>
103 |   <div title="All columns share a single gradient" class="btn" id="all">Full table</div>
104 |   <div title="Hide all gradients" class="btn" id="no-gradient">None</div>
105 | </div>
106 | <div id="table"></div>
107 | <script src="//cdn.rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
108 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js"></script>
109 | <script>
110 | 
111 | var cma = d3.format(",");
112 | 
113 | var data = dataset.content,
114 |     columns = dataset.columns;
115 | 
116 | var colorScale = colorbrewer.Blues[9];
117 | var allColumnsShareGradient = false;
118 | var gradientType = 1;
119 | 
120 | var colInfo =  getRanges()
121 | var ranges = colInfo[0];
122 | var incCols = colInfo[1];
123 | var scales = getScales(ranges,colorScale,allColumnsShareGradient,incCols);
124 |     
125 | var table = d3.select("#table")
126 |     .append("table")
127 |     .attr("class","table")
128 | 
129 | table.selectAll("th")
130 |     .data(columns)
131 |   .enter().append("th")
132 |     .html(function(d) { return d.name + "<br>"; })
133 |     
134 | drawTable(data,columns)
135 | drawCheckboxes();
136 | 
137 | function drawTable(data,columns) {
138 |   
139 |   table.selectAll("row")
140 |       .data(data)
141 |     .enter().append("tr")
142 |       .attr("class","row")
143 |       .selectAll("td")
144 |       .data(function(d) { return columnValues(d,columns); })
145 |     .enter().append("td")
146 |       .attr("class",function(d) { 
147 |         if (d.type == "string") { return "cell-string"; }
148 |         else if (d.type == "number" || d.type == "integer" || d.type == "float") { return "cell-number"; }
149 |       })
150 |       .text(function(d) { 
151 |         if (d.type == "number" || d.type == "float") { return cma(d3.round(d.value,3)); }
152 |         else if (d.type == "integer") { return cma(d.value); }
153 |         else { return d.value; }
154 |       })
155 |   
156 |   drawShades(scales,incCols,gradientType);
157 | }
158 |       
159 |   
160 | function columnValues(row,columns) {
161 |   var arr = [];
162 |   
163 |   columns.forEach(function(c) {
164 |     var obj = { value:row[c.name],type:c.type }
165 |     arr.push(obj)
166 |   })
167 |   return arr
168 | }
169 | 
170 | function sortFn(a,b) {
171 |   if (a["orders per day"] > b["orders per day"]) {
172 |     return 1;
173 |   }
174 |   if (a["orders per day"] < b["orders per day"]) {
175 |     return -1;
176 |   }
177 |   return 0;
178 | }
179 | 
180 |     
181 | $('select').change(function(){
182 |   var input = $(this).val();
183 |   colorScale = colorbrewer[input][9];
184 |   var scales = getScales(ranges,colorScale,allColumnsShareGradient,incCols);
185 |   drawShades(scales,incCols,gradientType);
186 | })
187 | 
188 | $("input[type='checkbox']").change(function(){
189 |   incCols = [];
190 |   checkboxes = $("input[type='checkbox']")
191 |   
192 |   checkboxes.each(function(c) {
193 |     var isChecked = $(this).prop('checked')
194 |     if (isChecked == true) { 
195 |       var colIndex = $(this).val().slice(1,3)
196 |       incCols.push(+colIndex); 
197 |     }
198 |   })
199 |   
200 |   var scales = getScales(ranges,colorScale,allColumnsShareGradient,incCols);
201 |   
202 |   drawShades(scales,incCols,gradientType);
203 | })
204 | 
205 | $('.btn').click(function(){
206 |   
207 |   $(".btn").removeClass("active");
208 |   $(this).addClass("active");
209 |   
210 |   var btnId = $(this).attr("id")
211 |   
212 |   if (btnId == "all") { gradientType = 1; } 
213 |   else if (btnId == "columns") { gradientType = 0; }
214 |   else { gradientType = -1; }
215 |   
216 |   var scales = getScales(ranges,colorScale,gradientType,incCols);
217 |   drawShades(scales,incCols,gradientType);
218 | })
219 | 
220 | $(".btn").tipsy({fade:true});
221 | 
222 | 
223 |     
224 | function drawShades(scales,included,gradientType) {
225 |   var rows = $("tr")
226 |   rows.each(function(r) {
227 |     
228 |     var cells = $(this).children()
229 |     cells.each(function(c) {
230 |       if (included.indexOf(c) != -1 && gradientType != -1) {
231 |         
232 |         var col = scales.filter(function (column) { return column.ind == c; });
233 |         
234 |         var bg = col[0].bgScale;
235 |         var ft = col[0].ftScale;
236 |         
237 |         var value = +$(this).text().replace(/\,/g,'');
238 |         
239 |         this.style.color = ft(value)
240 |         this.style.background = bg(value);
241 |         $(this).css("border","1px solid" + bg(value))
242 |         
243 |       } else {
244 |         
245 |         this.style.color = "#666"
246 |         this.style.background = "#ffffff"
247 |         
248 |         $(this).css("border-left","1px solid #ffffff")
249 |         $(this).css("border-right","1px solid #ffffff")
250 |         
251 |         $(this).css("border-bottom","1px solid #f0f0f0")
252 |       }
253 |     })
254 |   })
255 | }
256 |     
257 | function getScales(ranges,colorScale,all,included) {
258 |   var fontScale = [];
259 |   
260 |   colorScale.forEach(function(c) {
261 |     var c = c.substring(1)
262 |     var rgb = parseInt(c, 16);
263 |     var r = (rgb >> 16) & 0xff;  var g = (rgb >>  8) & 0xff; var b = (rgb >>  0) & 0xff;
264 |     var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
265 |     if (luma < 150) { ft = "#ccc" } else { ft = "#666" }
266 |     fontScale.push(ft)
267 |   })
268 |   
269 |   if (all == 1) {
270 |     var combined = [];
271 |     ranges.forEach(function(r,i) { 
272 |       if (included.indexOf(r.ind) != -1) {combined = combined.concat(r.range) }
273 |     })
274 |     fullRange = d3.extent(combined);
275 |     
276 |     ranges.forEach(function(r) {
277 |       r.bgScale = d3.scale.quantize().domain(fullRange).range(colorScale);
278 |       r.ftScale = d3.scale.quantize().domain(fullRange).range(fontScale);
279 |     })
280 |   } else {
281 |     ranges.forEach(function(r) {
282 |       r.bgScale = d3.scale.quantize().domain(r.range).range(colorScale);
283 |       r.ftScale = d3.scale.quantize().domain(r.range).range(fontScale);
284 |     })
285 |   }
286 |   return ranges
287 | }
288 |     
289 | function drawCheckboxes() {
290 |   
291 |   var thsObj = d3.selectAll("th")
292 |   
293 |   thsObj.forEach(function(ths) {
294 |     ths.forEach(function(th,i) {
295 |       if (incCols.indexOf(i) != -1) {
296 |         
297 |         d3.select(th)
298 |           .attr("class","option-header")
299 |           .html(th.textContent + "<br>" + 
300 |           "<i class='sort controls hide fa fa-sort'></i>&nbsp;&nbsp;&nbsp;")
301 |         
302 |         d3.select(th)
303 |           .append("input")
304 |           .attr("type","checkbox")
305 |           .attr("name","columns")
306 |           .attr("value","c" + i)
307 |           .attr("class","controls checkbox hide")
308 |           .attr("checked","checked")
309 |       }
310 |     })
311 |   })
312 | }
313 | 
314 | function getRanges() {
315 |   var arr = [];
316 |   var incCols = [];
317 |   var columns = dataset.columns;
318 |   
319 |   columns.forEach(function(c,i) {
320 |     if (c.type == 'integer' || c.type == 'float' || c.type == 'number') {
321 |       var range = d3.extent(_.pluck(dataset.content,c.name))
322 |       var ent = {name:c.name,ind:i,range:range}
323 |       arr.push(ent)
324 |       incCols.push(i);
325 |     }
326 |   })
327 |   return [arr,incCols];
328 | }
329 | 
330 | function sortData(data,column,direction) {
331 |   d3.selectAll("tr").remove()
332 |   var sorted = _.sortBy(data, function(d){ return direction * d[column]; })
333 |   drawTable(sorted,columns)
334 | }
335 | 
336 | $("th").hover(
337 |   function() {$(".controls").removeClass("hide") },
338 |   function() {$(".controls").addClass("hide") }
339 | );
340 | 
341 | $(".sort").click(function() {
342 |   var iconClass = $(this).attr("class");
343 |   var column = $(this).parent().text().replace(/^\s+|\s+$/g, '');
344 |   
345 |   if (iconClass.indexOf("fa-sort-up") != -1) {
346 |     $(this).removeClass("fa-sort-up");
347 |     $(this).addClass("fa-sort-down");
348 |     sortData(data,column,-1)
349 |   } else if (iconClass.indexOf("fa-sort-down") != -1) {
350 |     $(this).removeClass("fa-sort-down");
351 |     $(this).addClass("fa-sort-up");
352 |     sortData(data,column,1)
353 |   } else if (iconClass.indexOf("fa-sort") != -1) { 
354 |     $(".fa-sort-up").removeClass("fa-sort-up").addClass("fa-sort")
355 |     $(".fa-sort-down").removeClass("fa-sort-down").addClass("fa-sort")
356 |     $(this).removeClass("fa-sort");
357 |     $(this).addClass("fa-sort-down");
358 |     sortData(data,column,-1)
359 |   }
360 | })
361 | 
362 | </script>


--------------------------------------------------------------------------------
/retention_playbook/metrics_that_matter_p2/presentation.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .bar-all { fill: #ccc; }
  3 | .bar-action { fill: #6baed6; }
  4 | .bar-retain { fill: #fc9272; }
  5 | .bar-both { fill: #6a51a3; }
  6 | 
  7 | .legend {
  8 |   color: #7A7A7A;
  9 |   font-size: 10px;
 10 | }
 11 | 
 12 | .legend-text {
 13 |   fill: #666;
 14 |   font-size: 11px;
 15 | }
 16 | 
 17 | .legend-text-big {
 18 |   fill: #666;
 19 |   font-size: 14px;
 20 | }
 21 | 
 22 | .bold {
 23 |   font-weight: bold;
 24 | }
 25 | 
 26 | .legend-line {
 27 |   fill: none;
 28 |   stroke: #ccc;
 29 | }
 30 | 
 31 | .small-title {
 32 |   text-align: center;
 33 |   font-size: 14px;
 34 |   text-align: center;
 35 |   color: #666;
 36 | }
 37 | 
 38 | .ratio {
 39 |   font-size: 12px;
 40 | }
 41 | 
 42 | .filter-legend {
 43 |   font-size: 10px;
 44 |   text-align: center;
 45 |   color: #666;
 46 | }
 47 | 
 48 | .btn {
 49 |   color: #788a8c;
 50 |   background-color: white;
 51 |   border: 1px Solid #5b7b94;
 52 |   height:25px;
 53 |   line-height: 25px;
 54 |   width: 120px;
 55 |   cursor: pointer;
 56 |   padding: 2px 0px 0px 0px;
 57 |   margin: 1px;
 58 |   border-radius: 3px;
 59 |   text-align: center;
 60 | }
 61 | 
 62 | .btn:hover {
 63 |   background-color: #eee;
 64 | }
 65 | 
 66 | .btn.active {
 67 |   background-color: #81CADA;
 68 |   border: 1px Solid #81CADA;
 69 |   color: white;
 70 | }
 71 | 
 72 | .btn.active:hover {
 73 |   background-color: #74B6C4;
 74 |   border: 1px Solid #74B6C4;
 75 | }
 76 | 
 77 | #graphic-legend, #graphic {
 78 |   text-align: center;
 79 | }
 80 | 
 81 | p {
 82 |   font-size: 18px;
 83 |   color: #666;
 84 |   text-align: center;
 85 | }
 86 | 
 87 | table {
 88 |   vertical-align: middle;
 89 | }
 90 | 
 91 | form {
 92 |   font-size: 10px;
 93 |   text-align: center;
 94 | }
 95 | 
 96 | input {
 97 |   width: 20px;
 98 |   text-align: center;
 99 |   border: 1px solid #c9cdce;
100 |   border-radius: 2px;
101 | }
102 | 
103 | .buttons {
104 |   padding-top: 10px;
105 |   padding-bottom: 5px;
106 |   margin: 5px;
107 |   text-align: center;
108 |   padding-bottom: 20px;
109 | }
110 | 
111 | .filter-container {
112 |   display: block;
113 |   margin: 0 auto;
114 |   text-align: center;
115 | }
116 | 
117 | .main {
118 |   margin: 0 auto;
119 |   text-align: center;
120 |   margin-bottom: 10px;
121 |   background: #eee;
122 |   max-width: 800px;
123 |   padding-bottom: 20px;
124 | }
125 | 
126 | .filter {
127 |   position: relative;
128 |   vertical-align: middle;
129 |   display: inline-block;
130 |   margin-left: 5px;
131 |   text-align: center;
132 |   width: 110px;
133 |   height: 20px;
134 |   line-height: 20px;
135 |   font-size: 12px;
136 | }
137 | 
138 | .wrapper {
139 |   display: inline-block;
140 |   vertical-align: middle;
141 |   line-height: normal;  
142 | }
143 |   
144 | </style>
145 | <p>Retention by Action in Users' First Week</p>
146 | 
147 | <div class="main">
148 |   <p style="font-size:16px; padding-top: 8px; margin-bottom: 0px">Filters</p>
149 |   <p style="font-size:12px; padding-bottom: 8px; margin-top: 0px">
150 |     Show users who have taken each of these actions at least the chosen number of times.
151 |   </p>
152 |   <div class="filter-container"></div>
153 | </div>
154 | <div class="buttons">
155 |   <div class="btn active" id="count">Counts</div>
156 |   <div class="btn" id="percent">Percentages</div>
157 | </div>
158 | 
159 | 
160 | <div id="graphic"></div>
161 | <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
162 | <script src="https://cdn.rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
163 | <script>
164 | 
165 | var drop = ["username","activated_at","retained","retained_string","source","user_id"];
166 | 
167 | var data = dataset.content;
168 | var headers = d3.keys(data[0]);
169 | var headers = _.filter(headers,function(d) { return drop.indexOf(d) == -1; });
170 | 
171 | var p = d3.format(".1%");
172 | var c = d3.format(",");
173 | 
174 | var margin = {top: 75, right: 10, bottom: 140, left: 10},
175 |     width = 800 - margin.left - margin.right,
176 |     height = 20
177 | 
178 | var x = d3.scale.linear()
179 |     .range([0, width]);
180 | 
181 | drawTopFilter(headers)
182 | 
183 | FILTER = {};
184 | display = "count"
185 | 
186 | headers.forEach(function(h) {
187 |   FILTER[h] = 1
188 | })
189 | 
190 | userObj = getUsers(FILTER)
191 | drawBarGraph(userObj,display)
192 | 
193 | 
194 | $( ".filter-input" ).change(function() {
195 |   var header = $(this).attr("id"),
196 |       header = header.slice(7,100);
197 |   
198 |   var value = $(this).val();
199 |   
200 |   FILTER[header] = value;
201 |   
202 |   userObj = getUsers(FILTER)
203 |   drawBarGraph(userObj,display)
204 | })
205 | 
206 | $('.btn').click(function(){
207 |   
208 |   $(".btn").removeClass("active");
209 |   $(this).addClass("active");
210 |   
211 |   display = $(this).attr("id")
212 |   drawBarGraph(userObj,display)
213 | })
214 | 
215 | function drawTopFilter(headers) {
216 |   
217 |   var container = d3.select(".filter-container")
218 |   
219 |   container.selectAll(".wrapper")
220 |       .data(headers)
221 |     .enter().append("span")
222 |        .attr("class","wrapper")
223 |        
224 |        .html(function(h) { return "<div class='filter'>" + h + "</div><br>"; })
225 |     .append("input")
226 |       .attr("class","filter-input")
227 |       .attr("id",function(d) { return "filter-" + d; })
228 |       .attr("type","text")
229 |       .attr("value",1)
230 |   
231 | }
232 | 
233 | function getUsers(filter) {
234 |   
235 |   var fd = data;
236 |   
237 |   headers.forEach(function(h) {
238 |     fd = _.filter(fd,function(d){ return d[h] >= filter[h]; });
239 |   })
240 |   
241 |   var all = data.length;
242 |   var action = fd.length;
243 |   
244 |   var retained = _.filter(data,function(d){ return d["retained"] == 1; });
245 |   var both = _.filter(fd,function(d){ return d["retained"] == 1; });
246 |   
247 |   var b1 = retained.length - both.length;
248 |   var b2 = both.length;
249 |   var b3 = action - both.length;
250 |   
251 |   var score = b2/(b1 + b2 + b3);
252 |   var retPct = b2/(b2 + b3);
253 |   var actionPct = b2/(b1 + b2);
254 |   
255 |   var arr = {
256 |       all:all,
257 |       bars: [b1,b2,b3],
258 |       score: score,
259 |       action: action,
260 |       retPct: retPct,
261 |       actionPct: actionPct
262 |   }
263 |   return arr
264 | }
265 | 
266 | function drawBarGraph(barObj,displayType) {
267 |   
268 |   d3.select("svg").remove();
269 |   
270 |   var bars = barObj.bars,
271 |       all = barObj.all,
272 |       barHeight = 30,
273 |       offset = 240;
274 |   
275 |   var r = bars[0] + bars[1],
276 |       a = bars[1] + bars[2],
277 |       rNoA = bars[0],
278 |       ra = bars[1],
279 |       aNoR = bars[2],
280 |       noRA = all - bars[0] - bars[1] - bars[2];
281 |   
282 |   if (displayType == "count") {
283 |     denom = 1,
284 |     f = c;
285 |   } else {
286 |     denom = all, 
287 |     f = p;
288 |   }
289 |   
290 |   var g = d3.select("#graphic").append("svg")
291 |     .attr("width", width + margin.left + margin.right)
292 |     .attr("height", height + margin.top + margin.bottom)
293 |   .append("g")
294 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
295 | 
296 |   x.domain([0,all])
297 |   
298 |   g.append("rect")
299 |       .attr("class","bar-retain")
300 |       .attr("x",x(0))
301 |       .attr("width",x(rNoA))
302 |       .attr("y",0)
303 |       .attr("height",barHeight);
304 |   
305 |   g.append("rect")
306 |       .attr("class","bar-both")
307 |       .attr("x",x(rNoA))
308 |       .attr("width",x(ra))
309 |       .attr("y",0)
310 |       .attr("height",barHeight);
311 |   
312 |   g.append("rect")
313 |       .attr("class","bar-action")
314 |       .attr("x",x(r))
315 |       .attr("width",x(aNoR))
316 |       .attr("y",0)
317 |       .attr("height",barHeight);
318 |   
319 |   g.append("rect")
320 |       .attr("class","bar-all")
321 |       .attr("x",x(r + aNoR))
322 |       .attr("width",x(noRA))
323 |       .attr("y",0)
324 |       .attr("height",barHeight);
325 |   
326 |   g.selectAll(".legend-line")
327 |     .data(["#fc9272","#6a51a3","#6baed6","#ccc"])
328 |   .enter().append("line")
329 |     .attr("class","legend-line")
330 |     .attr("x1",function(d,i) { 
331 |       if (i == 0) { return 25 }
332 |       else if (i == 1) { return offset; }
333 |       else if (i == 2) { return width - offset; }
334 |       else if (i == 3) { return width - 25; }
335 |     })
336 |     .attr("x2",function(d,i) { 
337 |       if (i == 0) { return Math.min(25,x(rNoA)/2); }
338 |       else if (i == 1) { return x(rNoA + ra/2); }
339 |       else if (i == 2) { return x(r + aNoR/2); }
340 |       else if (i == 3) { return Math.max(width - 25,width - x(noRA)); }
341 |     })
342 |     .attr("y1",function(d,i) { 
343 |       if (i == 0) { return 95 - 12; }
344 |       else if (i == 1) { return 65 - 12; }
345 |       else if (i == 2) { return 65 - 12; }
346 |       else if (i == 3) { return 95 - 12; }
347 |     })
348 |     .attr("y2",barHeight + 2)
349 |     .style("stroke",function(d) { return d; })
350 | 
351 |   g.append("text")
352 |       .attr("class","legend-text")
353 |       .attr("x",0)
354 |       .attr("y",95)
355 |       .text(f(rNoA/denom) + " users retained but didn't take the chosen actions")
356 | 
357 |   g.append("text")
358 |       .attr("class","legend-text")
359 |       .attr("x",offset)
360 |       .attr("y",65)
361 |       .attr("text-anchor","middle")
362 |       .text(f(ra/denom) + " users took the chosen actions and retained")
363 |     
364 |   g.append("text")
365 |       .attr("class","legend-text")
366 |       .attr("x",width)
367 |       .attr("y",95)
368 |       .attr("text-anchor","end")
369 |       .text(f(noRA/denom) + " users didn't retain or take the chosen actions")
370 |     
371 |   g.append("text")
372 |      .attr("class","legend-text")
373 |       .attr("x",width - offset)
374 |       .attr("y",65)
375 |       .attr("text-anchor","middle")
376 |       .text(f(aNoR/denom) + " users took the chosen actions but didn't retain")
377 |   
378 |   g.append("text")
379 |       .attr("class","legend-text-big")
380 |       .attr("x",width/2)
381 |       .attr("y",-60)
382 |       .attr("text-anchor","middle")
383 |       .text("SHOWING " + c(all) + " TOTAL USERS")
384 |   
385 |   g.append("text")
386 |       .attr("class","legend-text")
387 |       .attr("x",x(r)/2)
388 |       .attr("y",-33)
389 |       .attr("text-anchor","middle")
390 |       .text(f(r/denom) + " users retained")
391 | 
392 |   g.append("text")
393 |       .attr("class","legend-text")
394 |       .attr("x",function() {
395 |         
396 |         if (x(r) >= (x(r + aNoR/2) - 75)) {
397 |           return x(r) + 3;
398 |         } else {
399 |           return x(r + aNoR/2);
400 |         }
401 |       })
402 |       .attr("y",-13)
403 |       .attr("text-anchor",function () {
404 |           if (x(r) >= (x(r + aNoR/2) - 75)) {
405 |             return "left"
406 |           } else{
407 |             return "middle"
408 |           }
409 |       })
410 |       .text(f(a/denom) + " took the chosen actions")
411 |   
412 |   g.append("path")
413 |       .attr("class","legend-line")
414 |       .attr("d","M 0 -1 L 0 -50 L " + width + " -50 L " + width + " -1")
415 |   
416 |   g.append("path")
417 |       .attr("class","legend-line")
418 |       .attr("d","M 0 -1 L 0 -30 L " + x(r) + " -30 L " + 
419 |         x(r) + " -1")
420 | 
421 |   g.append("path")
422 |       .attr("class","legend-line")
423 |       .attr("d","M " +  x(rNoA) +" -1 L " +  x(rNoA) + " -10 L " + 
424 |         x(rNoA + a) + " -10 L " + x(rNoA + a) + " -1")
425 |   
426 |   g.append("text")
427 |       .attr("class","legend-text")
428 |       .attr("x",width/2)
429 |       .attr("y",120)
430 |       .attr("text-anchor","middle")
431 |       .text(p(ra/r) + " of users who retained also took the chosen actions")
432 |   
433 |   g.append("text")
434 |       .attr("class","legend-text")
435 |       .attr("x",width/2)
436 |       .attr("y",140)
437 |       .attr("text-anchor","middle")
438 |       .text(p(ra/a) + " of users who took the chosen actions also retained")
439 |   
440 |   g.append("text")
441 |       .attr("class","legend-text bold")
442 |       .attr("x",width/2)
443 |       .attr("y",160)
444 |       .attr("text-anchor","middle")
445 |       .text(p(ra/(a + rNoA)) + " of users who took retained or took the chosen actions did both")
446 |   
447 | }
448 | 
449 | 
450 |   
451 | </script>


--------------------------------------------------------------------------------
/user_behavior_playbook/when_do_users_slip_away/presentation.html:
--------------------------------------------------------------------------------
  1 | <link href="https://cdn.rawgit.com/jaz303/tipsy/master/src/stylesheets/tipsy.css" rel="stylesheet" type="text/css">
  2 | <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  3 | <style>
  4 | 
  5 | body {
  6 |   color: #788a8c;
  7 | }
  8 | 
  9 | table {
 10 |   margin: 0 auto;
 11 | }
 12 | 
 13 | .tipsy { font-size: 16px; }
 14 | 
 15 | .add-hover { cursor: crosshair; }
 16 | 
 17 | .btn {
 18 |   color: #788a8c;
 19 |   background-color: white;
 20 |   border: 1px Solid #5b7b94;
 21 |   height:25px;
 22 |   line-height: 25px;
 23 |   width: 80px;
 24 |   cursor: pointer;
 25 |   padding: 2px 0px 0px 0px;
 26 |   margin: 1px;
 27 |   border-radius: 3px;
 28 |   text-align: center;
 29 | }
 30 | 
 31 | .btn:hover {
 32 |   background-color: #eee;
 33 | }
 34 | 
 35 | .btn.active {
 36 |   background-color: #81CADA;
 37 |   border: 1px Solid #81CADA;
 38 |   color: white;
 39 | }
 40 | 
 41 | .btn.active:hover {
 42 |   background-color: #74B6C4;
 43 |   border: 1px Solid #74B6C4;
 44 | }
 45 | 
 46 | select {
 47 |   color: #788a8c;
 48 |   border-color: #5b7b94;
 49 |   background-color: transparent;
 50 |   margin: 10px;
 51 |   height: 25px;
 52 | }
 53 | 
 54 | td { 
 55 |   height: 30px;
 56 | }
 57 | 
 58 | .cell-string { text-align: left; padding: 5px; }
 59 | .cell-number { text-align: right; padding: 5px; }
 60 | 
 61 | th {
 62 |   background-color: #8B979C;
 63 |   color: #fff;
 64 |   font-weight: normal;
 65 |   font-size: 12px;
 66 |   padding: 3px;
 67 |   border-bottom: 2px solid white;
 68 |   border-right: 2px solid white !important;
 69 |   text-transform: uppercase;
 70 |   text-align: center;
 71 |   vertical-align: middle;
 72 | }
 73 | 
 74 | th.option-header {
 75 |   padding: 15px 8px 3px 8px;
 76 | }
 77 | 
 78 | .sort:hover {
 79 |   cursor: pointer;
 80 | }
 81 | 
 82 | .buttons {
 83 |   padding-top: 10px;
 84 |   padding-bottom: 5px;
 85 |   margin: 5px;
 86 |   text-align: center;
 87 | }
 88 | 
 89 | .hide {
 90 |   opacity: 0;
 91 | }
 92 | 
 93 | </style>
 94 | 
 95 | <div class="buttons">
 96 |   Gradient options:
 97 |   <select>
 98 |     <option value="Blues">Blues</option>
 99 |     <option value="Reds">Reds</option>
100 |     <option value="RdBu">Red to Blue</option>
101 |     <option value="RdYlGn">Red to Green</option>
102 |     <option value="YlOrRd">Yellow to Red</option>
103 |     <option value="YlGn">Yellow to Green</option>
104 |   </select>
105 |   <div title="Each column uses an independent gradient" class="btn" id="columns">By Column</div>
106 |   <div title="All columns share a single gradient" class="btn active" id="all">Full table</div>
107 |   <div title="Hide all gradients" class="btn" id="no-gradient">None</div>
108 | </div>
109 | <div id="table"></div>
110 | <script src="//cdn.rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
111 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js"></script>
112 | <script>
113 | 
114 | var cma = d3.format(",");
115 | var p = d3.format("%")
116 | 
117 | var data = dataset.content,
118 |     columns = dataset.columns;
119 | 
120 | var colorScale = colorbrewer.Blues[9];
121 | var allColumnsShareGradient = true;
122 | var gradientType = 1;
123 | 
124 | var parameterSelection = getParameter()
125 | 
126 | var colInfo =  getRanges()
127 | var ranges = colInfo[0];
128 | var incCols = colInfo[1];
129 | var scales = getScales(ranges,colorScale,allColumnsShareGradient,incCols);
130 |     
131 | var table = d3.select("#table")
132 |     .append("table")
133 |     .attr("class","table")
134 | 
135 | table.selectAll("th")
136 |     .data(columns)
137 |   .enter().append("th")
138 |     .html(function(d) { return d.name + "<br>"; })
139 |     
140 | drawTable(data,columns)
141 | drawCheckboxes();
142 | 
143 | function drawTable(data,columns) {
144 |   
145 |   table.selectAll("row")
146 |       .data(data)
147 |     .enter().append("tr")
148 |       .attr("class","row")
149 |       .selectAll("td")
150 |       .data(function(d) { return columnValues(d,columns); })
151 |     .enter().append("td")
152 |       .attr("class",function(d) { 
153 |         if (d.type == "string") { return "cell-string"; }
154 |         else if (d.type == "number" || d.type == "integer" || d.type == "float") { 
155 |           if (d.column != "days_since_last_event") {
156 |             return "add-hover cell-number"; 
157 |           } else {
158 |             return "cell-string"; 
159 |           }
160 |         }
161 |       })
162 |       .text(function(d) { 
163 |         if (d.type == "number" || d.type == "float") { return cma(d3.round(d.value,3)); }
164 |         else if (d.type == "integer") { return cma(d.value); }
165 |         else { return d.value; }
166 |       })
167 |   
168 |   drawShades(scales,incCols,gradientType);
169 | }
170 | 
171 |       
172 |   
173 | function columnValues(row,columns) {
174 |   var arr = [];
175 |   
176 |   columns.forEach(function(c) {
177 |     var obj = { value:row[c.name],type:c.type,column:c.name }
178 |     arr.push(obj)
179 |   })
180 |   return arr
181 | }
182 | 
183 | function sortFn(a,b) {
184 |   if (a["orders per day"] > b["orders per day"]) {
185 |     return 1;
186 |   }
187 |   if (a["orders per day"] < b["orders per day"]) {
188 |     return -1;
189 |   }
190 |   return 0;
191 | }
192 | 
193 |     
194 | $('select').change(function(){
195 |   var input = $(this).val();
196 |   colorScale = colorbrewer[input][9];
197 |   var scales = getScales(ranges,colorScale,allColumnsShareGradient,incCols);
198 |   drawShades(scales,incCols,gradientType);
199 | })
200 | 
201 | $("input[type='checkbox']").change(function(){
202 |   incCols = [];
203 |   checkboxes = $("input[type='checkbox']")
204 |   
205 |   checkboxes.each(function(c) {
206 |     var isChecked = $(this).prop('checked')
207 |     if (isChecked == true) { 
208 |       var colIndex = $(this).val().slice(1,3)
209 |       incCols.push(+colIndex); 
210 |     }
211 |   })
212 |   
213 |   var scales = getScales(ranges,colorScale,allColumnsShareGradient,incCols);
214 |   
215 |   drawShades(scales,incCols,gradientType);
216 | })
217 | 
218 | $('.btn').click(function(){
219 |   
220 |   $(".btn").removeClass("active");
221 |   $(this).addClass("active");
222 |   
223 |   var btnId = $(this).attr("id")
224 |   
225 |   if (btnId == "all") { gradientType = 1; } 
226 |   else if (btnId == "columns") { gradientType = 0; }
227 |   else { gradientType = -1; }
228 |   
229 |   var scales = getScales(ranges,colorScale,gradientType,incCols);
230 |   drawShades(scales,incCols,gradientType);
231 | })
232 | 
233 | $(".btn").tipsy({fade:true});
234 |     
235 | function drawShades(scales,included,gradientType) {
236 |   var rows = $("tr")
237 |   rows.each(function(r) {
238 |     
239 |     var cells = $(this).children()
240 |     cells.each(function(c) {
241 |       if (included.indexOf(c) != -1 && gradientType != -1) {
242 |         
243 |         var col = scales.filter(function (column) { return column.ind == c; });
244 |         
245 |         var bg = col[0].bgScale;
246 |         var ft = col[0].ftScale;
247 |         
248 |         var value = +$(this).text().replace(/\,/g,'');
249 |         
250 |         this.style.color = ft(value)
251 |         this.style.background = bg(value);
252 |         
253 |         $(this).css("border","1px solid" + bg(value))
254 |         
255 |         if (columns[c].name != "days_since_last_event") {
256 |           
257 |           console.log(parameterSelection)
258 |           
259 |           if (parameterSelection == "percent") {
260 |             
261 |             hoverText = p(+$(this).text().replace(/\,/g,'')) + " of users who have taken the action between " +
262 |             columns[c].name + " times took the action again after having last taken the " + 
263 |             " action " + r + " days ago."
264 |             
265 |           } else {
266 |             
267 |             hoverText = $(this).text() + " users took the action between " +
268 |             columns[c].name + " times and then took the action again after having last taken the " + 
269 |             " action " + r + " days ago."
270 |             
271 |           }  
272 |       
273 |           $(this).attr("title",hoverText)
274 |         }
275 |         
276 |       } else {
277 |         
278 |         this.style.color = "#666"
279 |         this.style.background = "transparent"
280 |         
281 |         $(this).css("border-left","1px solid #ffffff")
282 |         $(this).css("border-right","1px solid #ffffff")
283 |         
284 |         $(this).css("border-bottom","1px solid #f0f0f0")
285 |       }
286 |     })
287 |   })
288 |   
289 | }
290 | 
291 | $("td").tipsy({fade:true,html:true,opacity:1,gravity:"s"});
292 |     
293 | function getScales(ranges,colorScale,all,included) {
294 |   var fontScale = [];
295 |   
296 |   colorScale.forEach(function(c) {
297 |     var c = c.substring(1)
298 |     var rgb = parseInt(c, 16);
299 |     var r = (rgb >> 16) & 0xff;  var g = (rgb >>  8) & 0xff; var b = (rgb >>  0) & 0xff;
300 |     var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
301 |     if (luma < 150) { ft = "#ccc" } else { ft = "#666" }
302 |     fontScale.push(ft)
303 |   })
304 |   
305 |   if (all == 1) {
306 |     var combined = [];
307 |     ranges.forEach(function(r,i) { 
308 |       if (included.indexOf(r.ind) != -1) {combined = combined.concat(r.range) }
309 |     })
310 |     fullRange = d3.extent(combined);
311 |     
312 |     ranges.forEach(function(r) {
313 |       r.bgScale = d3.scale.quantize().domain(fullRange).range(colorScale);
314 |       r.ftScale = d3.scale.quantize().domain(fullRange).range(fontScale);
315 |     })
316 |   } else {
317 |     ranges.forEach(function(r) {
318 |       r.bgScale = d3.scale.quantize().domain(r.range).range(colorScale);
319 |       r.ftScale = d3.scale.quantize().domain(r.range).range(fontScale);
320 |     })
321 |   }
322 |   return ranges
323 | }
324 |     
325 | function drawCheckboxes() {
326 |   
327 |   var thsObj = d3.selectAll("th")
328 |   
329 |   thsObj.forEach(function(ths) {
330 |     ths.forEach(function(th,i) {
331 |       if (incCols.indexOf(i) != -1) {
332 |         
333 |         d3.select(th)
334 |           .attr("class","option-header")
335 |           .html(th.textContent + "<br>" + 
336 |           "<i class='sort controls hide fa fa-sort'></i>&nbsp;&nbsp;&nbsp;")
337 |         
338 |         d3.select(th)
339 |           .append("input")
340 |           .attr("type","checkbox")
341 |           .attr("name","columns")
342 |           .attr("value","c" + i)
343 |           .attr("class","controls checkbox hide")
344 |           .attr("checked","checked")
345 |       }
346 |     })
347 |   })
348 | }
349 | 
350 | function getRanges() {
351 |   var arr = [];
352 |   var incCols = [];
353 |   var columns = dataset.columns;
354 |   
355 |   columns.forEach(function(c,i) {
356 |     if ((c.type == 'integer' || c.type == 'float' || c.type == 'number') && i != 0) {
357 |       var range = d3.extent(_.pluck(dataset.content,c.name))
358 |       var ent = {name:c.name,ind:i,range:range}
359 |       arr.push(ent)
360 |       incCols.push(i);
361 |     }
362 |   })
363 |   return [arr,incCols];
364 | }
365 | 
366 | function sortData(data,column,direction) {
367 |   d3.selectAll("tr").remove()
368 |   var sorted = _.sortBy(data, function(d){ return direction * d[column]; })
369 |   drawTable(sorted,columns)
370 | }
371 | 
372 | function getParameter() {
373 |   var data = dataset.content;
374 |   var max = d3.max(_.pluck(data,"1-5"))
375 |   
376 |   if (max > 1) {
377 |     return "count";
378 |   } else {
379 |     return "percent"
380 |   }
381 | }
382 | 
383 | $("th").hover(
384 |   function() {$(".controls").removeClass("hide") },
385 |   function() {$(".controls").addClass("hide") }
386 | );
387 | 
388 | $(".sort").click(function() {
389 |   var iconClass = $(this).attr("class");
390 |   var column = $(this).parent().text().replace(/^\s+|\s+$/g, '');
391 |   
392 |   if (iconClass.indexOf("fa-sort-up") != -1) {
393 |     $(this).removeClass("fa-sort-up");
394 |     $(this).addClass("fa-sort-down");
395 |     sortData(data,column,-1)
396 |   } else if (iconClass.indexOf("fa-sort-down") != -1) {
397 |     $(this).removeClass("fa-sort-down");
398 |     $(this).addClass("fa-sort-up");
399 |     sortData(data,column,1)
400 |   } else if (iconClass.indexOf("fa-sort") != -1) { 
401 |     $(".fa-sort-up").removeClass("fa-sort-up").addClass("fa-sort")
402 |     $(".fa-sort-down").removeClass("fa-sort-down").addClass("fa-sort")
403 |     $(this).removeClass("fa-sort");
404 |     $(this).addClass("fa-sort-down");
405 |     sortData(data,column,-1)
406 |   }
407 | })
408 | 
409 | </script>


--------------------------------------------------------------------------------
/retention_playbook/describing_retention/presentation.html:
--------------------------------------------------------------------------------
  1 | <link href="https://cdn.rawgit.com/jaz303/tipsy/master/src/stylesheets/tipsy.css" rel="stylesheet" type="text/css">
  2 | <style>
  3 | 
  4 | #wrapper {
  5 |   font-family: Helvetica, Arial, sans-serif;
  6 |   font-size: 12px;
  7 |   width: 790px;
  8 |   margin: 0 auto;
  9 |   padding-bottom: 10px;
 10 | }
 11 | 
 12 | .tipsy { 
 13 |   font-size: 14px;
 14 |   line-height: 20px;
 15 | }
 16 | 
 17 | table { border-collapse: collapse; }
 18 | 
 19 | p {
 20 |   text-align: center;
 21 |   color: #666;
 22 | }
 23 | 
 24 | p.head { 
 25 |   text-align: center;
 26 |   margin-bottom: 2px;
 27 |   font-size: 16px;
 28 |   text-transform: uppercase;
 29 | }
 30 | 
 31 | p.subhead { 
 32 |   text-align: center;
 33 |   font-size: 14px;
 34 |   color: #8B979C;
 35 |   margin-bottom: 2px;
 36 | }
 37 | 
 38 | th {
 39 |   background-color: #8B979C;
 40 |   color: #fff;
 41 |   font-weight: normal;
 42 |   font-size: 10px;
 43 |   line-height: 20px;
 44 |   border-bottom: 2px solid white;
 45 |   border-right: 2px solid white;
 46 |   text-transform: uppercase;
 47 | }
 48 | 
 49 | td {
 50 |   margin: 0px;
 51 |   padding: 8px 5px;
 52 |   width: 100px;
 53 |   height: 14px;
 54 |   font-size: 12px;
 55 |   text-align: right;
 56 | }
 57 | 
 58 | hr {
 59 |   height:1px;
 60 |   border:none;
 61 |   color:#ccc; 
 62 |   background-color:#ccc;
 63 |   margin: 30px 0px;
 64 | }
 65 | 
 66 | td.major { cursor: pointer; }
 67 | td.footer { border-top: 2px Solid white; cursor: pointer; }
 68 | table.minor { margin-right: 10px; }
 69 | 
 70 | 
 71 | td.minor-cell { 
 72 |   width: 65px; 
 73 |   padding-right: 20px; 
 74 | }
 75 | 
 76 | .question {
 77 |   cursor: pointer;
 78 |   display: inline-block;
 79 |   width: 16px;
 80 |   height: 16px;
 81 |   background-color: #89A4CC;
 82 |   line-height: 16px;
 83 |   color: White;
 84 |   font-size: 12px;
 85 |   border-radius: 8px;
 86 |   text-align: center;
 87 |   position: relative;
 88 | }
 89 | 
 90 | .question:hover { background-color: #3D6199; }
 91 | 
 92 | .tooltip {
 93 |   background-color: #303030;
 94 |   position: absolute;
 95 |   right: 20px;
 96 |   top: -100px;
 97 |   z-index: 1000000;
 98 |   width: 450px;
 99 |   border-radius: 5px;
100 |   border: 2px solid black;
101 | }
102 | 
103 | .tooltip p {
104 |   margin: 10px;
105 |   color: #E6E6E6;
106 |   padding: 10px;
107 |   font-weight: normal;
108 |   font-family: Helvetica, Arial, sans-serif;
109 |   font-size:13px;
110 |   text-align: left;
111 | }
112 | 
113 | </style>
114 | <div id="wrapper">
115 |   <p class="head">Table 1: Retention Percentage</p>
116 |   <p class="subhead">Periods after signup</p> 
117 |   <div style="float:left" id='table-1-l'></div>
118 |   <div id='table-1'></div>
119 |   <hr>
120 |   
121 |   <p class="head">Table 2: Churn Rate</p>
122 |   <p class="subhead">Periods after signup</p> 
123 |   <div style="float:left" id='table-2-l'></div>
124 |   <div id='table-2'></div>
125 |   <hr>
126 |   
127 |   <p class="head">Table 3: Churn Rate from Previous Period</p>
128 |   <p class="subhead">Periods after signup</p> 
129 |   <div style="float:left" id='table-3-l'></div>
130 |   <div id='table-3'></div>
131 | </div>
132 | 
133 | <script src="//cdn.rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
134 | <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
135 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js"></script>
136 | <script>
137 | 
138 | var f = d3.format(".0f");
139 | var pp = d3.format(".1%");
140 | var c = d3.format(",")
141 | var formatDate = d3.time.format('%m-%d-%y');
142 | var formatDateText = d3.time.format('%B %d, %y');
143 | var r = d3.time.format("%Y-%m-%dT%H:%M:%S.000Z").parse;
144 | 
145 | function p(time) { 
146 |   var t = new Date(Date.parse(time));
147 |   return r(t.toISOString());
148 |  }
149 | 
150 | var table1l = d3.select("#table-1-l").append("table").attr("class","minor");
151 | var table2l = d3.select("#table-2-l").append("table").attr("class","minor");
152 | var table3l = d3.select("#table-3-l").append("table").attr("class","minor");
153 | 
154 | var table1 = d3.select("#table-1").append("table");
155 | var table2 = d3.select("#table-2").append("table");
156 | var table3 = d3.select("#table-3").append("table");
157 | 
158 | data = dataset.content;
159 | 
160 | data.forEach(function(d) {
161 |   var maxAge = d3.max(_.pluck(_.where(data,{signup_date:d.signup_date}),"user_period"))
162 |   d["max_age"] = maxAge
163 | })
164 | 
165 | var reds = colorbrewer.Reds[9],
166 |     blues = colorbrewer.Blues[9];
167 | 
168 | var signups = data.filter(function(d) { return d.user_period == 0; }),
169 |     totalSignups = d3.sum(_.pluck(signups,"retained_users"));
170 | 
171 | var dateOrder = d3.map();
172 | 
173 | signups.forEach(function(d,i) { dateOrder.set(d.signup_date, i); })
174 | 
175 | var tableData = getData(data);
176 | 
177 | drawLeftTable(table1l,signups);
178 | drawLeftTable(table2l,signups);
179 | drawLeftTable(table3l,signups);
180 | 
181 | drawTable(table1,tableData,"retained",blues)
182 | drawTable(table2,tableData,"churn",reds)
183 | drawTable(table3,tableData,"previousChurn",reds)
184 | 
185 | function drawTable(tableObj,fullDataObject,type,colors) {
186 |   
187 |   var tableData = fullDataObject[0],
188 |       footerData = fullDataObject[1];
189 |   
190 |   var headers = _.sortBy(
191 |     _.filter(
192 |       _.uniq(
193 |         _.pluck(data,"user_period")
194 |       ),
195 |     function (d) { return d > 0; }),
196 |   function(d) { return d; });
197 |   
198 |   var fillData = [];
199 |   
200 |   signups.forEach(function(s,i) {
201 |     var row = [];
202 |     headers.forEach(function(h) {
203 |       row.push({date:i,column:h})
204 |     })
205 |     fillData.push(row)
206 |   })
207 |   
208 |   var rangeMin = 1;
209 |   var rangeMax = 0;
210 |   var dates = [];
211 |   
212 |   tableData.forEach(function(d) {
213 |     var localMax = d3.max(_.pluck(d,type));
214 |     var localMin = d3.min(_.pluck(d,type));
215 |     
216 |     rangeMax = Math.max(rangeMax,localMax);
217 |     rangeMin = Math.min(rangeMin,localMin);
218 |   })
219 |   
220 |   var cScale = d3.scale.quantize()
221 |       .domain([rangeMin,rangeMax])
222 |       .range(colors);
223 |   
224 |   var textColor = ['#000000','#000000','#000000','#000000','#000000','#000000','#e6e6e6','#e6e6e6','#e6e6e6'];
225 |   
226 |   var tScale = d3.scale.quantize()
227 |       .domain([rangeMin,rangeMax])
228 |       .range(textColor);
229 |   
230 |   tableObj
231 |       .selectAll("th")
232 |       .data(headers)
233 |       .enter().append("th")
234 |       .text(function(d) { return d; });
235 |     
236 |   tableObj
237 |       .selectAll("tr")
238 |       .data(fillData)
239 |     .enter().append("tr")
240 |       .selectAll("td")
241 |       .data(function(d) { return d; })
242 |     .enter().append("td")
243 |       .attr("id",function(d) { return type + "-" + d.date + "-" + d.column;})
244 |       
245 |       
246 |       
247 |   tableData.forEach(function(row,i) {
248 |     row.forEach(function(r) {
249 |       
250 |       var rowNumber = dateOrder.get(r.date)
251 |       
252 |       d3.selectAll("#" + type + "-" + rowNumber + "-" + r.period)
253 |         .text(function() { if (r.period != -1) { return pp(r[type]); } })
254 |         .attr("class",function() { if (r != null && r.period != -1) { return "major"; } })
255 |         .attr("title",function() { if (r != null && r.period != -1) { return hoverTextMajor(r,type); }})
256 |         .style("background",function() { if (r != null && r.period != -1) {return cScale(r[type]); }})
257 |         .style("color",function() { if (r != null && r.period != -1) { return tScale(r[type]); }});
258 |       
259 |     })
260 |   })
261 | 
262 |   tableObj
263 |       .selectAll("tfoot")
264 |       .data([1])
265 |     .enter().append("tr")
266 |       .selectAll("td")
267 |       .data(footerData)
268 |     .enter().append("td")
269 |       .text(function(d) { return pp(d[type]); })
270 |       .attr("class","footer")
271 |       .attr("title",function(d) { if (d != null) { return hoverTextMinor(d,type); }})
272 |       .style("background",function(d) { if (d != null) {return cScale(d[type]); }})
273 |       .style("color",function(d) { if (d != null) { return tScale(d[type]); }});
274 |     
275 |   $('.major').tipsy({gravity:"se",opacity:1});
276 |   $('.footer').tipsy({gravity:"se",opacity:1});
277 |   
278 | }
279 | 
280 | function drawLeftTable(tableObj,data) {
281 |   
282 |   var vals = [];
283 |   
284 |   data.forEach(function(d) {
285 |     var obj = [p(d.signup_date), d.retained_users]
286 |     vals.push(obj);
287 |   })
288 |   
289 |   vals = _.sortBy(vals, function(d){ return d[0]; });
290 |     
291 |   tableObj
292 |       .selectAll("th")
293 |       .data(['Date','New Users'])
294 |       .enter().append("th")
295 |       .text(function(d) { return d; });
296 |     
297 |   tableObj
298 |       .selectAll("tr")
299 |       .data(vals)
300 |     .enter().append("tr")
301 |       .selectAll("td")
302 |       .data(function(d) { return d; })
303 |     .enter().append("td")
304 |       .attr("class","minor-cell")
305 |       .text(function(d,i) { if (i == 0) {
306 |         return formatDate(d); 
307 |       } else {
308 |         return c(d);
309 |       }})
310 |       .style("font-size", "12px");
311 |   
312 |   tableObj
313 |       .selectAll("tfoot")
314 |       .data([1])
315 |     .enter().append("tr")
316 |       .selectAll("td")
317 |       .data(["Total",c(totalSignups)])
318 |     .enter().append("td")
319 |       .attr("class","footer minor-cell")
320 |       .text(function(d) { return d; })
321 |       
322 | }
323 | 
324 | function getData(data) {
325 |   var headers = _.sortBy(_.uniq(_.pluck(data,"user_period")),function(d) { return p(d); });
326 |   var dates = _.sortBy(_.uniq(_.pluck(data,"signup_date")),function(d) { return p(d); });
327 |   
328 |   var tableObject = [];
329 |   var footerObject = [];
330 |   
331 |   dates.forEach(function(d,i) {
332 |     
333 |     var row = [];
334 |     
335 |     var dateFilter = _.where(data,{signup_date:d});
336 |     
337 |     var signups = _.where(dateFilter,{user_period:0})[0].retained_users;
338 |     
339 |     headers.forEach(function(h) {
340 |     
341 |       // Calculate footer values
342 |       if (i == 0 && h > 0) {
343 |         var ageFilter = _.filter(data,function(d) { return d.max_age >= h; })
344 |         
345 |         var allSignups = d3.sum(_.pluck(_.where(ageFilter,{user_period:0}),"retained_users"));
346 |         var allRetained = d3.sum(_.pluck(_.where(ageFilter,{user_period:h}),"retained_users"));
347 |         var allPrevious = d3.sum(_.pluck(_.where(ageFilter,{user_period:Math.max(h - 1,0)}),"retained_users"));
348 |         
349 |         var footerCell = {
350 |           period: h,
351 |           retained: allRetained/allSignups,
352 |           churn: (allPrevious - allRetained)/allSignups,
353 |           previousChurn: (allPrevious - allRetained)/allPrevious
354 |         }
355 |         
356 |         footerObject.push(footerCell)
357 |       }
358 |       
359 |       // Calculate values for cell
360 |       var currentPeriod = _.where(dateFilter,{user_period:h});
361 |       var previousPeriod = _.where(dateFilter,{user_period:Math.max(h - 1,0)});
362 |       
363 |       var maxAge = d3.max(_.pluck(dateFilter,"max_age"));
364 |       
365 |       if (maxAge >= h && h > 0) {
366 |         
367 |         var retained = 0,
368 |             previous = 0;
369 |         
370 |         if (currentPeriod.length != 0) { retained = currentPeriod[0].retained_users; }
371 |         if (previousPeriod.length != 0) { previous = previousPeriod[0].retained_users; }
372 |         
373 |         // Handle division by 0 for previous period churn
374 |         if (previous == 0) { pc = 0; } else { pc = (previous - retained)/previous; }
375 |         
376 |         cell = { 
377 |           date: d,
378 |           period: h,
379 |           signups:signups,
380 |           retained:retained/signups,
381 |           churn:(previous - retained)/signups,
382 |           previousChurn:pc
383 |         };
384 |                    
385 |         row.push(cell)
386 |       }
387 |     })
388 |     
389 |     if (row.length > 0) { tableObject.push(row); }
390 |     
391 |   })
392 |   
393 |   return [tableObject,footerObject];
394 | }
395 | 
396 | function hoverTextMajor(d,type) {
397 |   if (type == "retained") {
398 |     return pp(d[type]) + 
399 |       " of users who signed up during the period of " + 
400 |       formatDateText(p(d.date)) + " came back " + 
401 |       d.period + " periods later. ";
402 |   } else if (type == "churn") {
403 |     return pp(d[type]) + 
404 |       " of users who signed up during the period of " + 
405 |       formatDateText(p(d.date)) + " churned " + 
406 |       d.period + " periods later. ";
407 |   } else if (type == "previousChurn") {
408 |     return pp(d[type]) + 
409 |       " of users who signed up the period of " + 
410 |       formatDateText(p(d.date)) + " and retained for " + 
411 |       (d.period - 1) + " periods churned in their " +
412 |       sfx(d.period) + " period.";
413 |   }
414 | }
415 | 
416 | function hoverTextMinor(d,type) {
417 |   if (type == "retained") {
418 |     return pp(d[type]) + 
419 |       " of users who signed up came back " + 
420 |       d.period + " periods later. ";
421 |   } else if (type == "churn") {
422 |     return pp(d[type]) + 
423 |       " of users who signed up churned " + 
424 |       d.period + " periods later. ";
425 |   } else if (type == "previousChurn") {
426 |     return pp(d[type]) + 
427 |       " of users who signed up and retained for " + 
428 |       (d.period - 1) + " periods churned in their " +
429 |       sfx(d.period) + " period.";
430 |   }
431 | }
432 | 
433 | function sfx(int) {
434 |   if (int == 11) { return "11th"; }
435 |   else if (int == 12) { return "12th"; }
436 |   else if (int == 13) { return "13th"; }
437 |   else if (int % 10 == 1) { return int + "st"; }
438 |   else if (int % 10 == 2) { return int + "nd"; }
439 |   else if (int % 10 == 3) { return int + "rd"; }
440 |   else { return int + "th"; }
441 | }
442 | 
443 | </script>


--------------------------------------------------------------------------------
/user_behavior_playbook/how_users_move_through_your_product/presentation.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 | 
  3 | body {
  4 |   font-size: 12px;
  5 |   font-weight: 400;
  6 | }
  7 | 
  8 | #main {
  9 |   width: 620px;
 10 |   margin: 0 auto;
 11 | }
 12 | 
 13 | 
 14 | 
 15 | .legend-container {
 16 |   display: block;
 17 |   margin: 0 auto;
 18 |   text-align: center;
 19 |   max-width: 600px;
 20 | }
 21 | 
 22 | .legend {
 23 |   position: relative;
 24 |   vertical-align: middle;
 25 |   display: inline-block;
 26 |   margin-left: 5px;
 27 |   margin-top: 5px;
 28 |   text-align: center;
 29 |   width: 195px;
 30 |   height: 100px
 31 |   padding: 5px;
 32 | }
 33 | 
 34 | #sequence text, .legend-container text {
 35 |   fill: #fff;
 36 | }
 37 | 
 38 | #chart {
 39 |   position: relative;
 40 | }
 41 | 
 42 | #chart path {
 43 |   stroke: #fff;
 44 | }
 45 | 
 46 | #explanation {
 47 |   position: absolute;
 48 |   margin-left: auto;
 49 |   margin-right: auto;
 50 |   top: 215px;
 51 |   left: 0;
 52 |   right: 0;
 53 |   width: 140px;
 54 |   text-align: center;
 55 |   color: #666;
 56 |   z-index: -1;
 57 | }
 58 | 
 59 | #percentage {
 60 |   font-size: 2.5em;
 61 |   color: #666;
 62 | }
 63 | 
 64 | p {
 65 |   color: #666;
 66 |   text-align: center;
 67 | }
 68 | 
 69 | #title { font-size: 18px }
 70 | #details { font-size: 14px; }
 71 | 
 72 | #cond_percentage {
 73 |   font-size: 1.8em;
 74 |   color: #666;
 75 | }
 76 | 
 77 | </style>
 78 | <p id="title">Event Sequences by Session</p>
 79 | <p id="details">Hover over bars in the circle for details</p>
 80 | 
 81 | <div id="main">
 82 |   <div id="sequence"></div>
 83 |   <div id="chart">
 84 |     <div id="explanation" style="visibility: hidden;">
 85 |       <span id="percentage"></span><br/>
 86 |       of visits begin with this sequence of pages.<br/><br/>
 87 |       Conditional percent of 
 88 |       <span id="cond_percentage"></span><br/>
 89 |       from previous location
 90 |     </div>
 91 |   </div>
 92 | </div>
 93 | <div class="legend-container"></div>
 94 | <script src="//cdn.rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
 95 | <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
 96 | <script>
 97 | 
 98 | // Dimensions of sunburst.
 99 | var width = 620;
100 | var height = 600;
101 | var radius = Math.min(width, height) / 2;
102 | 
103 | // Breadcrumb dimensions: width, height, spacing, width of tip/tail.
104 | var b = {
105 |   w: 120, h: 30, s: 3, t: 10
106 | };
107 | 
108 | var data = dataset.content,
109 |     e1 = _.uniq(_.pluck(data,"e1")),
110 |     e2 = _.uniq(_.pluck(data,"e2")),
111 |     e3 = _.uniq(_.pluck(data,"e3")),
112 |     e4 = _.uniq(_.pluck(data,"e4")),
113 |     e5 = _.uniq(_.pluck(data,"e5")),
114 |     events = _.uniq(e1.concat(e2).concat(e3).concat(e4).concat(e5));
115 | 
116 | // Mapping of step names to colors.
117 | var colorRange = [
118 |   "#e41a1c",
119 |   "#377eb8",
120 |   "#4daf4a",
121 |   "#984ea3",
122 |   "#ff7f00",
123 |   "#a65628",
124 |   "#f781bf",
125 |   "#1b9e77",
126 |   "#d95f02",
127 |   "#7570b3",
128 |   "#e7298a",
129 |   "#66a61e",
130 |   "#e6ab02",
131 |   "#a6761d"
132 | ]
133 | 
134 | var colors = {}
135 | 
136 | events.forEach(function(e,i) {
137 |   if (e != null) { colors[e] = colorRange[i % 14]; }
138 | })
139 | 
140 | colors["end"] = "#666"
141 | 
142 | 
143 | // Total size of all segments; we set this later, after loading the data.
144 | var totalSize = 0; 
145 | 
146 | var vis = d3.select("#chart").append("svg:svg")
147 |     .attr("width", width)
148 |     .attr("height", height)
149 |     .append("svg:g")
150 |     .attr("id", "container")
151 |     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
152 | 
153 | var partition = d3.layout.partition()
154 |     .size([2 * Math.PI, radius * radius])
155 |     .value(function(d) { return d.size; });
156 | 
157 | var arc = d3.svg.arc()
158 |     .startAngle(function(d) { return d.x; })
159 |     .endAngle(function(d) { return d.x + d.dx; })
160 |     .innerRadius(function(d) { return Math.sqrt(d.y); })
161 |     .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
162 | 
163 | // Use d3.text and d3.csv.parseRows so that we do not need to have a header
164 | // row, and can receive the csv as an array of arrays.
165 | 
166 | 
167 | 
168 | formattedData = []
169 | 
170 | data.forEach(function(d) {
171 |   var c = 1
172 |   var sequence = d.e1;
173 |   if (d.e2 != null && c == 1) { e2 = "-~-" + d.e2; } else if (c == 1) { e2 = "-~-end"; c = 0; } else { e2 = ""; }
174 |   if (d.e3 != null && c == 1) { e3 = "-~-" + d.e3; } else if (c == 1) { e3 = "-~-end"; c = 0; } else { e3 = ""; }
175 |   if (d.e4 != null && c == 1) { e4 = "-~-" + d.e4; } else if (c == 1) { e4 = "-~-end"; c = 0; } else { e4 = ""; }
176 |   if (d.e5 != null && c == 1) { e5 = "-~-" + d.e5; } else if (c == 1) { e5 = "-~-end"; c = 0; } else { e5 = ""; }
177 |   
178 |   sequence = sequence + e2 + e3 + e4 + e5;
179 |   
180 |   var ent = {0:sequence, 1:d.occurrances}
181 |   
182 |   formattedData.push(ent)
183 | })
184 | 
185 | var json = buildHierarchy(formattedData);
186 | 
187 | createVisualization(json);
188 | 
189 | // Main function to draw and set up the visualization, once we have the data.
190 | function createVisualization(json) {
191 | 
192 |   // Basic setup of page elements.
193 |   initializeBreadcrumbTrail();
194 |   drawLegend();
195 |   d3.select("#togglelegend").on("click", toggleLegend);
196 | 
197 |   // Bounding circle underneath the sunburst, to make it easier to detect
198 |   // when the mouse leaves the parent g.
199 |   vis.append("svg:circle")
200 |       .attr("r", radius)
201 |       .style("opacity", 0);
202 | 
203 |   // For efficiency, filter nodes to keep only those large enough to see.
204 |   var nodes = partition.nodes(json)
205 |       .filter(function(d) {
206 |       return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
207 |       });
208 | 
209 |   var path = vis.data([json]).selectAll("path")
210 |       .data(nodes)
211 |       .enter().append("svg:path")
212 |       .attr("display", function(d) { return d.depth ? null : "none"; })
213 |       .attr("d", arc)
214 |       .attr("fill-rule", "evenodd")
215 |       .style("fill", function(d) { return colors[d.name]; })
216 |       .style("opacity", 1)
217 |       .on("mouseover", mouseover);
218 | 
219 |   // Add the mouseleave handler to the bounding circle.
220 |   d3.select("#container").on("mouseleave", mouseleave);
221 | 
222 |   // Get total size of the tree = value of root node from partition.
223 |   totalSize = path.node().__data__.value;
224 |  };
225 | 
226 | // Fade all but the current sequence, and show it in the breadcrumb trail.
227 | function mouseover(d) {
228 | 
229 |   var percentage = (100 * d.value / totalSize).toPrecision(3);
230 |   var percentageString = percentage + "%";
231 |   if (percentage < 0.1) {
232 |     percentageString = "< 0.1%";
233 |   }
234 |   
235 |   //Calculate conditional percentage
236 |   var sequenceArray = getAncestors(d);
237 |   var parent_conditional_value = d.parent.value;
238 |   var cond_percentage = (100*d.value/parent_conditional_value).toPrecision(3);
239 |   var cond_percentageString = cond_percentage + "%";
240 |     if (cond_percentage < 1.0) {
241 |     percentageString = "< 1%";
242 |   }
243 |   
244 |   d3.select("#cond_percentage")
245 |       .text(cond_percentageString);
246 |   
247 |   d3.select("#percentage")
248 |       .text(percentageString);
249 | 
250 |   d3.select("#explanation")
251 |       .style("visibility", "");
252 | 
253 |   var sequenceArray = getAncestors(d);
254 |   updateBreadcrumbs(sequenceArray, percentageString);
255 | 
256 |   // Fade all the segments.
257 |   d3.selectAll("path")
258 |       .style("opacity", 0.3);
259 | 
260 |   // Then highlight only those that are an ancestor of the current segment.
261 |   vis.selectAll("path")
262 |       .filter(function(node) {
263 |                 return (sequenceArray.indexOf(node) >= 0);
264 |               })
265 |       .style("opacity", 1);
266 | }
267 | 
268 | // Restore everything to full opacity when moving off the visualization.
269 | function mouseleave(d) {
270 | 
271 |   // Hide the breadcrumb trail
272 |   d3.select("#trail")
273 |       .style("visibility", "hidden");
274 | 
275 |   // Deactivate all segments during transition.
276 |   d3.selectAll("path").on("mouseover", null);
277 | 
278 |   // Transition each segment to full opacity and then reactivate it.
279 |   d3.selectAll("path")
280 |       .transition()
281 |       .duration(1000)
282 |       .style("opacity", 1)
283 |       .each("end", function() {
284 |               d3.select(this).on("mouseover", mouseover);
285 |             });
286 | 
287 |   d3.select("#explanation")
288 |       .style("visibility", "hidden");
289 | }
290 | 
291 | // Given a node in a partition layout, return an array of all of its ancestor
292 | // nodes, highest first, but excluding the root.
293 | function getAncestors(node) {
294 |   var path = [];
295 |   var current = node;
296 |   while (current.parent) {
297 |     path.unshift(current);
298 |     current = current.parent;
299 |   }
300 |   return path;
301 | }
302 | 
303 | function initializeBreadcrumbTrail() {
304 |   // Add the svg area.
305 |   var trail = d3.select("#sequence").append("svg:svg")
306 |       .attr("width", width)
307 |       .attr("height", 50)
308 |       .attr("id", "trail");
309 |   // Add the label at the end, for the percentage.
310 |   trail.append("svg:text")
311 |     .attr("id", "endlabel")
312 |     .style("fill", "#000");
313 | }
314 | 
315 | // Generate a string that describes the points of a breadcrumb polygon.
316 | function breadcrumbPoints(d, i) {
317 |   var points = [];
318 |   points.push("0,0");
319 |   points.push(b.w + ",0");
320 |   points.push(b.w + b.t + "," + (b.h / 2));
321 |   points.push(b.w + "," + b.h);
322 |   points.push("0," + b.h);
323 |   if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
324 |     points.push(b.t + "," + (b.h / 2));
325 |   }
326 |   return points.join(" ");
327 | }
328 | 
329 | // Update the breadcrumb trail to show the current sequence and percentage.
330 | function updateBreadcrumbs(nodeArray, percentageString) {
331 | 
332 |   // Data join; key function combines name and depth (= position in sequence).
333 |   var g = d3.select("#trail")
334 |       .selectAll("g")
335 |       .data(nodeArray, function(d) { return d.name + d.depth; });
336 | 
337 |   // Add breadcrumb and label for entering nodes.
338 |   var entering = g.enter().append("svg:g");
339 | 
340 |   entering.append("svg:polygon")
341 |       .attr("points", breadcrumbPoints)
342 |       .style("fill", function(d) { return colors[d.name]; });
343 | 
344 |   entering.append("svg:text")
345 |       .attr("x", (b.w + b.t) / 2)
346 |       .attr("y", b.h / 2)
347 |       .attr("dy", "0.35em")
348 |       .attr("text-anchor", "middle")
349 |       .text(function(d) { return d.name; });
350 | 
351 |   // Set position for entering and updating nodes.
352 |   g.attr("transform", function(d, i) {
353 |     return "translate(" + i * (b.w + b.s) + ", 0)";
354 |   });
355 | 
356 |   // Remove exiting nodes.
357 |   g.exit().remove();
358 | 
359 |   // Make the breadcrumb trail visible, if it's hidden.
360 |   d3.select("#trail")
361 |       .style("visibility", "");
362 | 
363 | }
364 | 
365 | function drawLegend() {
366 | 
367 |   // Dimensions of legend item: width, height, spacing, radius of rounded rect.
368 |   var li = {
369 |     w: 195, h: 30, s: 3, r: 3
370 |   };
371 |   
372 |   d3.entries(colors).forEach(function(c) {
373 |     
374 |     divContainer = d3.select(".legend-container")
375 |         .append("div")
376 |         .attr("class","legend")
377 |     
378 |     svg = divContainer.append("svg:svg")
379 |         .attr("width", li.w)
380 |         .attr("height", li.h);
381 | 
382 |     svg.append("svg:rect")
383 |         .attr("rx", li.r)
384 |         .attr("ry", li.r)
385 |         .attr("width", li.w)
386 |         .attr("height", li.h)
387 |         .style("fill", function() { return c.value; });
388 | 
389 |     svg.append("svg:text")
390 |         .attr("x", li.w / 2)
391 |         .attr("y", li.h / 2)
392 |         .attr("dy", "0.35em")
393 |         .attr("text-anchor", "middle")
394 |         .text(function() { return c.key; });
395 |   })
396 |     
397 | }
398 | 
399 | function toggleLegend() {
400 |   var legend = d3.select("#legend");
401 |   if (legend.style("visibility") == "hidden") {
402 |     legend.style("visibility", "");
403 |   } else {
404 |     legend.style("visibility", "hidden");
405 |   }
406 | }
407 | 
408 | // Take a 2-column CSV and transform it into a hierarchical structure suitable
409 | // for a partition layout. The first column is a sequence of step names, from
410 | // root to leaf, separated by hyphens. The second column is a count of how 
411 | // often that sequence occurred.
412 | function buildHierarchy(csv) {
413 |   var root = {"name": "root", "children": []};
414 |   for (var i = 0; i < csv.length; i++) {
415 |     var sequence = csv[i][0];
416 |     var size = +csv[i][1];
417 |     if (isNaN(size)) { // e.g. if this is a header row
418 |       continue;
419 |     }
420 |     var parts = sequence.split("-~-");
421 |     var currentNode = root;
422 |     for (var j = 0; j < parts.length; j++) {
423 |       var children = currentNode["children"];
424 |       var nodeName = parts[j];
425 |       var childNode;
426 |       if (j + 1 < parts.length) {
427 |    // Not yet at the end of the sequence; move down the tree.
428 |  	var foundChild = false;
429 |  	for (var k = 0; k < children.length; k++) {
430 |  	  if (children[k]["name"] == nodeName) {
431 |  	    childNode = children[k];
432 |  	    foundChild = true;
433 |  	    break;
434 |  	  }
435 |  	}
436 |   // If we don't already have a child node for this branch, create it.
437 |  	if (!foundChild) {
438 |  	  childNode = {"name": nodeName, "children": []};
439 |  	  children.push(childNode);
440 |  	}
441 |  	currentNode = childNode;
442 |       } else {
443 |  	// Reached the end of the sequence; create a leaf node.
444 |  	childNode = {"name": nodeName, "size": size};
445 |  	children.push(childNode);
446 |       }
447 |     }
448 |   }
449 |   return root;
450 | };
451 | 
452 | </script>


--------------------------------------------------------------------------------
/retention_playbook/metrics_that_matter_p1/presentation.html:
--------------------------------------------------------------------------------
  1 | <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  2 | <link href="//cdn.rawgit.com/jaz303/tipsy/master/src/stylesheets/tipsy.css" rel="stylesheet" type="text/css">
  3 | <style>
  4 | .bar-all { fill: #ccc; }
  5 | .bar-action { fill: #6baed6; }
  6 | .bar-retain { fill: #fc9272; }
  7 | .bar-both { fill: #6a51a3; }
  8 | 
  9 | .tipsy { font-size: 14px; }
 10 | .tipsy-inner {max-width: 400px; }
 11 | #action-callout { color: #feb24c; }
 12 | #pct-callout { color: #00CC66; }
 13 | 
 14 | p {
 15 |   color: #666;
 16 |   text-align: center;
 17 | }
 18 | 
 19 | .title {
 20 |   font-size: 18px;
 21 | }
 22 | 
 23 | .narrative {
 24 |   font-size: 12px;
 25 |   margin: 0 auto;
 26 |   width: 500px;
 27 |   height: 120px;
 28 | }
 29 | 
 30 | .narr-p {
 31 |   text-align: left;
 32 | }
 33 | 
 34 | .hidden {
 35 |   display: none;
 36 | }
 37 |   
 38 | .btn {
 39 |   color: #788a8c;
 40 |   background-color: white;
 41 |   border: 1px Solid #5b7b94;
 42 |   height:25px;
 43 |   line-height: 25px;
 44 |   width: 160px;
 45 |   cursor: pointer;
 46 |   padding: 2px 0px 0px 0px;
 47 |   margin: 1px;
 48 |   border-radius: 3px;
 49 |   text-align: center;
 50 | }
 51 | 
 52 | .btn:hover {
 53 |   background-color: #eee;
 54 | }
 55 | 
 56 | .btn.active {
 57 |   background-color: #81CADA;
 58 |   border: 1px Solid #81CADA;
 59 |   color: white;
 60 | }
 61 | 
 62 | .btn.active:hover {
 63 |   background-color: #74B6C4;
 64 |   border: 1px Solid #74B6C4;
 65 | }
 66 | 
 67 | .buttons {
 68 |   padding-top: 10px;
 69 |   padding-bottom: 5px;
 70 |   margin: 5px;
 71 |   text-align: center;
 72 | }
 73 | 
 74 | #user-p {
 75 |   font-size: 14px;
 76 |   color: #757575;
 77 |   font-style: italic;
 78 | }
 79 | 
 80 | table {
 81 |   margin: 0 auto;
 82 |   border-collapse: collapse;
 83 |   border-spacing: 0px;
 84 | }
 85 | 
 86 | th {
 87 |   background-color: #8B979C;
 88 |   color: #fff;
 89 |   font-weight: normal;
 90 |   font-size: 12px;
 91 |   padding: 8px;
 92 |   border-bottom: 5px solid #f9fbff;
 93 |   border-right: 2px solid #f9fbff !important;
 94 |   text-align: center;
 95 |   vertical-align: middle;
 96 | }
 97 | 
 98 | td { 
 99 |   font-size: 12px;
100 |   color: #666;
101 | }
102 | 
103 | .text-cell {
104 |   padding-left: 5px;
105 | }
106 | 
107 | .hr-cell {
108 |   height: 0px;
109 |   padding: 0px;
110 |   margin: 0px;
111 | }
112 | 
113 | .hr-cell.break {
114 |   height: 2px;
115 |   border-top: 15px solid #f9fbff;
116 |   border-bottom: 15px solid #f9fbff;
117 |   background-color: #ccc;
118 | }
119 | 
120 | .sort:hover {
121 |   cursor: pointer;
122 | }
123 | 
124 | th.sort {
125 |   padding: 15px 8px 3px 8px;
126 | }
127 | 
128 | 
129 | 
130 | </style>
131 | <p class="title">Retention by Action in Users' First Week</p>
132 | <p id="user-p">Showing <span id="user-count"></span></p>
133 | <div class="buttons">
134 |   <div class="btn active" id="s1">1. % Retained by Action</div>
135 |   <div class="btn" id="s2">2. How Many Users?</div>
136 |   <div class="btn" id="s3">3. Who's Also Missed</div>
137 |   <div class="btn" id="s4">4. Finding What Matters</div>
138 | </div>
139 | <div class="narrative">
140 |   <p class="narr-p narr-1"> 
141 |     The bars below show the retention rates of users who took certain actions
142 |     a minimun number of times. 
143 |   </p>
144 |   <p class="narr-p narr-1"> 
145 |     These bars can show which features appear to drive retention.
146 |   </p>
147 |   <p class="narr-p hidden narr-2">
148 |     Just looking at the retention rates, however, hides important data. The 
149 |     bars now show the number of people who took each action.
150 |   </p>  
151 |   <p class="narr-p hidden narr-2">
152 |     Frequently, the actions that appear to be the strongest drivers of retention 
153 |     were taken by fewer people.
154 |   </p>  
155 |   <p class="narr-p hidden narr-3">
156 |     User counts also hides another important detail: How many users retained 
157 |     despite <strong>not</strong> taking the action? 
158 |   </p>
159 |   <p class="narr-p hidden narr-3">
160 |     The red bars below show the number of retaining users who didn't take the action.
161 |     Again, features that appeared the strongest initially often fail to explain why many users stuck
162 |     around.
163 |   </p>  
164 |   <p class="narr-p hidden narr-4">
165 |     So how do we determine which features matter most? We want to identify
166 |     the features that have high retention rates (a big purple bar relative the 
167 |     blue bar) <strong>and</strong> identify a large share of retaining users 
168 |     (a big purple bar relative to the red bar).
169 |   </p>  
170 |   <p class="narr-p hidden narr-4">
171 |     For each feature, the larger the purple bar (users retaining and taking the actions) 
172 |     relative to red bar (users just retaining) and blue bar (users just taking 
173 |     the action), the more strongly this metric correlates with retention.
174 |   </p>  
175 | </div>
176 | <div id="graphic"></div>
177 | <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
178 | <script src="//cdn.rawgit.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
179 | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js"></script>
180 | <script>
181 | 
182 | // NUMBER OF ACTIONS PER METRIC
183 | metricCounts = [1,2,3,4,5,6,7,8,9,10]
184 | 
185 | 
186 | 
187 | var drop = ["user_id","activated_at","retained","retained_string"];
188 | 
189 | var data = dataset.content;
190 | var headers = d3.keys(data[0]);
191 | var headers = _.filter(headers,function(d) { return drop.indexOf(d) == -1; });
192 | 
193 | var p = d3.format(".1%");
194 | var comma = d3.format(",");
195 | var colors = ["#d73027","#f46d43","#fdae61","#666","#666","#666","#a6d96a","#66bd63","#1a9850"];
196 | 
197 | var width = 450;
198 | 
199 | var x = d3.scale.linear()
200 |     .range([0, width]);
201 | 
202 | var c = d3.scale.quantize()
203 |     .domain([0,1])
204 |     .range(colors);
205 | 
206 | 
207 | d3.select("#user-count").text(comma(data.length) + " users")
208 | 
209 | var dataObj = makeData()
210 | var STAGE = "s1"
211 | 
212 | drawTable()
213 | fillTable(dataObj,"name",1,STAGE)
214 | 
215 | function drawTable() {
216 |   
217 |   var tableHeaders = [
218 |     "Action and minimum times it occurred",
219 |     "Chart"
220 |   ];
221 |   
222 |   var tableIds = [
223 |     "name",
224 |     "bars"
225 |   ];
226 |   
227 |   var table = d3.select("#graphic").append("table")
228 |   
229 |   table.selectAll("th")
230 |       .data(tableHeaders)
231 |     .enter().append("th")
232 |       .attr("class",function(d) { if (d == "Chart") { return "bars-header sort"; } else { return "sort"; }})
233 |       .attr("id",function(d,i) { return tableIds[i]; })
234 |       .html(function(d,i) { if (d == "Chart") {
235 |           return "<span id='header-title'>" + d + "</span><br>" + "<i id='chart-sort' class='fa fa-sort'></i>"; 
236 |         } else {
237 |           return d + "<br>" + "<i class='fa fa-sort'></i>";
238 |         }
239 |       })
240 | 
241 |   
242 |   headers.forEach(function(h,i) {
243 |     metricCounts.forEach(function(v,j) {
244 |       table.append("tr")
245 |           .attr("class","row")
246 |           .attr("id","row" + (metricCounts.length*i + j + 1))
247 |           .selectAll("td")
248 |           .data([0,1])
249 |         .enter().append("td")
250 |           .attr("class","text-cell")
251 |           .attr("id",function(d) { return "c" + (metricCounts.length*i + j + 1) + "-" + d; })
252 |     })
253 |     
254 |     table.append("tr")
255 |       .attr("class","hr-row")
256 |       .selectAll("td")
257 |       .data([0,1])
258 |     .enter().append("td")
259 |       .attr("class","hr-cell")
260 |   })
261 | }
262 | 
263 | function makeData() {
264 |   var dataObj = [];
265 |   headers.forEach(function(h) {
266 |     metricCounts.forEach(function(i) {
267 |       var barObj = barData(h,i)
268 |       barObj["name"] = h + ": " + i;
269 |       dataObj.push(barObj)
270 |     })
271 |   })
272 |   
273 |   return dataObj;
274 | }
275 | 
276 | function barData(header,count) {
277 |   var all = data.length;
278 |   
279 |   var retained = _.filter(data,function(d){ return d["retained"] == 1; });
280 |   var tookAction = _.filter(data,function(d){ return d[header] >= count; });
281 |   var both = _.filter(retained,function(d){ return d[header] >= count; });
282 |   
283 |   var b1 = retained.length - both.length;
284 |   var b2 = both.length;
285 |   var b3 = tookAction.length - both.length;
286 |   
287 |   var score = b2/(b1 + b2 + b3);
288 |   var action = b2 + b3;
289 |   var retPct = b2/(b2 + b3);
290 |   var actionPct = b2/(b1 + b2);
291 |   
292 |   var arr = {
293 |       all:all,
294 |       ret: b1,
295 |       three: (b1 + b2 + b3),
296 |       bars: [b1,b2,b3],
297 |       score: score,
298 |       action: action,
299 |       retPct: retPct
300 |   }
301 |   return arr
302 | }
303 | 
304 | function fillTable(dataObj,column,direction,stage) {
305 |   
306 |   var sortedObj = sortData(dataObj,column,direction)
307 |   
308 |   sortedObj.forEach(function(d,i) {
309 |     
310 |     var r = i+1;
311 |     
312 |     d3.select("#c" + r + "-0").text(d.name)
313 |     drawBarGraph(d,r,stage)
314 |   })
315 |   
316 |   if (column == "name") {
317 |     $(".hr-cell").addClass("break")
318 |   } else {
319 |     $(".hr-cell").removeClass("break")
320 |   }
321 | 
322 | }
323 | 
324 | function drawBarGraph(barObj,r,stage) {
325 |   
326 |   var bars = barObj.bars,
327 |       all = barObj.all,
328 |       barHeight = 20;
329 |   
330 |   var g = d3.select("#c" + r + "-1").append("svg")
331 |     .attr("class","table-bars")
332 |     .attr("width",width)
333 |     .attr("height",barHeight)
334 |     .style("padding-top","3px")
335 |   
336 |   x.domain([0,all])
337 |   
338 |   g.append("rect")
339 |       .attr("class","bar-retain")
340 |       .attr("x",x(0))
341 |       .attr("width",0)
342 |       .attr("y",0)
343 |       .attr("height",barHeight)
344 |       .property({"b0":bars[0],"b1":bars[1],"b2":bars[2]});
345 |   
346 |   g.append("rect")
347 |       .attr("class","bar-both")
348 |       .attr("x",x(0))
349 |       .attr("width",0)
350 |       .attr("y",0)
351 |       .attr("height",barHeight)
352 |       .property({"b0":bars[0],"b1":bars[1],"b2":bars[2]});
353 |   
354 |   g.append("rect")
355 |       .attr("class","bar-action")
356 |       .attr("x",x(0))
357 |       .attr("width",0)
358 |       .attr("y",0)
359 |       .attr("height",barHeight)
360 |       .property({"b0":bars[0],"b1":bars[1],"b2":bars[2]})
361 |     
362 |   g.append("text")
363 |       .attr("class","bar-text")
364 |       .attr("x",function() {
365 |           x.domain([0,(bars[1] + bars[2])]);
366 |           if (x(bars[1]) < 50) { return x(bars[1]) + 4;} else { return x(bars[1]) - 4; }
367 |         })
368 |         .attr("text-anchor",function() {
369 |           x.domain([0,(bars[1] + bars[2])]);
370 |           if (x(bars[1]) < 50) { return "start"; } else { return "end"; }
371 |         })
372 |       .attr("y",barHeight/2)
373 |       .attr("dy",".3em")
374 |       .style("fill","#f0f0f0")
375 |       .property({"b0":bars[0],"b1":bars[1],"b2":bars[2]});
376 |       
377 |   transitionBars(STAGE,dataObj,0)
378 |   
379 | }
380 | 
381 | function retentionPctBars(dataObj,duration) {
382 |     
383 |     d3.selectAll(".bar-retain")
384 |         .transition()
385 |         .attr("x",x(0))
386 |         .attr("width",0)
387 |         .duration(duration)
388 |         
389 |     d3.selectAll(".bar-both")
390 |         .transition()
391 |         .attr("x",x(0))
392 |         .style("fill","#6a51a3")
393 |         .attr("width",function() {x.domain([0,(this.b1 + this.b2)]); return x(this.b1);})
394 |         .duration(duration)
395 |     
396 |     d3.selectAll(".bar-action")
397 |         .transition()
398 |         .attr("x",function() {x.domain([0,(this.b1 + this.b2)]); return x(this.b1); })
399 |         .attr("width",function() {x.domain([0,(this.b1 + this.b2)]); return x(this.b2); })
400 |         .duration(duration)
401 |     
402 |     d3.selectAll(".bar-text")
403 |         .transition()
404 |         .attr("x",function() {
405 |           x.domain([0,(this.b1 + this.b2)]);
406 |           if (x(this.b1) < 50) { return x(this.b1) + 4;} else { return x(this.b1) - 4; }
407 |         })
408 |         .attr("text-anchor",function() {
409 |           x.domain([0,(this.b1 + this.b2)]);
410 |           if (x(this.b1) < 50) { return "start"; } else { return "end"; }
411 |         })
412 |         .style("fill","#f0f0f0")
413 |         .text(function() { return p(this.b1/(this.b1 + this.b2)); })
414 |         .duration(duration)
415 |   
416 | }
417 | 
418 | function actionCountBars(dataObj,duration) {
419 |     
420 |     var xMax = d3.max(_.pluck(dataObj,"action"));
421 |     x.domain([0,xMax])
422 |     
423 |     d3.selectAll(".bar-retain")
424 |         .transition()
425 |         .attr("x",x(0))
426 |         .attr("width",0)
427 |         .duration(duration)
428 |         
429 |     d3.selectAll(".bar-both")
430 |       .transition()
431 |       .attr("x",x(0))
432 |       .attr("width",function() {return x(this.b1);})
433 |       .duration(duration)
434 |     
435 |     d3.selectAll(".bar-action")
436 |       .transition()
437 |       .attr("x",function() {return x(this.b1);})
438 |       .attr("width",function() { return x(this.b2);})
439 |       .duration(duration)
440 |     
441 |     d3.selectAll(".bar-text")
442 |         .transition()
443 |         .attr("x",function() {
444 |           if (x(this.b1 + this.b2) > width - 50) { return x(this.b1 + this.b2) - 4;} else { return x(this.b1 + this.b2) + 4; }
445 |         })
446 |         .attr("text-anchor",function() { 
447 |           if (x(this.b1 + this.b2) > width - 50) { return "end" ;} else { return "start"; }
448 |         })
449 |         .style("fill",function() { 
450 |           if (x(this.b1 + this.b2) > width - 50) { return "#f0f0f0" ;} else { return "#666"; }
451 |         })
452 |         .text(function() { return comma(this.b1 + this.b2); })
453 |         .duration(duration)
454 | }
455 | 
456 | function missingRetentionBars(dataObj,duration) {
457 |   
458 |   var duration = duration * 2;
459 |   var xMax = d3.max(_.pluck(dataObj,"action")) + dataObj[0].bars[0] + dataObj[0].bars[1];
460 |   var justify = dataObj[0].bars[0] + dataObj[0].bars[1];
461 |   
462 |   x.domain([0,xMax])
463 |     
464 |     d3.selectAll(".bar-retain")
465 |         .transition()
466 |         .attr("x",function() { return x(justify); })
467 |         .attr("width",x(0))
468 |         .duration(function() { return duration/5; })
469 |     
470 |     d3.selectAll(".bar-retain")
471 |         .transition()
472 |         .attr("x",function() { return x(justify - this.b0); })
473 |         .attr("width",function() { return x(this.b0); })
474 |         .delay(function() { return duration/3})
475 |         .duration(function() { return duration * (2/3); })
476 |         
477 |     d3.selectAll(".bar-both")
478 |         .transition()
479 |         .attr("x",x(justify))
480 |         .attr("width",function() {return x(this.b1);})
481 |         .duration(function() { return duration/5; })
482 |       
483 |     d3.selectAll(".bar-action")
484 |         .transition()
485 |         .attr("x",function() {return x(justify + this.b1);})
486 |         .attr("width",function() { return x(this.b2);})
487 |         .duration(function() { return duration/5; })
488 |     
489 |     d3.selectAll(".bar-text")
490 |         .transition()
491 |         .attr("x",function() {
492 |           if (x(justify - this.b0) > 50) { return x(justify - this.b0) - 4;} else { return x(justify - this.b0) + 4; }
493 |         })
494 |         .attr("text-anchor",function() { 
495 |           if (x(justify - this.b0) > 50) { return "end"; } else { return "start"; }
496 |         })
497 |         .style("fill",function() { 
498 |           if (x(justify - this.b0) > 50) { return "#666"; } else { return "#f0f0f0"; }
499 |         })
500 |         .text(function() { return comma(this.b0); })
501 |         .duration(duration);
502 | }
503 | 
504 | function overlapBars(dataObj,duration) {
505 |   
506 |   missingRetentionBars(dataObj,0)
507 |   
508 |   // Move purple bar
509 |   var xMax = d3.max(_.pluck(dataObj,"action")) + dataObj[0].bars[0] + dataObj[0].bars[1];
510 |   var justify = dataObj[0].bars[0] + dataObj[0].bars[1];
511 |   
512 |   x.domain([0,xMax])
513 |   
514 |   d3.selectAll(".bar-both")
515 |       .transition()
516 |       .attr("x",x(0))
517 |       .attr("width",function() {return x(this.b1);})
518 |       .duration(function() { return duration; })
519 |   
520 |   // Realign blue bar
521 |   
522 |   d3.selectAll(".bar-action")
523 |       .transition()
524 |       .attr("x",x(justify))
525 |       .attr("width",function() {return x(this.b2);})
526 |       .delay(function() { return duration; })
527 |       .duration(function() { return duration; })
528 |       
529 |   // Expand to full scale
530 |         
531 |     d3.selectAll(".bar-both")
532 |         .transition()
533 |         .attr("x",x(0))
534 |         .attr("width",function() {x.domain([0,(this.b0 + this.b1 + this.b2)]); return x(this.b1);})
535 |         .delay(function() { return 2*duration; })
536 |         .duration(function() { return duration; })
537 |     
538 |     d3.selectAll(".bar-retain")
539 |         .transition()
540 |         .attr("x",function() {x.domain([0,(this.b0 + this.b1 + this.b2)]); return x(this.b1);})
541 |         .attr("width",function() {x.domain([0,(this.b0 + this.b1 + this.b2)]); return x(this.b0);})
542 |         .delay(function() { return 2*duration; })
543 |         .duration(function() { return duration; })
544 |     
545 |     d3.selectAll(".bar-action")
546 |         .transition()
547 |         .attr("x",function() {x.domain([0,(this.b0 + this.b1 + this.b2)]); return x(this.b1 + this.b0);})
548 |         .attr("width",function() {x.domain([0,(this.b0 + this.b1 + this.b2)]); return x(this.b2);})
549 |         .delay(function() { return 2*duration; })
550 |         .duration(function() { return duration; })
551 |     
552 |     d3.selectAll(".bar-text")
553 |         .transition()
554 |         .attr("x",function() {
555 |           x.domain([0,(this.b0 + this.b1 + this.b2)])
556 |           if (x(this.b1) < 50) { return x(this.b1) + 4;} else { return x(this.b1) - 4; }
557 |         })
558 |         .attr("text-anchor",function() {
559 |           x.domain([0,(this.b0 + this.b1 + this.b2)])
560 |           if (x(this.b1) < 50) { return "start"; } else { return "end"; }
561 |         })
562 |         .style("fill","#f0f0f0")
563 |         .text(function() { return p(this.b1/(this.b0 + this.b1 + this.b2)); })
564 |         .delay(duration*2)
565 |         .duration(duration);
566 | }
567 | 
568 | 
569 | function transitionBars(stage,dataObj,duration) {
570 |   
571 |   $(".narr-p").addClass("hidden")
572 |   
573 |   if (stage == "s1") { 
574 |     
575 |     $(".narr-1").removeClass("hidden")
576 |     var t = "Percent of people taking the action who retained"
577 |     retentionPctBars(dataObj,duration);
578 |     d3.select(".bars-header").attr("id","retPct")
579 |     d3.select("#header-title").text(t)
580 |     
581 |   } else if (stage == "s2") { 
582 |     
583 |     $(".narr-2").removeClass("hidden")
584 |     var t = "Number of people taking the action"
585 |     actionCountBars(dataObj,duration); 
586 |     d3.select(".bars-header").attr("id","action")
587 |     d3.select("#header-title").text(t)
588 |     
589 |   } else if (stage == "s3") { 
590 |     
591 |     $(".narr-3").removeClass("hidden")
592 |     var t = "Number of people who retained but didn't take the action"
593 |     missingRetentionBars(dataObj,duration); 
594 |     d3.select(".bars-header").attr("id","ret")
595 |     d3.select("#header-title").text(t)
596 |     
597 |   } else if (stage == "s4") {
598 |     
599 |     $(".narr-4").removeClass("hidden")
600 |     var t = "Metrics that most strongly correlate with retention"
601 |     overlapBars(dataObj,duration); 
602 |     d3.select(".bars-header").attr("id","score")
603 |     d3.select("#header-title").text(t)
604 |     
605 |   }
606 | }
607 | 
608 | function sortData(dataObj,column,direction) {
609 |   var sorted = _.sortBy(dataObj, function(d){ return direction * d[column]; })
610 |   return sorted
611 | }
612 | 
613 | $(".sort").click(function() {
614 |   
615 |   d3.selectAll("td").text("")
616 |   d3.selectAll("table-bars").remove()
617 |   
618 |   var column = $(this).attr("id")
619 |   var icon = $(this).children("i")
620 |   var iconClass = icon.attr("class");
621 |   
622 |   if (iconClass.indexOf("fa-sort-up") != -1) {
623 |     icon.removeClass("fa-sort-up").addClass("fa-sort-down");
624 |     fillTable(dataObj,column,-1,STAGE)
625 |     
626 |   } else if (iconClass.indexOf("fa-sort-down") != -1) {
627 |     icon.removeClass("fa-sort-down").addClass("fa-sort-up");
628 |     fillTable(dataObj,column,1,STAGE)
629 |     
630 |   } else if (iconClass.indexOf("fa-sort") != -1) { 
631 |     $(".fa-sort-up").removeClass("fa-sort-up").addClass("fa-sort")
632 |     $(".fa-sort-down").removeClass("fa-sort-down").addClass("fa-sort")
633 |     icon.removeClass("fa-sort");
634 |     icon.addClass("fa-sort-down");
635 |     fillTable(dataObj,column,-1,STAGE);
636 |   }
637 |     
638 | })
639 | 
640 | $(".btn").click(function() {
641 |   
642 |   if ($(this).attr("class").indexOf("active") == -1){
643 |     $("#chart-sort").removeClass("fa-sort-down").removeClass("fa-sort-up").addClass("fa-sort")
644 |   }
645 |   
646 |   $(".btn").removeClass("active");
647 |   $(this).addClass("active");
648 |   
649 |   STAGE = $(this).attr("id");
650 |   transitionBars(STAGE,dataObj,1000)
651 |   
652 | })
653 |   
654 | 
655 | </script>


--------------------------------------------------------------------------------