publisher_retention.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 1000,
  "height": 500,
  "padding": 5,
  "autosize": "pad",

  "config": {
    "text": {
      "font": "Ideal Sans, Avenir Next, Helvetica"
    },
    "axis": {
      "labelFont": "Ideal Sans, Avenir Next, Helvetica",
      "labelFontSize": 12,
      "titleFont": "Ideal Sans, Avenir Next, Helvetica",
      "titleFontSize": 18,
      "titleFontWeight": 300,
      "domain": false,
      "ticks": false,
      "labelColor": "#54565b",
      "labelPadding": 10
    },
    "legend": {
      "labelFont": "Ideal Sans, Avenir Next, Helvetica",
      "labelFontSize": 12,
      "titleFont": "Ideal Sans, Avenir Next, Helvetica",
      "titleFontSize": 14,
      "titleFontWeight": 300
    }
  },

  "signals": [
    {
      "name": "devicetype",
      "value": "Desktop",
      "bind": {
        "input": "radio",
        "name": "Device Type",
        "options": ["Desktop","Tablet","Mobile"]
      }
    },
    {
      "name": "pagegroup",
      "value": "homepage",
      "bind": {
        "input": "radio",
        "name": "Page type",
        "options": ["homepage","article"]
      }
    },
    {
      "name": "maxSpeed",
      "value": 20000
    },
    {
      "name": "highlight_website",
      "value": null,
      "on": [
        {
          "events": "window:keypress",
          "update": "null"
        },
        {
          "events": "@resetLink:click",
          "update": "null"
        },
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "datum.value"
        }
      ]
    },
    {
      "name": "markersize",
      "value": 25
    }
  ],

  "data": [
    {
      "name": "data",
      "url" : "https://gist.githubusercontent.com/simonhearne/f357ab4af6d93cab44903c29c4dd4a2e/raw/c426fa2818ad7d9ee3caca399622fc7946026bd2/publishers.tsv",
      "format": {
        "type": "tsv"
      },
      "transform": [
        {
          "type": "formula",
          "expr": "datum.bounce_rate / 100",
          "as": "bounce_rate"
        },
        {
          "type":"filter",
          "expr": "datum.devicetypename == devicetype"
        },
        {
          "type":"filter",
          "expr": "datum.pagegroupname == pagegroup"
        },
        {
          "type": "joinaggregate",
          "groupby": ["website","devicetypename","pagegroupname"],
          "fields": ["sessions"],
          "ops": ["sum"],
          "as": ["total_sessions"]
        },
        {
          "type": "formula",
          "expr": "datum.sessions / datum.total_sessions",
          "as": "perc_sessions"
        },
        {
          "type": "joinaggregate",
          "groupby": ["website","devicetypename","pagegroupname"],
          "fields": ["perc_sessions"],
          "ops": ["max"],
          "as": ["max_sessions"]
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "bucket",
      "type": "linear",
      "range": "width",
      "domain": {"data": "data", "field": "bucket"},
      "domainMax": {"signal": "maxSpeed"}
    },
    {
      "name": "retention",
      "type": "linear",
      "range": "height",
      "domain": {"data": "data", "field": "retention_rate"},
      "domainMax": 1
    },
    {
      "name": "sessions",
      "type": "linear",
      "range": "height",
      "domain": {"data": "data", "field": "perc_sessions"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": {"scheme": "category10"},
      "domain": {"data": "data", "field": "website"}
    },
    {
      "name": "shape",
      "type": "ordinal",
      "domain": ["retention_rate","bounce_rate"],
      "range": ["circle","cross"]
    }
  ],

  "axes": [
    {
      "orient": "bottom",
      "scale": "bucket",
      "title": "Load Time (ms)"
    },
    {
      "orient": "right",
      "scale": "retention",
      "title": "Retention / Bounce Rate",
      "format": ".0%",
      "grid": true
    },
    {
      "orient": "left",
      "scale": "sessions",
      "title": "Sessions",
      "labels": false
    }
  ],

  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "baseline": {"value": "middle"},
          "align": {"value": "center"},
          "fontSize": {"value": 18}
        },
        "update": {
          "x": {"signal": "width / 2"},
          "y": {"value": 18},
          "text": {"signal": "'Retention and Bounce rate for publisher '+pagegroup+'s on '+devicetype"}
        }
      }
    },
    {
      "type": "text",
      "name": "resetLink",
      "encode": {
        "enter": {
          "baseline": {"value": "middle"},
          "align": {"value": "center"},
          "fontSize": {"value": 16}
        },
        "update": {
          "x": {"signal": "width / 2"},
          "y": {"value": 36},
          "text": {"signal": "highlight_website ? 'Focusing on publisher '+highlight_website+' (click here to reset)' : 'Click on an entry in the legend to focus on a publisher'"},
          "cursor": {"value": "pointer"}
        }
      }
    },
    {
      "type": "group",
      "clip": true,
      "from": {
        "facet": {
          "name": "grouped",
          "data": "data",
          "groupby": [
            "website", "devicetypename", "pagegroupname"
          ]
        }
      },
      "marks": [
        {
          "type": "area",
          "from": {"data": "grouped"},
          "encode": {
            "update": {
              "fill": {"scale": "color", "field": "website"},
              "stroke": {"scale": "color", "field": "website"},
              "y2": {"signal": "height"},
              "y": {"scale": "sessions", "field": "perc_sessions"},
              "x": {"scale": "bucket", "field": "bucket"},
              "fillOpacity": {"value": 0.25},
              "strokeOpacity": {"value": 0.5},
              "interpolate": {"value": "catmull-rom"},
              "opacity": {"signal": "highlight_website ? highlight_website == datum.website ? 1 : 0.05 : 0.5"}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "grouped"},
          "encode": {
            "enter": {
              "shape": {"value": "circle"},
              "size": {"signal": "markersize"},
              "opacity": {"value": 1}
            },
            "update": {
              "fill": {"scale": "color", "field": "website"},
              "x": {"scale": "bucket", "field": "bucket"},
              "y": {"scale": "retention", "field": "retention_rate"},
              "zindex": 1,
              "opacity": {"signal": "highlight_website ? highlight_website == datum.website ? 1 : 0.05 : 0.5"}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "grouped"},
          "encode": {
            "enter": {
              "shape": {"value": "cross"},
              "size": {"signal": "markersize"}
            },
            "update": {
              "fill": {"scale": "color", "field": "website"},
              "x": {"scale": "bucket", "field": "bucket"},
              "y": {"scale": "retention", "field": "bounce_rate"},
              "zindex": 1,
              "opacity": {"signal": "highlight_website ? highlight_website == datum.website ? 1 : 0.05 : 0.5"}
            }
          }
        }
      ]
    }
  ],
  "legends": [
    {
      "fill": "color",
      "title": "Publisher",
      "encode": {
        "labels": {
          "interactive": true,
          "name": "legendLabel",
          "update": {
            "cursor": {"value": "pointer"}
          }
        },
        "symbols": {
          "interactive": true,
          "name": "legendSymbol",
          "update": {
            "size": {"value": 120},
            "cursor": {"value": "pointer"},
            "opacity": {"signal": "highlight_website ? highlight_website == datum.value ? 1 : 0.1 : 1"}
          }
        }
      }
    },
    {
      "shape": "shape",
      "title": "Key",
      "encode": {
        "symbols": {
          "update": {
            "fill": {"signal": "scale('color',highlight_website ? highlight_website : 1)"},
            "size": {"signal": "markersize"},
            "stroke": {"value": "transparent"}
          }
        }
      }
    }
  ]
}