spec = ({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: {
url: "https://raw.githubusercontent.com/vega/vega-datasets/next/data/cars.json",
name: "base"
},
vconcat: [
{
title: "Horsepower Histogram",
height: 100,
width: width - 250,
params: [
{
name: "hp",
value: { x: [130, 170] },
select: { type: "interval" }
}
],
mark: { type: "bar" },
encoding: {
y: { aggregate: "count", axis: null },
x: { field: "Horsepower", bin: true },
color: {
field: "Horsepower",
aggregate: "mean",
legend: { title: "Horsepower" }
}
}
},
{
title: "Icicle Plot",
width: width - 250,
height: { step: 80 },
transform: [
{ window: [{ op: "row_number", as: "id" }] },
{ fold: ["Origin", "Year", "Cylinders", "Horsepower"] },
{
calculate:
"indexof(['Origin', 'Year', 'Cylinders', 'Horsepower'], datum.key)",
as: "order"
},
{ filter: "datum.order >= 0" },
{
window: [{ op: "dense_rank", as: "rank" }],
groupby: ["key"],
sort: [{ field: "value", order: "ascending" }]
},
{ calculate: "pad(datum.rank, 6, '0', 'left')", as: "rank" },
{
window: [{ op: "values", as: "values", field: "values" }],
groupby: ["id"],
frame: [0, null],
sort: [{ field: "order", order: "descending" }]
},
{
calculate: "join(reverse(pluck(datum.values, 'value')), ' → ')",
as: "Group"
},
{
calculate: "join(reverse(pluck(datum.values, 'rank')), '.')",
as: "rank"
},
{
window: [{ op: "min", as: "min", field: "Cylinders" }],
frame: [null, null],
sort: [{ field: "rank", order: "ascending" }]
},
{
aggregate: [
{ op: "count", as: "Count" },
{ op: "mean", field: "Horsepower", as: "Avg. Horsepower" },
{ op: "min", field: "Horsepower", as: "minHorsepower" },
{ op: "max", field: "Horsepower", as: "maxHorsepower" }
],
groupby: ["key", "Group", "order", "rank"]
},
{
stack: "Count",
offset: "normalize",
as: "CountStack",
sort: [{ field: "rank", order: "ascending" }],
groupby: ["key"]
},
{
calculate:
"hp.Horsepower ? datum.maxHorsepower >= hp.Horsepower[0] && datum.minHorsepower <= hp.Horsepower[1] : true",
as: "filter"
},
{
aggregate: [{ op: "max", as: "filter", field: "filter" }],
groupby: [
"key",
"Group",
"order",
"Count",
"Avg. Horsepower",
"minHorsepower",
"maxHorsepower",
"CountStack",
"CountStack_end",
"rank"
]
},
{
calculate: "datum.CountStack_end - datum.CountStack",
as: "Percentage"
},
{
calculate: "datum.minHorsepower + '-' + datum.maxHorsepower",
as: "Horsepower Range"
}
],
mark: {
type: "rect",
stroke: "white",
strokeWidth: 0.5
},
encoding: {
y: { field: "key", sort: { field: "order" }, axis: { title: null } },
x: {
field: "CountStack",
type: "quantitative",
scale: { zero: false, nice: false },
axis: null
},
x2: { field: "CountStack_end", type: "quantitative" },
detail: { field: "Group" },
color: { field: "Avg. Horsepower", type: "quantitative" },
opacity: {
condition: { test: "datum.filter", value: 1 },
value: 0
},
tooltip: [
{ field: "Group", type: "nominal" },
{ field: "Avg. Horsepower", type: "quantitative" },
{ field: "Horsepower Range", type: "nominal" },
{ field: "Percentage", type: "quantitative", format: ".1%" }
]
}
}
]
})