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 Data Visualization (Vega-Lite). It provides more examples of visualizations built using Rel and Vega-Lite (opens in a new tab). The examples here are adapted from a subset of the examples Vega-Lite provides (opens in a new tab).
Data Sources
The following examples use the penguin dataset (opens in a new tab) and the airfoil dataset (opens in a new tab), both from RelationalAI’s public Azure bucket.
Penguin Dataset
// write query
// Specify the data location.
def config:path = "azure://raidocs.blob.core.windows.net/datasets/penguins/penguins_size.csv"
// Specify the 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 data into the database.
def insert:penguin = penguins_cleanAirfoil Dataset
// write query
def config:path = "azure://raidocs.blob.core.windows.net/datasets/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 data into the database.
def insert:airfoil = load_csv[config]Bar Charts
Aggregate Bar Chart (Sorted)
Original Vega-Lite Example (opens in a new tab)
This is a bar chart that sorts the y-values by the x-values. This example uses 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):
// read query
::std::display::vegalite::plot[
::std::display::vegalite::bar[
{
:body_mass_g;
:type, "quantitative";
:aggregate, "mean";
:title, "Body Mass (g)";
},
{
:species;
:type, "ordinal";
:sort, "-x";
},
{
:data, penguin;
}
]
]Grouped Bar Chart
Original Vega-Lite Example (opens in a new tab)
This is 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 are grouped by sex by adding the color specification:
// read query
def chart = ::std::display::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 = ::std::display::vegalite::plot[chart]Stacked Bar Chart With Rounded Corners
Original Vega-Lite Example (opens in a new tab)
This is a stacked bar chart that has rounded bar corners. Specifying the bar mark’s :cornerRadiusTopLeft and :cornerRadiusTopRight creates the rounded bars:
// read query
def chart = ::std::display::vegalite::bar[
:island,
{ :aggregate, "count" },
{
:data, penguin;
:color, :sex;
}
]
def chart:mark = {(:cornerRadiusTopLeft, 3); (:cornerRadiusTopRight, 3)}
def output = ::std::display::vegalite::plot[chart]Gantt Chart (Ranged Bar Marks)
Original Vega-Lite Example (opens in a new tab)
This is a simple bar chart with ranged data, otherwise known as a Gantt Chart. Specifying the start (x specification) and end (x2 specification) for each bar creates the staggered rectangles:
// read query
def config:data = """
task,start,end
"A",1,3
"B",3,8
"C",8,10
"""
def data = load_csv[config]
def output = ::std::display::vegalite::plot[
::std::display::vegalite::bar[
{
:start;
:type, "quantitative";
},
{
:task;
:type, "ordinal";
},
{
:data, data;
:x2, :end;
}
]
]Diverging Stacked Bar Chart (Population Pyramid)
Original Vega-Lite Example (opens in a new tab)
This example shows a population pyramid for penguins, created using stack. See concat population pyramid (opens in a new tab) for a variant of this created using concat. Rel calculates the count of penguins by island and sex. Note the count of male penguins is negative, causing the diverging bars in the chart:
// read 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 = ::std::display::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 = ::std::display::vegalite::plot[chart]Histograms, Density Plots, and Dot Plots
Histogram
Original Vega-Lite Example (opens in a new tab)
This is a basic histogram. Vega-Lite creates the bins with reasonable defaults by setting :bin to boolean_true. See the bin documentation (opens in a new tab) for details on how this can be further customized.
// read query
::std::display::vegalite::plot[
::std::display::vegalite::bar[
{
:body_mass_g;
:bin, boolean_true;
},
{ :aggregate, "count" },
{ :data, penguin }
]
]Density Plot
Original Vega-Lite Example (opens in a new tab)
This is a continuous density plot. The "area" mark creates the continuous fill, and the density transform (opens in a new tab) calculates the :value and :density fields used in the x and y specifications:
// read 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 = ::std::display::vegalite::plot[chart]2D Histogram Scatter Plot
Original Vega-Lite Example (opens in a new tab)
This is a 2D histogram with each pair of bins sized by count of records. The columns represent the penguins’ sex, which is also encoded by color:
// read 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 = ::std::display::vegalite::plot[chart]2D Histogram Heatmap
Original Vega-Lite Example (opens in a new tab)
This is a 2D histogram with each pair of bins colored by count of records:
// read 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 = ::std::display::vegalite::plot[chart]Isotype Dot Plot
Original Vega-Lite Example (opens in a new tab)
This is used to 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.
Rel assigns 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 (opens in a new tab) is very useful for resizing and orienting the path.
// read 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 = ::std::display::vegalite::plot[chart]Scatter and Strip Plots
Strip Plot
Original Vega-Lite Example (opens in a new tab)
This 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:
// read 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 = ::std::display::vegalite::plot[chart]Colored Scatter Plot
Original Vega-Lite Example (opens in a new tab)
This is a scatterplot showing body mass and flipper lengths of penguins. The color and the shape of each point encodes the penguins’ species:
// read query
::std::display::vegalite::plot[
::std::display::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")
}
}
]
]Scatter Plot With Text Marks
Original Vega-Lite Example (opens in a new tab)
This is a scatter plot with the penguin species’ initial as the points. The color also encodes the species:
// read 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 = ::std::display::vegalite::plot[chart]Bubble Plot
Original Vega-Lite Example (opens in a new tab)
This is a bubble plot showing frequency on x, chord length on y, and sound by size:
// read query
::std::display::vegalite::plot[
::std::display::vegalite::scatter[
:frequency,
:chord_length,
{
:data, airfoil;
:size, {
:sound;
:type, "quantitative";
:scale, :zero, boolean_false;
};
}
]
]Line Charts
Line Chart with Stroked Point Markers
Original Vega-Lite Example (opens in a new tab)
This is 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.
Here is the code to generate this example:
// read query
def chart = ::std::display::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 = ::std::display::vegalite::plot[chart]Repeat and Layer to Show Different Measures
Original Vega-Lite Example (opens in a new tab)
This example plots multiple lines on one chart using layers. The fields to plot are defined in the :repeat:layer definition, and then referenced in the y and color specifications:
// read query
def chart = vegalite_utils:data[airfoil]
def chart:repeat:layer = :[], { (1, "sound"); (2, "velocity") }
def chart:spec = ::std::display::vegalite::line[
:frequency,
{
:aggregate, "mean";
:field, :repeat, "layer";
},
{
:color, {
:datum, :repeat, "layer";
:type, "nominal";
}
}
]
def output = ::std::display::vegalite::plot[chart]Line Chart With Varying Size (Using the Trail Mark)
Original Vega-Lite Example (opens in a new tab)
This example sets 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:
// read 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 = ::std::display::vegalite::plot[chart]Line Chart With Varying Stroke Dash
Original Vega-Lite Example (opens in a new tab)
This is a line chart using the stroke dash to differentiate chord length:
// read query
::std::display::vegalite::plot[
::std::display::vegalite::line[
:frequency,
{
:sound;
:aggregate, "mean";
:scale, :zero, boolean_false;
},
{
:data, airfoil;
:strokeDash, {
(:chord_length);
(:type, "nominal")
}
}
]
]Area Charts and Stream Graphs
Area Chart With Overlaying Lines and Point Markers
Original Vega-Lite Example (opens in a new tab)
This is an area chart with a line and point markers:
// read 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 = ::std::display::vegalite::plot[chart]Table-Based Plots
Layering Text Over a Heatmap
Original Vega-Lite Example (opens in a new tab)
This is 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:
// read 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 = ::std::display::vegalite::plot[chart]Circular Plots
Radial Plot
Original Vega-Lite Example (opens in a new tab)
This is 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:
// read 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 = ::std::display::vegalite::plot[chart]Advanced Calculations
Layering Averages Over Raw Values
Original Vega-Lite Example (opens in a new tab)
This is a plot showing average data with raw values in the background.
An empty relation is passed as the third element to vegalite:line as this layer specification requires no data, included in the top level specification, and no additional encoding or other options:
// read query
def chart = vegalite_utils:data[airfoil]
def chart:layer = :[], 1, {
::std::display::vegalite::scatter[
:chord_length,
:sound,
{
:opacity, 0.1
}
]
}
def chart:layer = :[], 2, {
::std::display::vegalite::line[
:chord_length,
{
:sound;
:aggregate, "mean"
},
{}
]
}
def output = ::std::display::vegalite::plot[chart]Composite Marks
Error Bars Showing Standard Deviation
Original Vega-Lite Example (opens in a new tab)
This is a 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:
// read 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 = ::std::display::vegalite::plot[chart]Line Chart With Confidence Interval Band
Original Vega-Lite Example (opens in a new tab)
This is a plot showing average data with a confidence interval band. The confidence interval is calculated by Vega-Lite and added as an additional layer:
// read 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 = ::std::display::vegalite::plot[chart]Box Plot With Min/Max Whiskers
Original Vega-Lite Example (opens in a new tab)
This is a vertical box plot showing the 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:
// read 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 = ::std::display::vegalite::plot[chart]Layered Plots
Histogram With a Global Mean Overlay
Original Vega-Lite Example (opens in a new tab)
This is a histogram with the a line showing data’s mean.
The "rule" mark creates a single line spanning the chart:
// read 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 = ::std::display::vegalite::plot[chart]Multi-View Displays
Trellis Bar Chart
Original Vega-Lite Example (opens in a new tab)
This is 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:
// read query
::std::display::vegalite::plot[
::std::display::vegalite::bar[
:species,
{
(:aggregate, "count");
(:title, "Population")
},
{
(:data, penguin);
(:row, :sex);
(:color, :sex)
}
]
]Trellis Scatter Plot (Wrapped)
Original Vega-Lite Example (opens in a new tab)
This is a trellis scatter chart showing sound by chord length and frequency.
The plots are laid out in two columns using the option within the :facet encoding:
// read query
::std::display::vegalite::plot[
::std::display::vegalite::scatter[
:frequency,
:sound,
{
:data, airfoil;
:facet, {
(:chord_length);
(:type, "ordinal");
(:columns, 2)
}
}
]
]Horizontally Repeated Charts
Original Vega-Lite Example (opens in a new tab)
These are horizontally repeated charts that show the scatter of different parameters of the airfoil dataset versus 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 are included in the top level specification, so the third element to vegalite:scatter is an empty relation.
Here is the code to generate this example:
// read 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 = ::std::display::vegalite::scatter[
{
:field, :repeat, "repeat";
},
:sound,
{}
]
def output = ::std::display::vegalite::plot[chart]