Data Visualization: Vega-Lite Gallery

This How-To Guide has examples of visualizations with Rel and Vega-Lite.

Goal

This How-To Guide acts as a companion to the Data Visualization (Vega-Lite) How-To Guide. It provides more examples of visualizations built using Rel and Vega-Lite. The examples here are adapted from a subset of the examples Vega-Lite provides.

Data Sources

Throughout the examples, we’ll use the penguin dataset and the airfoil dataset, both from our public S3 bucket.

Penguin Dataset

update
// data location
def config:path = "s3://relationalai-documentation-public/ml-classification/penguin/penguins_size.csv"

// data schema
def config:schema:species = "string"
def config:schema:island = "string"
def config:schema:culmen_length_mm = "float"
def config:schema:culmen_depth_mm = "float"
def config:schema:flipper_length_mm = "float"
def config:schema:body_mass_g = "float"
def config:schema:sex = "string"

def penguin_data = load_csv[config]

// clean the data to remove NA and .
def row_with_error(row) =
penguin_data:sex(row, "NA") or
penguin_data:sex(row, ".") or
penguin_data:load_errors(row, _, _)

def penguins_clean(column, row, entry...) =
penguin_data(column, row, entry...) and not row_with_error(row)

// insert transaction
def insert:penguin = penguins_clean

Airfoil Dataset

update
def config:path = "s3://relationalai-documentation-public/ml-regression/airfoil/airfoil_self_noise.dat"

def config:syntaxheader_row = -1
def config:syntax:header =
(1, :frequency);
(2, :angle);
(3, :chord_length);
(4, :velocity);
(5, :displacement);
(6, :sound)

def config:syntax:delim = '\t'

def config:schema:frequency = "float"
def config:schema:angle = "float"
def config:schema:chord_length = "float"
def config:schema:velocity = "float"
def config:schema:displacement = "float"
def config:schema:sound = "float"

// insert transaction
def insert:airfoil = load_csv[config]

Bar Charts

Aggregate Bar Chart (Sorted)

Original Vega-Lite Example

A bar chart that sorts the y-values by the x-values. We are using the sort value "-x" to sort the horizontal bars on the y axis in descending order according to the mean body mass (the x field).

query
vegalite:plot[
vegalite:bar[
{
:body_mass_g;
:type, "quantitative";
:aggregate, "mean";
:title, "Body Mass (g)";
},
{
:species;
:type, "ordinal";
:sort, "-x";
},
{
:data, penguin;
}
]
]
Aggregate Bar Chart (Sorted)

Grouped Bar Chart

Original Vega-Lite Example

A bar chart that groups the x axis by island. Each island is a column in the plot with 10 pixels of spacing between each column. Within each column the data is grouped by sex by adding the color specification.

query
def chart = vegalite:bar[
{
:sex;
:axis, boolean_false;
},
{
:body_mass_g;
:aggregate, "count";
:title, "Number of Penguins";
:axis, :grid, boolean_false;
},
{
:data, penguin;
:column, {
:island;
:type, "ordinal";
:spacing, 10;
:header, :orient, "bottom";
};
:color, {
:sex;
:scale, :range, :[], {(1, "#675193"); (2, "#ca8861")};
}
}
]

def chart:config = {
:view, :stroke, "transparent";
:axis, :domainWidth, 1;
}

def output = vegalite:plot[chart]
Grouped Bar Chart

Stacked Bar Chart with Rounded Corners

Original Vega-Lite Example

A stacked bar chart that has rounded bar corners. Specifying the bar mark’s :cornerRadiusTopLeft and :cornerRadiusTopRight create the rounded bars.

query
def chart = vegalite:bar[
:island,
{ :aggregate, "count" },
{
:data, penguin;
:color, :sex;
}
]

def chart:mark = {(:cornerRadiusTopLeft, 3); (:cornerRadiusTopRight, 3)}

def output = vegalite:plot[chart]
Stacked Bar Chart with Rounded Corners

Gantt Chart (Ranged Bar Marks)

Original Vega-Lite Example

A simple bar chart with ranged data (aka Gantt Chart). Specifying the start (x specification) and end (x2 specification) for each bar creates the staggered rectangles.

query
def config:data = """
task,start,end
"A",1,3
"B",3,8
"C",8,10
"""

def data = load_csv[config]

def output = vegalite:plot[
vegalite:bar[
{
:start;
:type, "quantitative";
},
{
:task;
:type, "ordinal";
},
{
:data, data;
:x2, :end;
}
]
]
Gantt Chart (Ranged Bar Marks)

Diverging Stacked Bar Chart (Population Pyramid)

Original Vega-Lite Example

A population pyramid for penguins, created using stack. See concat population pyramid for a variant of this created using concat. We use Rel to calculate the count of penguins by island and sex. Note the count of male penguins is negative, causing the diverging bars in the chart.

query
// calculate the count of penguins by island and sex
def counts = sort[sex, island:
count[id: penguin(:sex, id, sex) and penguin(:island, id, island)]
]
def data:count(id, n) = counts(id, "FEMALE", _, n)
def data:count = {id, -1 * n} from id, n where counts(id, "MALE", _, n)
def data:sex(id, sex) = counts(id, sex, _, _)
def data:island(id, island) = counts(id, _, island, _)

// build the Vega-Lite specification
def chart = vegalite:bar[
{
:count;
:type, "quantitative";
},
{
:island;
:type, "ordinal";
:axis, {
:domain, boolean_false;
:ticks, boolean_false;
};
:sort, "descending";
},
{
:data, data;
:color, {
:sex;
:scale, :range, :[], {(1, "#675193"); (2, "#ca8861")};
:legend, {(:orient, "top"); (:title, boolean_false)};
}
}
]

def chart:config:view:stroke = boolean_false
def chart:config:axis:grid = boolean_false

def output = vegalite:plot[chart]
Diverging Stacked Bar Chart (Population Pyramid)

Histograms, Density Plots, and Dot Plots

Histogram

Original Vega-Lite Example

A basic histogram. Vega-Lite creates the bins with reasonable defaults by setting :bin to boolean_true. See the bin documentation for details on how this can be further customized.

query
vegalite:plot[
vegalite:bar[
{
:body_mass_g;
:bin, boolean_true;
},
{ :aggregate, "count" },
{ :data, penguin }
]
]
Histogram

Density Plot

Original Vega-Lite Example

A continuous density plot. The "area" mark creates the continuous fill and the density transform calculates the :value and :density fields used in the x and y specifications.

query
def chart:mark = "area"
def chart:transform = {:[], 1, {(:density, "body_mass_g"); (:bandwidth, 100)}}
def chart = vegalite_utils:data[penguin]
def chart = vegalite_utils:x[{
:value;
:title, "Body Mass (g)";
:type, "quantitative";
}]
def chart = vegalite_utils:y[{
:density;
:type, "quantitative";
}]

def output = vegalite:plot[chart]
Density Plot

2D Histogram Scatterplot

Original Vega-Lite Example

A 2D histograms with each pair of bins sized by count of records. The columns represent the penguins' sex, which is also encoded by color.

query
def chart:mark = "circle"
def chart = vegalite_utils:data[penguin]
def chart = vegalite_utils:x[{
:body_mass_g;
:bin, :maxbins, 10;
}]
def chart = vegalite_utils:y[{
:flipper_length_mm;
:bin, :maxbins, 10;
}]
def chart = vegalite_utils:size[{:aggregate, "count"}]
def chart = vegalite_utils:column[:sex]
def chart = vegalite_utils:color[:sex]
def chart = vegalite_utils:opacity[0.6]

def output = vegalite:plot[chart]
2D Histogram Scatterplot

2D Histogram Heatmap

Original Vega-Lite Example

A 2D histogram with each pair of bins colored by count of records.

query
def chart:mark = "rect"
def chart = vegalite_utils:data[penguin]
def chart = vegalite_utils:x[{
:body_mass_g;
:bin, :maxbins, 40;
}]
def chart = vegalite_utils:y[{
:flipper_length_mm;
:bin, :maxbins, 40;
}]
def chart = vegalite_utils:color[{:aggregate, "count"}]
def chart:config:view:stroke = "transparent"

def output = vegalite:plot[chart]
2D Histogram Heatmap

Isotype Dot Plot

Original Vega-Lite Example

Visualize penguin counts using a penguin SVG. Each SVG penguin represents one penguin in the dataset. Vega-Lite allows any SVG path as the value of :shape. We use Rel to assign each penguin in the dataset to a column by species and island.

Note: The SVG path will display best if it is set to be drawn in the box from -1 to 1. This SVG path editor is very useful for resizing and orienting the path.

query
// assign each penguin to a column
def counts = sort[species, island:
sort[id: penguin(:species, id, species) and penguin(:island, id, island)]
]
def data:island(id, island) = counts(id, _, island, _, _)
def data:species(id, species) = counts(id, species, _, _, _)
def data:column(id, column) = counts(id, _, _, column, _)

def penguin_svg_path = "M 0.008 -0.978 C -0.184 -0.978 -0.296 -0.861 -0.317 -0.704 C -0.338 -0.546 -0.304 -0.517 -0.357 -0.356 C -0.41 -0.195 -0.648 0.082 -0.643 0.337 C -0.641 0.416 -0.632 0.485 -0.616 0.545 C -0.596 0.513 -0.567 0.49 -0.546 0.48 C -0.53 0.473 -0.522 0.469 -0.518 0.468 C -0.517 0.464 -0.515 0.454 -0.512 0.436 C -0.506 0.411 -0.486 0.371 -0.452 0.345 C -0.453 0.338 -0.453 0.33 -0.453 0.322 C -0.457 0.124 -0.252 -0.09 -0.215 -0.216 C -0.177 -0.341 -0.194 -0.354 -0.187 -0.385 C -0.181 -0.416 -0.157 -0.452 -0.123 -0.481 C -0.119 -0.484 -0.116 -0.485 -0.113 -0.485 C -0.081 -0.485 -0.05 -0.37 0.011 -0.37 C 0.072 -0.37 0.104 -0.51 0.139 -0.481 C 0.173 -0.452 0.197 -0.416 0.203 -0.385 C 0.209 -0.354 0.193 -0.341 0.231 -0.216 C 0.268 -0.09 0.473 0.124 0.469 0.322 C 0.469 0.33 0.468 0.338 0.468 0.345 C 0.502 0.371 0.522 0.411 0.527 0.436 C 0.531 0.454 0.533 0.464 0.534 0.468 C 0.538 0.469 0.546 0.473 0.562 0.48 C 0.583 0.49 0.612 0.513 0.631 0.545 C 0.647 0.485 0.657 0.416 0.658 0.337 C 0.664 0.082 0.426 -0.195 0.373 -0.356 C 0.32 -0.517 0.354 -0.546 0.333 -0.704 C 0.312 -0.861 0.199 -0.978 0.008 -0.978 Z M -0.368 0.387 C -0.377 0.388 -0.386 0.39 -0.396 0.394 C -0.461 0.421 -0.432 0.477 -0.461 0.513 C -0.489 0.549 -0.546 0.531 -0.564 0.604 C -0.582 0.677 -0.306 1.035 -0.158 0.974 C -0.009 0.913 -0.064 0.464 -0.128 0.425 C -0.192 0.386 -0.221 0.438 -0.266 0.433 C -0.304 0.429 -0.324 0.385 -0.368 0.387 Z M 0.379 0.387 C 0.338 0.388 0.318 0.429 0.282 0.433 C 0.236 0.438 0.208 0.386 0.144 0.425 C 0.08 0.464 0.025 0.913 0.173 0.974 C 0.322 1.035 0.598 0.677 0.58 0.604 C 0.562 0.531 0.505 0.549 0.477 0.513 C 0.448 0.477 0.477 0.421 0.412 0.394 C 0.4 0.389 0.389 0.387 0.379 0.387 Z M -0 0.826 C -0.003 0.847 -0.008 0.867 -0.013 0.887 C -0.023 0.92 -0.036 0.952 -0.056 0.98 C -0.036 0.981 -0.014 0.981 0.008 0.98 C 0.03 0.981 0.051 0.981 0.072 0.98 C 0.052 0.952 0.038 0.92 0.029 0.887 C 0.023 0.867 0.019 0.847 0.016 0.826 C 0.013 0.826 0.011 0.826 0.008 0.826 C 0.005 0.826 0.003 0.826 -0 0.826 Z"

def chart:mark = {(:type, "point"); (:filled, boolean_true)}
def chart = vegalite_utils:data[data]
def chart = vegalite_utils:x[{
:column;
:type, "quantitative";
:axis, :grid, boolean_false;
:title, "Count of Penguins";
}]
def chart = vegalite_utils:y[{
:species;
:type, "ordinal";
:axis, boolean_false;
}]
def chart = vegalite_utils:row[:island]
def chart = vegalite_utils:shape[penguin_svg_path]
def chart = vegalite_utils:color[:species]
def chart = vegalite_utils:size[100]
def chart:config:view:stroke = "transparent"
def chart:width = 650

def output = vegalite:plot[chart]
Isotype Dot Plot

Scatter & Strip Plots

Strip Plot

Original Vega-Lite Example

Shows the relationship between sound and frequency using tick marks. The x axis is zoomed in on the range with data by setting :scale, :zero to boolean_false.

query
def chart:mark = "tick"
def chart:width = 350
def chart = vegalite_utils:data[airfoil]
def chart = vegalite_utils:x[{
:sound;
:type, "quantitative";
:scale, :zero, boolean_false;
}]
def chart = vegalite_utils:y[{
:frequency;
:type, "ordinal";
}]

def output = vegalite:plot[chart]
Strip Plot

Colored Scatterplot

Original Vega-Lite Example

A scatterplot showing body mass and flipper lengths of penguins. The color and the shape of each point encodes the penguin’s species.

query
vegalite:plot[
vegalite:scatter[
{
:flipper_length_mm;
:title, "Flipper Length (mm)";
:scale, :zero, boolean_false;
},
{
:body_mass_g;
:title, "Body Mass (g)";
:scale, :zero, boolean_false;
},
{
:data, penguin;
:color, {
:species;
:type, "nominal";
};
:shape, {
:species;
:type, "nominal";
}
}
]
]
Colored Scatterplot

Scatter Plot with Text Marks

Original Vega-Lite Example

A scatterplot with the penguin species' initial as the points. The color also encodes the species.

query
// add the initial of the species to the penguin relation
def penguin:initial = id:
substring[{species: penguin(:species, id, species)}, 1, 1]

// build the specification
def chart:mark = "text"
def chart = vegalite_utils:data[penguin]
def chart = vegalite_utils:x[{
:flipper_length_mm;
:type, "quantitative";
:scale, :zero, boolean_false;
}]
def chart = vegalite_utils:y[{
:body_mass_g;
:type, "quantitative";
:scale, :zero, boolean_false;
}]
def chart = vegalite_utils:color[{
:species;
:type, "nominal";
}]
def chart = vegalite_utils:text[{
:initial;
:type, "nominal";
}]

def output = vegalite:plot[chart]
Scatter Plot with Text Marks

Bubble Plot

Original Vega-Lite Example

A bubbleplot showing frequency on x, chord length on y, and sound by size.

query
vegalite:plot[
vegalite:scatter[
:frequency,
:chord_length,
{
:data, airfoil;
:size, {
:sound;
:type, "quantitative";
:scale, :zero, boolean_false;
};
}
]
]
Bubble Plot

Line Charts

Line Chart with Stroked Point Markers

Original Vega-Lite Example

A line chart overlaid with white-filled points. Setting the point :filled to boolean_false creates point outlines, then setting the :fill to "white" makes the inner part of the point solid white instead of transparent. This is equivalent to creating a plot with two layers, one for lines and one for points.

query
def chart = vegalite:line[
:frequency,
{
:sound;
:aggregate, "mean";
:scale, :zero, boolean_false;
},
{
:data, airfoil;
:color, {
:chord_length;
:type, "nominal";
}
}
]

def chart:mark:point = { (:filled, boolean_false); (:fill, "white") }

def output = vegalite:plot[chart]
Line Chart with Stroked Point Markers

Repeat and Layer to Show Different Measures

Original Vega-Lite Example

Plotting multiple lines on one chart using layers. The fields to plot are defined in the :repeat:layer definition, then those are referenced in the y and color specifications.

query
def chart = vegalite_utils:data[airfoil]
def chart:repeat:layer = :[], { (1, "sound"); (2, "velocity") }
def chart:spec = vegalite:line[
:frequency,
{
:aggregate, "mean";
:field, :repeat, "layer";
},
{
:color, {
:datum, :repeat, "layer";
:type, "nominal";
}
}
]

def output = vegalite:plot[chart]
Repeat and Layer to Show Different Measures

Line Chart with Varying Size (using the trail mark)

Original Vega-Lite Example

Set the width of the line by another field using the trail mark. The size encoding is used to set the width, while the color groups the data by :chord_length.

query
def chart:mark = "trail"
def chart = vegalite_utils:data[airfoil]
def chart = vegalite_utils:x[{
:frequency;
:type, "quantitative";
}]
def chart = vegalite_utils:y[{
:sound;
:aggregate, "mean";
:scale, :zero, boolean_false;
}]
def chart = vegalite_utils:size[{
:displacement;
:aggregate, "mean";
}]
def chart = vegalite_utils:color[{
:chord_length;
:type, "nominal";
}]

def output = vegalite:plot[chart]
Line Chart with Varying Size (using the trail mark)

Line chart with varying stroke dash

Original Vega-Lite Example

A line chart using the stroke dash to differentiate chord length.

query
vegalite:plot[
vegalite:line[
:frequency,
{
:sound;
:aggregate, "mean";
:scale, :zero, boolean_false;
},
{
:data, airfoil;
:strokeDash, {
:chord_length;
:type, "nominal";
}
}
]
]
Line chart with varying stroke dash

Area Charts & Streamgraphs

Area Chart with Overlaying Lines and Point Markers

Original Vega-Lite Example

An area chart with a line and point markers.

query
def chart:mark:type = "area"
def chart:mark:line = boolean_true
def chart:mark:point = boolean_true
def chart = vegalite_utils:data[airfoil]
def chart = vegalite_utils:x[{
:frequency;
:type, "quantitative";
}]
def chart = vegalite_utils:y[{
:sound;
:aggregate, "mean";
}]

def output = vegalite:plot[chart]
Area Chart with Overlaying Lines and Point Markers

Table-based Plots

Layering text over heatmap

Original Vega-Lite Example

A heatmap with text labels layered on top. The extent of the "yellowgreen" color scale is limited to the lighter portion so the black text remains legible.

query
def chart = vegalite_utils:data[penguin]
def chart = vegalite_utils:x[{
:body_mass_g;
:bin, :maxbins, 10;
}]
def chart = vegalite_utils:y[{
:flipper_length_mm;
:bin, :maxbins, 10;
}]
def chart:layer = :[], 1, {
:mark, "rect";
vegalite_utils:color[{
:aggregate, "count";
:scale, :scheme, {
:name, "yellowgreen";
:extent, :[], {(1, 0.0); (2, 0.6)}
}
}]
}
def chart:layer = :[], 2, {
:mark, "text";
vegalite_utils:text[{:aggregate, "count"}]
}

def chart:config:view:stroke = "transparent"

def output = vegalite:plot[chart]
Layering text over heatmap

Circular Plots

Radial Plot

Original Vega-Lite Example

A radial chart of penguins count by island. The angle (:theta) and the radius of each wedge both represent the count of penguins on that island.

query
def counts = sort[island: count[id: penguin(:island, id, island)]]
def data:count(id, count) = counts(id, _, count)

def chart = vegalite_utils:data[data]
def chart = vegalite_utils:theta[{
:count;
:type, "quantitative";
:stack, boolean_true;
}]
def chart = vegalite_utils:radius[{
:count;
:scale, {
:type, "sqrt";
:zero, boolean_true;
:rangeMin, 20;
}
}]
def chart = vegalite_utils:color[{
:count;
:type, "nominal";
:legend, boolean_false;
}]

def chart:layer = :[], 1, {
:mark, {
:type, "arc";
:innerRadius, 20;
:stroke, "#fff";
}
}
def chart:layer = :[], 2, {
:mark, {
:type, "text";
:radiusOffset, 10;
};
vegalite_utils:text[{
:count;
:type, "quantitative";
}]
}

def output = vegalite:plot[chart]
Radial Plot

Advanced Calculations

Layering Averages over Raw Values

Original Vega-Lite Example

Plot showing average data with raw values in the background. An empty relation is passed as the third argument to vegalite:line as this layer specification requires no data (included in the top level specification) and no additional encoding or other options.

query
def chart = vegalite_utils:data[airfoil]
def chart:layer = :[], 1, {
vegalite:scatter[
:chord_length,
:sound,
{
:opacity, 0.1
}
]
}
def chart:layer = :[], 2, {
vegalite:line[
:chord_length,
{
:sound;
:aggregate, "mean"
},
{}
]
}

def output = vegalite:plot[chart]
Layering Averages over Raw Values

Composite Marks

Error Bars Showing Standard Deviation

Original Vega-Lite Example

Plot showing average data with standard deviation bars. Each point is the average for that chord length and the error bars are calculated by Vega-Lite and added as another layer.

query
def chart = vegalite_utils:data[airfoil]
def chart = vegalite_utils:y[{
:chord_length;
:type, "ordinal"
}]

def chart:layer = :[], 1, {
:mark, {
:type, "point";
:filled, boolean_true;
};
vegalite_utils:x[{
:sound;
:aggregate, "mean";
:scale, :zero, boolean_false;
:title, "Sound";
}];
vegalite_utils:color["black"]
}
def chart:layer = :[], 2, {
:mark, {
:type, "errorbar";
:extend, "stdev";
};
vegalite_utils:x[{
:sound;
:type, "quantitative";
:title, "Sound";
}];
}

def output = vegalite:plot[chart]
Error Bars Showing Standard Deviation

Line Chart with Confidence Interval Band

Original Vega-Lite Example

Plot showing average data with confidence interval band. The confidence interval is calculated by Vega-Lite and added as an additional layer.

query
def chart = vegalite_utils:data[airfoil]
def chart = vegalite_utils:x[:frequency]
def chart:layer = :[], 1, {
:mark, "line";
vegalite_utils:y[{
:sound;
:aggregate, "mean";
:scale, :zero, boolean_false;
}]
}
def chart:layer = :[], 2, {
:mark, {
:type, "errorband";
:extent, "ci";
};
vegalite_utils:y[{
:sound;
:aggregate, "mean";
}]
}

def output = vegalite:plot[chart]
Line Chart with Confidence Interval Band

Box Plot with Min/Max Whiskers

Original Vega-Lite Example

A vertical box plot showing median, min, and max body mass of penguins. Vega-Lite calculates the required statistics. Adding the color encoding creates a bar plot for each species.

query
def chart = vegalite_utils:data[penguin]
def chart:mark = {
:type, "boxplot";
:extent, "min-max";
}
def chart = vegalite_utils:x[{
:species;
:type, "nominal";
}]
def chart = vegalite_utils:y[{
:body_mass_g;
:type, "quantitative";
:scale, :zero, boolean_false;
:title, "Body Mass (g)";
}]
def chart = vegalite_utils:color[{
:species;
:type, "nominal";
:legend, boolean_false;
}]

def output = vegalite:plot[chart]
Box Plot with Min/Max Whiskers

Layered Plots

Histogram with a Global Mean Overlay

Original Vega-Lite Example

A histogram with the a line showing data’s mean. The "rule" mark creates a single line spanning the chart.

query
def chart = vegalite_utils:data[penguin]
def chart:layer = :[], 1, {
:mark, "bar";
vegalite_utils:x[{
:body_mass_g;
:bin, boolean_true;
}];
vegalite_utils:y[{ :aggregate, "count" }]
}
def chart:layer = :[], 2, {
:mark, "rule";
vegalite_utils:x[{
:body_mass_g;
:aggregate, "mean";
}];
vegalite_utils:color["red"];
vegalite_utils:size[5];
}

def output = vegalite:plot[chart]
Histogram with a Global Mean Overlay

Multi-View Displays

Trellis Bar Chart

Original Vega-Lite Example

A trellis bar chart showing the gender of penguins by species. The trellis effect is created by setting the :row encoding to the :sex field.

query
vegalite:plot[
vegalite:bar[
:species,
{
:aggregate, "count";
:title, "Population";
},
{
:data, penguin;
:row, :sex;
:color, {
:sex;
:scale, :range, :[], { (1, "#675193"); (2, "#ca8861") }
}
}
]
]
Trellis Bar Chart

Trellis Scatter Plot (wrapped)

Original Vega-Lite Example

A trellis scatter chart showing sound by chord length and frequency. The plots are laid out into two columns using the option within the :facet encoding.

query
vegalite:plot[
vegalite:scatter[
:frequency,
:sound,
{
:data, airfoil;
:facet, {
:chord_length;
:type, "ordinal";
:columns, 2;
}
}
]
]
Trellis Scatter Plot (wrapped)

Horizontally Repeated Charts

Original Vega-Lite Example

Horizontally repeated charts that show the scatter of different parameters of the airfoil dataset vs sound. The number of columns is set to 2. In each plot the x field is set to the "repeat" data, whereas the y is always :sound. No other encoding options are set and the data is included in the top level specification, so the third argument to vegalite:scatter is an empty relation.

query
def chart:repeat = :[], {
1, "angle";
2, "chord_length";
3, "displacement";
4, "frequency";
5, "velocity";
6, "sound";
}
def chart:columns = 2
def chart = vegalite_utils:data[airfoil]
def chart:spec = vegalite:scatter[
{
:field, :repeat, "repeat";
},
:sound,
{}
]

def output = vegalite:plot[chart]
Horizontally Repeated Charts