Observable Latency

Web request latency on Observable.com. Each pixel in the heatmap shows the most common route (URL pattern) at a given response latency within a time interval. Use the bar chart of most-requested routes to filter the heatmap and isolate specific patterns. Or, select a range in the heatmap to show the corresponding most-requested routes.

You may need to wait a few seconds for the dataset to load.

Loading Example... ⏳

Credit: Adapted from an Observable Framework example.

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadParquet("latency", "https://idl.uw.edu/mosaic-datasets/data/observable-latency.parquet")
]);

const $filter = vg.Selection.crossfilter();
const $highlight = vg.Selection.intersect();

export default vg.vconcat(
  vg.plot(
    vg.frame({fill: "black"}),
    vg.raster(
      vg.from("latency", {filterBy: $filter}),
      {
        x: "time",
        y: "latency",
        fill: vg.argmax("route", "count"),
        fillOpacity: vg.sum("count"),
        width: 2016,
        height: 500,
        imageRendering: "pixelated"
      }
    ),
    vg.intervalXY({as: $filter}),
    vg.colorDomain(vg.Fixed),
    vg.colorScheme("observable10"),
    vg.opacityDomain([0, 25]),
    vg.opacityClamp(true),
    vg.yScale("log"),
    vg.yLabel("↑ Duration (ms)"),
    vg.yDomain([0.5, 10000]),
    vg.yTickFormat("s"),
    vg.xScale("utc"),
    vg.xLabel(null),
    vg.xDomain([1706227200000, 1706832000000]),
    vg.width(680),
    vg.height(300),
    vg.margins({left: 35, top: 20, bottom: 30, right: 20})
  ),
  vg.plot(
    vg.barX(
      vg.from("latency", {filterBy: $filter}),
      {
        x: vg.sum("count"),
        y: "route",
        fill: "route",
        sort: {y: "-x", limit: 15}
      }
    ),
    vg.toggleY({as: $filter}),
    vg.toggleY({as: $highlight}),
    vg.highlight({by: $highlight}),
    vg.colorDomain(vg.Fixed),
    vg.xLabel("Routes by Total Requests"),
    vg.xTickFormat("s"),
    vg.yLabel(null),
    vg.width(680),
    vg.height(300),
    vg.marginTop(5),
    vg.marginLeft(220),
    vg.marginBottom(35)
  )
);

YAML

meta:
  title: Observable Latency
  description: |
    Web request latency on Observable.com.
    Each pixel in the heatmap shows the most common route (URL pattern) at a given response latency within a time interval.
    Use the bar chart of most-requested routes to filter the heatmap and isolate specific patterns.
    Or, select a range in the heatmap to show the corresponding most-requested routes.

    _You may need to wait a few seconds for the dataset to load._
  credit: Adapted from an [Observable Framework example](https://observablehq.com/framework/examples/api/).
data:
  latency:
    file: https://idl.uw.edu/mosaic-datasets/data/observable-latency.parquet
params:
  filter: { select: crossfilter }
vconcat:
- plot:
  - mark: frame
    fill: black
  - mark: raster
    data: { from: latency, filterBy: $filter }
    x: time
    y: latency
    fill: { argmax: [route, count] }
    fillOpacity: { sum: count }
    width: 2016
    height: 500
    imageRendering: pixelated
  - select: intervalXY
    as: $filter
  colorDomain: Fixed
  colorScheme: observable10
  opacityDomain: [0, 25]
  opacityClamp: true
  yScale: log
  yLabel: ↑ Duration (ms)
  yDomain: [0.5, 10000]
  yTickFormat: s
  xScale: utc
  xLabel: null
  xDomain: [1706227200000, 1706832000000]
  width: 680
  height: 300
  margins: { left: 35, top: 20, bottom: 30, right: 20 }
- plot:
  - mark: barX
    data: { from: latency, filterBy: $filter }
    x: { sum: count }
    y: route
    fill: route
    sort: { y: -x, limit: 15 }
  - select: toggleY
    as: $filter
  - select: toggleY
    as: $highlight
  - select: highlight
    by: $highlight
  colorDomain: Fixed
  xLabel: Routes by Total Requests
  xTickFormat: s
  yLabel: null
  width: 680
  height: 300
  marginTop: 5
  marginLeft: 220
  marginBottom: 35

JSON

{
  "meta": {
    "title": "Observable Latency",
    "description": "Web request latency on Observable.com.\nEach pixel in the heatmap shows the most common route (URL pattern) at a given response latency within a time interval.\nUse the bar chart of most-requested routes to filter the heatmap and isolate specific patterns.\nOr, select a range in the heatmap to show the corresponding most-requested routes.\n\n_You may need to wait a few seconds for the dataset to load._\n",
    "credit": "Adapted from an [Observable Framework example](https://observablehq.com/framework/examples/api/)."
  },
  "data": {
    "latency": {
      "file": "https://idl.uw.edu/mosaic-datasets/data/observable-latency.parquet"
    }
  },
  "params": {
    "filter": {
      "select": "crossfilter"
    }
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "frame",
          "fill": "black"
        },
        {
          "mark": "raster",
          "data": {
            "from": "latency",
            "filterBy": "$filter"
          },
          "x": "time",
          "y": "latency",
          "fill": {
            "argmax": [
              "route",
              "count"
            ]
          },
          "fillOpacity": {
            "sum": "count"
          },
          "width": 2016,
          "height": 500,
          "imageRendering": "pixelated"
        },
        {
          "select": "intervalXY",
          "as": "$filter"
        }
      ],
      "colorDomain": "Fixed",
      "colorScheme": "observable10",
      "opacityDomain": [
        0,
        25
      ],
      "opacityClamp": true,
      "yScale": "log",
      "yLabel": "↑ Duration (ms)",
      "yDomain": [
        0.5,
        10000
      ],
      "yTickFormat": "s",
      "xScale": "utc",
      "xLabel": null,
      "xDomain": [
        1706227200000,
        1706832000000
      ],
      "width": 680,
      "height": 300,
      "margins": {
        "left": 35,
        "top": 20,
        "bottom": 30,
        "right": 20
      }
    },
    {
      "plot": [
        {
          "mark": "barX",
          "data": {
            "from": "latency",
            "filterBy": "$filter"
          },
          "x": {
            "sum": "count"
          },
          "y": "route",
          "fill": "route",
          "sort": {
            "y": "-x",
            "limit": 15
          }
        },
        {
          "select": "toggleY",
          "as": "$filter"
        },
        {
          "select": "toggleY",
          "as": "$highlight"
        },
        {
          "select": "highlight",
          "by": "$highlight"
        }
      ],
      "colorDomain": "Fixed",
      "xLabel": "Routes by Total Requests",
      "xTickFormat": "s",
      "yLabel": null,
      "width": 680,
      "height": 300,
      "marginTop": 5,
      "marginLeft": 220,
      "marginBottom": 35
    }
  ]
}