Legends
Tests for different legend types and configurations. We test both legends defined within plots (with a zero-size frame) and external legends that reference a named plot.
Loading Example... ⏳
Specification
js
import * as vg from "@uwdata/vgplot";
const $toggle = vg.Selection.single();
const $interval = vg.Selection.intersect();
const $domain = vg.Param.array(["foo", "bar", "baz", "bop", "doh"]);
const defaultAttributes = [
vg.margin(0),
vg.width(0),
vg.height(20)
];
export default vg.vconcat(
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Color Swatch", as: $toggle}),
...defaultAttributes,
vg.name("color-categorical"),
vg.colorScale("categorical"),
vg.colorDomain($domain)
),
vg.hspace(35),
vg.colorLegend({for: "color-categorical", label: "Color Swatch (External)", as: $toggle})
),
vg.hconcat(
vg.plot(
vg.symbolLegend({label: "Symbol Swatch", as: $toggle}),
...defaultAttributes,
vg.name("symbol-categorical"),
vg.symbolDomain($domain)
),
vg.hspace(35),
vg.symbolLegend({for: "symbol-categorical", label: "Symbol Swatch (External)", as: $toggle})
),
vg.vspace("1em"),
vg.hconcat(
vg.plot(
vg.opacityLegend({label: "Opacity Ramp", as: $interval}),
...defaultAttributes,
vg.name("opacity-linear"),
vg.opacityDomain([0, 100])
),
vg.hspace(30),
vg.opacityLegend({for: "opacity-linear", label: "Opacity Ramp (External)", as: $interval})
),
vg.hconcat(
vg.plot(
vg.opacityLegend(),
...defaultAttributes,
vg.name("opacity-linear-no-label"),
vg.opacityDomain([0, 100])
),
vg.hspace(30),
vg.opacityLegend({for: "opacity-linear-no-label"})
),
vg.vspace("1em"),
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Linear Color Ramp", as: $interval}),
...defaultAttributes,
vg.name("color-linear"),
vg.colorDomain([0, 100])
),
vg.hspace(30),
vg.colorLegend({for: "color-linear", label: "Linear Color Ramp (External)", as: $interval})
),
vg.hconcat(
vg.plot(
vg.colorLegend(),
...defaultAttributes,
vg.name("color-linear-no-label"),
vg.colorDomain([0, 100])
),
vg.hspace(30),
vg.colorLegend({for: "color-linear-no-label"})
),
vg.vspace("1em"),
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Logarithmic Color Ramp", as: $interval}),
...defaultAttributes,
vg.name("color-log"),
vg.colorScale("log"),
vg.colorDomain([1, 100])
),
vg.hspace(30),
vg.colorLegend({
for: "color-log",
label: "Logarithmic Color Ramp (External)",
as: $interval
})
),
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Diverging Color Ramp", as: $interval}),
...defaultAttributes,
vg.name("color-diverging"),
vg.colorScale("diverging"),
vg.colorDomain([-100, 100]),
vg.colorConstant(20)
),
vg.hspace(30),
vg.colorLegend({
for: "color-diverging",
label: "Diverging Color Ramp (External)",
as: $interval
})
),
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Diverging Symlog Color Ramp", as: $interval}),
...defaultAttributes,
vg.name("color-diverging-symlog"),
vg.colorScale("diverging-symlog"),
vg.colorDomain([-100, 100]),
vg.colorConstant(20)
),
vg.hspace(30),
vg.colorLegend({
for: "color-diverging-symlog",
label: "Diverging Symlog Color Ramp (External)",
as: $interval
})
),
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Quantize Color Ramp"}),
...defaultAttributes,
vg.name("color-quantize"),
vg.colorScale("quantize"),
vg.colorDomain([0, 100])
),
vg.hspace(30),
vg.colorLegend({for: "color-quantize", label: "Quantize Color Ramp (External)"})
),
vg.hconcat(
vg.plot(
vg.colorLegend({label: "Threshold Color Ramp"}),
...defaultAttributes,
vg.name("color-threshold"),
vg.colorScale("threshold"),
vg.colorDomain([0, 10, 20, 40, 80])
),
vg.hspace(30),
vg.colorLegend({for: "color-threshold", label: "Threshold Color Ramp (External)"})
)
);yaml
meta:
title: Legends
description: >
Tests for different legend types and configurations.
We test both legends defined within plots (with a zero-size frame)
and external legends that reference a named plot.
params:
toggle: { select: single }
interval: { select: intersect }
domain: ['foo', 'bar', 'baz', 'bop', 'doh']
plotDefaults:
margin: 0
width: 0
height: 20
vconcat:
- hconcat:
- plot:
- legend: color
label: Color Swatch
as: $toggle
name: color-categorical
colorScale: categorical
colorDomain: $domain
- hspace: 35
- legend: color
for: color-categorical
label: Color Swatch (External)
as: $toggle
- hconcat:
- plot:
- legend: symbol
label: Symbol Swatch
as: $toggle
name: symbol-categorical
symbolDomain: $domain
- hspace: 35
- legend: symbol
for: symbol-categorical
label: Symbol Swatch (External)
as: $toggle
- vspace: 1em
- hconcat:
- plot:
- legend: opacity
label: Opacity Ramp
as: $interval
name: opacity-linear
opacityDomain: [0, 100]
- hspace: 30
- legend: opacity
for: opacity-linear
label: Opacity Ramp (External)
as: $interval
- hconcat:
- plot:
- legend: opacity
name: opacity-linear-no-label
opacityDomain: [0, 100]
- hspace: 30
- legend: opacity
for: opacity-linear-no-label
- vspace: 1em
- hconcat:
- plot:
- legend: color
label: Linear Color Ramp
as: $interval
name: color-linear
colorDomain: [0, 100]
- hspace: 30
- legend: color
for: color-linear
label: Linear Color Ramp (External)
as: $interval
- hconcat:
- plot:
- legend: color
name: color-linear-no-label
colorDomain: [0, 100]
- hspace: 30
- legend: color
for: color-linear-no-label
- vspace: 1em
- hconcat:
- plot:
- legend: color
label: Logarithmic Color Ramp
as: $interval
name: color-log
colorScale: log
colorDomain: [1, 100]
- hspace: 30
- legend: color
for: color-log
label: Logarithmic Color Ramp (External)
as: $interval
- hconcat:
- plot:
- legend: color
label: Diverging Color Ramp
as: $interval
name: color-diverging
colorScale: diverging
colorDomain: [-100, 100]
colorConstant: 20
- hspace: 30
- legend: color
for: color-diverging
label: Diverging Color Ramp (External)
as: $interval
- hconcat:
- plot:
- legend: color
label: Diverging Symlog Color Ramp
as: $interval
name: color-diverging-symlog
colorScale: diverging-symlog
colorDomain: [-100, 100]
colorConstant: 20
- hspace: 30
- legend: color
for: color-diverging-symlog
label: Diverging Symlog Color Ramp (External)
as: $interval
- hconcat:
- plot:
- legend: color
label: Quantize Color Ramp
name: color-quantize
colorScale: quantize
colorDomain: [0, 100]
- hspace: 30
- legend: color
for: color-quantize
label: Quantize Color Ramp (External)
- hconcat:
- plot:
- legend: color
label: Threshold Color Ramp
name: color-threshold
colorScale: threshold
colorDomain: [0, 10, 20, 40, 80]
- hspace: 30
- legend: color
for: color-threshold
label: Threshold Color Ramp (External)json
{
"meta": {
"title": "Legends",
"description": "Tests for different legend types and configurations. We test both legends defined within plots (with a zero-size frame) and external legends that reference a named plot.\n"
},
"params": {
"toggle": {
"select": "single"
},
"interval": {
"select": "intersect"
},
"domain": [
"foo",
"bar",
"baz",
"bop",
"doh"
]
},
"plotDefaults": {
"margin": 0,
"width": 0,
"height": 20
},
"vconcat": [
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Color Swatch",
"as": "$toggle"
}
],
"name": "color-categorical",
"colorScale": "categorical",
"colorDomain": "$domain"
},
{
"hspace": 35
},
{
"legend": "color",
"for": "color-categorical",
"label": "Color Swatch (External)",
"as": "$toggle"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "symbol",
"label": "Symbol Swatch",
"as": "$toggle"
}
],
"name": "symbol-categorical",
"symbolDomain": "$domain"
},
{
"hspace": 35
},
{
"legend": "symbol",
"for": "symbol-categorical",
"label": "Symbol Swatch (External)",
"as": "$toggle"
}
]
},
{
"vspace": "1em"
},
{
"hconcat": [
{
"plot": [
{
"legend": "opacity",
"label": "Opacity Ramp",
"as": "$interval"
}
],
"name": "opacity-linear",
"opacityDomain": [
0,
100
]
},
{
"hspace": 30
},
{
"legend": "opacity",
"for": "opacity-linear",
"label": "Opacity Ramp (External)",
"as": "$interval"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "opacity"
}
],
"name": "opacity-linear-no-label",
"opacityDomain": [
0,
100
]
},
{
"hspace": 30
},
{
"legend": "opacity",
"for": "opacity-linear-no-label"
}
]
},
{
"vspace": "1em"
},
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Linear Color Ramp",
"as": "$interval"
}
],
"name": "color-linear",
"colorDomain": [
0,
100
]
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-linear",
"label": "Linear Color Ramp (External)",
"as": "$interval"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "color"
}
],
"name": "color-linear-no-label",
"colorDomain": [
0,
100
]
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-linear-no-label"
}
]
},
{
"vspace": "1em"
},
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Logarithmic Color Ramp",
"as": "$interval"
}
],
"name": "color-log",
"colorScale": "log",
"colorDomain": [
1,
100
]
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-log",
"label": "Logarithmic Color Ramp (External)",
"as": "$interval"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Diverging Color Ramp",
"as": "$interval"
}
],
"name": "color-diverging",
"colorScale": "diverging",
"colorDomain": [
-100,
100
],
"colorConstant": 20
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-diverging",
"label": "Diverging Color Ramp (External)",
"as": "$interval"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Diverging Symlog Color Ramp",
"as": "$interval"
}
],
"name": "color-diverging-symlog",
"colorScale": "diverging-symlog",
"colorDomain": [
-100,
100
],
"colorConstant": 20
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-diverging-symlog",
"label": "Diverging Symlog Color Ramp (External)",
"as": "$interval"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Quantize Color Ramp"
}
],
"name": "color-quantize",
"colorScale": "quantize",
"colorDomain": [
0,
100
]
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-quantize",
"label": "Quantize Color Ramp (External)"
}
]
},
{
"hconcat": [
{
"plot": [
{
"legend": "color",
"label": "Threshold Color Ramp"
}
],
"name": "color-threshold",
"colorScale": "threshold",
"colorDomain": [
0,
10,
20,
40,
80
]
},
{
"hspace": 30
},
{
"legend": "color",
"for": "color-threshold",
"label": "Threshold Color Ramp (External)"
}
]
}
]
}