Region Interactor Tests
Loading Example... ⏳
Specification
js
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_filter = 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.xLine(true),
vg.yLine(true),
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_filter}),
vg.highlight({by: $counties_filter}),
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_filter: { 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
xLine: true
yLine: true
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_filter
- select: highlight
by: $counties_filter
margin: 0
projectionType: albersjson
{
"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_filter": {
"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,
"xLine": true,
"yLine": true,
"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_filter"
},
{
"select": "highlight",
"by": "$counties_filter"
}
],
"margin": 0,
"projectionType": "albers"
}
]
}py
import vgplot as vg
bls_unemp = vg.parquet("data/bls-metro-unemployment.parquet")
feed = vg.spatial("data/usgs-feed.geojson")
world = vg.spatial("data/countries-110m.json", layer="land")
counties = vg.spatial("data/us-counties-10m.json", layer="counties")
series = vg.selection.single()
quakes = vg.selection.single()
counties_filter = vg.selection.single()
view = vg.vconcat(
vg.plot(
vg.rule_y(data=[0]),
vg.line_y(
data=bls_unemp,
optimize=False,
x="date",
y="unemployment",
z="division",
stroke="steelblue",
stroke_opacity=0.9,
curve="monotone-x",
),
vg.region(channels=["z"], bind=series),
vg.highlight(by=series),
vg.margin_left(24),
vg.x_label(None),
vg.x_ticks(10),
vg.x_line(True),
vg.y_line(True),
vg.y_label("Unemployment (%)"),
vg.y_grid(True),
vg.margin_right(0),
),
vg.vspace(10),
vg.plot(
vg.geo(world, fill="currentColor", fill_opacity=0.2),
vg.sphere(stroke_width=0.5),
vg.geo(
feed,
channels=vg.channels(id="id"),
r=vg.sql("POW(10, mag)"),
stroke="red",
fill="red",
fill_opacity=0.2,
title="title",
href="url",
target="_blank",
),
vg.region(channels=["id"], bind=quakes),
vg.highlight(by=quakes),
vg.margin(2),
vg.projection_type("equirectangular"),
),
vg.vspace(10),
vg.plot(
vg.geo(
counties,
channels=vg.channels(id="id"),
stroke="currentColor",
stroke_width=0.25,
),
vg.region(channels=["id"], bind=counties_filter),
vg.highlight(by=counties_filter),
vg.margin(0),
vg.projection_type("albers"),
),
)