[Vega-Lite] SPLOM Assignment Solution

100%

[Vega-Lite] SPLOM Assignment Solution

✓ Published3🌍 Public

Last edited Mar 16, 2022

Created on Mar 16, 2022

This example presents a scatterplot matrix (SPLOM) of four quantitative measurements from the Palmer Penguins dataset, with points colored by species. A global interval selection brush, defined via a Vega-Lite `params` declaration, links all subplots, so brushing any one cell highlights the corresponding points across every panel by enlarging and brightening them. The visualization is built with Vega-Lite 5, embedded through vega-embed, using a repeated specification (`repeat`) to generate the 4×4 grid of small 140×140-pixel charts.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of [Vega-Lite] SPLOM Assignment Solution

This example shows a scatterplot matrix (SPLOM) of four penguin measurements (culmen length, culmen depth, flipper length, and body mass) from the Palmer Penguins dataset, with points colored by species. A global interval selection parameter named `brush` links all subplots, so brushing any chart enlarges and increases opacity of the selected points across every panel while unselected points shrink and fade. The visualization is built with Vega-Lite 5, using the `repeat` operator to generate 4x4 facets, and is embedded in the page via `vegaEmbed`, with the specification loaded from a separate `splom.vl.json` file.

Iimjiyn

92% match

Loading thumbnail…

Fork of HTML starter_Penguin

This visualization presents a scatterplot matrix of Palmer Penguins measurements, comparing culmen length, culmen depth, flipper length, and body mass across species. Each cell plots one measurement against another, with points colored by species using a category10 color scheme. The visualization uses Vega-Lite’s repeat operator to generate the 4×4 grid of small multiples, with each plot featuring quantitative scales without zero baselines. The code loads the penguin dataset from a GitHub gist and renders the chart via Vega-Embed, which parses the Vega-Lite specification and draws the visualization using the Vega rendering engine.

Iimjiyn

72% match

Loading thumbnail…

SPLOM

This example displays a scatter plot matrix (SPLOM) of the Iris Dataset, showing pairwise relationships among the four quantitative attributes: sepal length, sepal width, petal length, and petal width. Each cell in the grid contains a small scatter plot, with axes scaled independently per row and column. The visualization uses D3 v6, employing `d3.csv` for data loading, `d3.scaleLinear` for axis scales, and `d3.scaleBand` to arrange the grid of plots. Data points are rendered as SVG circles via a reusable `scatterPlot` function.

CCurran Kelleher

72% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot visualizes modern mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists born after 1950 across seven countries, mapping historical prominence index (hpi) and lifespan (l) on the axes. Each point’s color and fill encode occupation, shape indicates birth country, and size reflects non-English page views. The example uses the Vega-Lite API to construct the specification programmatically, with D3’s `csv` loading data from the Pantheon.world dataset, and renders through Vega with tooltip support.

Ssriramvsharma

72% match

Loading thumbnail…

[Vega-Lite] 3.1 HTML setup

This example demonstrates a scatter plot of penguin culmen length versus culmen depth, rendered as circular marks using concrete measurements from the Palmer Penguins dataset. The page loads Vega-Lite 5 and Vega-Embed 6 from a CDN in a minimal HTML document, then calls `vegaEmbed('#vis', spec)` to parse the external `line.json` specification and inject the chart into a div. The Vega-Lite spec defines quantitative x- and y-encodings with a fixed width of 360 pixels, relying on Vega’s rendering pipeline to produce the visualization.

Lliesbetdevos

71% match

Loading thumbnail…

Vega-Lite API Template 5

This example presents two scatter plots of the Auto MPG dataset, visualizing relationships between different cellular attributes. The main chart maps Mitosis against Bland Chromatin, while a smaller navigation chart shows Bare Nuclei versus Uniformity of Cell Shape, both colored by class. The visualization uses the vega-lite-api to construct the plots, d3 to load the CSV data, and vega-tooltip for interactive tooltips. The plots are rendered using Vega's SVG renderer with a custom configuration for improved readability.

OOleJRask

71% match

Loading thumbnail…

Vega-Lite API Template II

This interactive scatter plot visualizes the Auto MPG dataset, showing the relationship between Mitoses and Bland Chromatin, with points colored by Class and tooltips displaying the class label. Built with the Vega-Lite API, it registers Vega and Vega-Lite through `vl.register()`, loads CSV data via d3’s `csv` function, and applies custom axis and label styling from a config object. The visualization dynamically sizes to the window and uses SVG rendering with a Vega Tooltip handler for interactivity.

OOleJRask

70% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2

70% match