Diego Rojo

@93degree·8 public vizzes

[Vega-Lite] SPLOM Assignment Solution

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.

Mar 16, 2022

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

A line chart shows the daily closing price of the S&P 500 index over time, with time on the x-axis and price on the y-axis. The visualization is built using Vega-Lite’s declarative specification, rendered with vega-embed, which loads and parses the JSON spec referencing a remote CSV of historical price data. The chart uses the “line” mark with temporal and quantitative encodings, and is sized at a fixed width of 360 pixels.

Mar 16, 2022

Loading thumbnail…

[Vega-Lite] 3.3 Area Chart

This area chart displays the daily closing price of the S&P 500 index over time, using a filled region beneath a line to emphasize the magnitude of price changes. The visualization is built with Vega-Lite, specifying an area mark in a JSON specification loaded by `vegaEmbed` from `area.vl.json`. The data is fetched from a remote CSV file containing `date` and `price` fields, mapped to the temporal x-axis and quantitative y-axis, respectively. The chart is rendered inside an HTML page using the vega and vega-lite JavaScript libraries.

Mar 16, 2022

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart all in HTML

This example displays a simple line chart of S&P 500 stock prices over time, using a temporal x-axis and a quantitative y-axis. The visualization loads CSV data from a GitHub gist and renders the line mark directly in the browser. It is built entirely within a single HTML file using the Vega-Lite specification, then embedded into a `<div>` via the `vegaEmbed` function, with Vega and Vega-Lite loaded from a CDN.

Mar 16, 2022

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart with .csv

This example shows a line chart of monthly S&P 500 prices from 2000 to 2010, with date on the x-axis and price on the y-axis. The visualization loads a CSV file, `sp500.csv`, and renders it using Vega-Lite’s `mark` type. The chart is embedded in an HTML page via `vegaEmbed`, which uses the `vega` and `vega-lite` libraries to parse the specification in `line.vl.json`. The encoding maps the temporal `date` field and quantitative `price` field to the axes, producing a simple trend line.

Mar 16, 2022

Loading thumbnail…

[Vega-Lite] 3.5 Selection

This example uses Vega-Lite and Vega-Embed to create a linked selection between two area charts of S&P 500 price data. The main chart displays price over time, while a smaller overview chart below it allows interval selection along the x-axis via the `"select": {"type": "interval", "encodings": ["x"]}` parameter. The selected brush range updates the main chart’s temporal scale domain through the `"scale": {"domain": {"param": "brush"}}` binding. The data is loaded from a remote CSV file, and both charts share the same date and price fields.

Mar 15, 2022

Loading thumbnail…

[Vega-Lite] 3.4 Composition

This example shows the S&P 500 index price over time as two stacked area charts, one above the other. The upper chart displays the full temporal range with a standard height, while the lower chart repeats the same data at a reduced height of 60 pixels. Both charts use the Vega-Lite specification language within a single `vconcat` composition, referencing the sp500.csv dataset. The visualization is rendered in the browser using the Vega-Embed API, which loads the vega-lite v5 schema and executes the chart definitions.

Mar 15, 2022

Loading thumbnail…

[Vega-Lite] 3.1 HTML setup

This example demonstrates a minimal HTML setup for embedding a Vega-Lite visualization in a web page. It loads the Vega, Vega-Lite, and Vega-Embed JavaScript libraries from a CDN and creates a single empty div element with the ID “vis”. The code does not include any chart specification or data, so it only provides the foundational structure and script tags required to render a chart later. The Vega-Embed library would populate the div with a visualization once a specification is supplied.

Mar 15, 2022