Region Interactor Tests

Loading Example... ⏳

Specification

JavaScript

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

await vg.coordinator().exec([
  vg.loadExtension("spatial"),
  vg.loadParquet("bls_unemp", "data/bls-metro-unemployment.parquet"),
  vg.loadSpatial("feed", "data/usgs-feed.geojson"),
  vg.loadSpatial("world", "data/countries-110m.json", {layer: "land"}),
  vg.loadSpatial("counties", "data/us-counties-10m.json", {layer: "counties"})
]);

const $series = vg.Selection.single();
const $quakes = vg.Selection.single();
const $counties = vg.Selection.single();

export default vg.vconcat(
  vg.plot(
    vg.ruleY([0]),
    vg.lineY(
      vg.from("bls_unemp", {optimize: false}),
      {
        x: "date",
        y: "unemployment",
        z: "division",
        stroke: "steelblue",
        strokeOpacity: 0.9,
        curve: "monotone-x"
      }
    ),
    vg.region({channels: ["z"], as: $series}),
    vg.highlight({by: $series}),
    vg.marginLeft(24),
    vg.xLabel(null),
    vg.xTicks(10),
    vg.yLabel("Unemployment (%)"),
    vg.yGrid(true),
    vg.marginRight(0)
  ),
  vg.vspace(10),
  vg.plot(
    vg.geo(
      vg.from("world"),
      {fill: "currentColor", fillOpacity: 0.2}
    ),
    vg.sphere({strokeWidth: 0.5}),
    vg.geo(
      vg.from("feed"),
      {
        channels: {id: "id"},
        r: vg.sql`POW(10, mag)`,
        stroke: "red",
        fill: "red",
        fillOpacity: 0.2,
        title: "title",
        href: "url",
        target: "_blank"
      }
    ),
    vg.region({channels: ["id"], as: $quakes}),
    vg.highlight({by: $quakes}),
    vg.margin(2),
    vg.projectionType("equirectangular")
  ),
  vg.vspace(10),
  vg.plot(
    vg.geo(
      vg.from("counties"),
      {channels: {id: "id"}, stroke: "currentColor", strokeWidth: 0.25}
    ),
    vg.region({channels: ["id"], as: $counties}),
    vg.highlight({by: $counties}),
    vg.margin(0),
    vg.projectionType("albers")
  )
);

YAML

meta:
  title: Region Interactor Tests
  descriptions: >
    Varied plots using region interactors to highlight selected values.
data:
  bls_unemp:
    file: data/bls-metro-unemployment.parquet
  feed:
    type: spatial
    file: data/usgs-feed.geojson
  world:
    type: spatial
    file: data/countries-110m.json
    layer: land
  counties:
    type: spatial
    file: data/us-counties-10m.json
    layer: counties
params:
  series: { select: single }
  quakes: { select: single }
  counties: { select: single }
vconcat:
- plot:
  - mark: ruleY
    data: [0]
  - mark: lineY
    data: { from: bls_unemp, optimize: false }
    x: date
    y: unemployment
    z: division
    stroke: steelblue
    strokeOpacity: 0.9
    curve: monotone-x
  - select: region
    channels: [z]
    as: $series
  - select: highlight
    by: $series
  marginLeft: 24
  xLabel: null
  xTicks: 10
  yLabel: Unemployment (%)
  yGrid: true
  marginRight: 0
- vspace: 10
- plot:
  - mark: geo
    data: { from: world }
    fill: currentColor
    fillOpacity: 0.2
  - mark: sphere
    strokeWidth: 0.5
  - mark: geo
    data: { from: feed }
    channels: { id: id }
    r: { sql: 'POW(10, mag)' }
    stroke: red
    fill: red
    fillOpacity: 0.2
    title: title
    href: url
    target: _blank
  - select: region
    channels: [id]
    as: $quakes
  - select: highlight
    by: $quakes
  margin: 2
  projectionType: equirectangular
- vspace: 10
- plot:
  - mark: geo
    data: { from: counties }
    channels: { id: id }
    stroke: currentColor
    strokeWidth: 0.25
  - select: region
    channels: [id]
    as: $counties
  - select: highlight
    by: $counties
  margin: 0
  projectionType: albers

JSON

{
  "meta": {
    "title": "Region Interactor Tests",
    "descriptions": "Varied plots using region interactors to highlight selected values.\n"
  },
  "data": {
    "bls_unemp": {
      "file": "data/bls-metro-unemployment.parquet"
    },
    "feed": {
      "type": "spatial",
      "file": "data/usgs-feed.geojson"
    },
    "world": {
      "type": "spatial",
      "file": "data/countries-110m.json",
      "layer": "land"
    },
    "counties": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "counties"
    }
  },
  "params": {
    "series": {
      "select": "single"
    },
    "quakes": {
      "select": "single"
    },
    "counties": {
      "select": "single"
    }
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "ruleY",
          "data": [
            0
          ]
        },
        {
          "mark": "lineY",
          "data": {
            "from": "bls_unemp",
            "optimize": false
          },
          "x": "date",
          "y": "unemployment",
          "z": "division",
          "stroke": "steelblue",
          "strokeOpacity": 0.9,
          "curve": "monotone-x"
        },
        {
          "select": "region",
          "channels": [
            "z"
          ],
          "as": "$series"
        },
        {
          "select": "highlight",
          "by": "$series"
        }
      ],
      "marginLeft": 24,
      "xLabel": null,
      "xTicks": 10,
      "yLabel": "Unemployment (%)",
      "yGrid": true,
      "marginRight": 0
    },
    {
      "vspace": 10
    },
    {
      "plot": [
        {
          "mark": "geo",
          "data": {
            "from": "world"
          },
          "fill": "currentColor",
          "fillOpacity": 0.2
        },
        {
          "mark": "sphere",
          "strokeWidth": 0.5
        },
        {
          "mark": "geo",
          "data": {
            "from": "feed"
          },
          "channels": {
            "id": "id"
          },
          "r": {
            "sql": "POW(10, mag)"
          },
          "stroke": "red",
          "fill": "red",
          "fillOpacity": 0.2,
          "title": "title",
          "href": "url",
          "target": "_blank"
        },
        {
          "select": "region",
          "channels": [
            "id"
          ],
          "as": "$quakes"
        },
        {
          "select": "highlight",
          "by": "$quakes"
        }
      ],
      "margin": 2,
      "projectionType": "equirectangular"
    },
    {
      "vspace": 10
    },
    {
      "plot": [
        {
          "mark": "geo",
          "data": {
            "from": "counties"
          },
          "channels": {
            "id": "id"
          },
          "stroke": "currentColor",
          "strokeWidth": 0.25
        },
        {
          "select": "region",
          "channels": [
            "id"
          ],
          "as": "$counties"
        },
        {
          "select": "highlight",
          "by": "$counties"
        }
      ],
      "margin": 0,
      "projectionType": "albers"
    }
  ]
}