Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 8, 2021

Created on Nov 8, 2021

This example uses the Vega-Lite API to render a temperature time series as a line chart over the full viewport. The visualization displays temperature readings across timestamps, with tooltips showing individual values on hover. The code loads CSV data from an external URL via the `d3.csv` method, then constructs the chart using `vl.markLine` and `vl.encode` functions from the `vega-lite-api` library. Appearance is customized through a configuration object that adjusts axis labels and title styles.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example shows a line chart of temperature readings over time, rendered as a single thick stroke. The visualization uses the Vega-Lite API to specify the mark type and encodings, including the x-axis as a temporal field and the y-axis as a quantitative field with a non-zero scale. Data is fetched from a CSV file containing weekly San Francisco temperature measurements using d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip to enable interactive tooltips, and applies custom axis styling from a configuration object.

AAnkit5ingh

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using the Vega-Lite API, rendering a line chart from CSV data. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with tooltips displaying temperature details. It uses the `vega-lite-api` library alongside `d3.csv` for data loading, with a custom dark theme applied through a configuration file. The chart fills the browser window and updates dynamically, leveraging Vega’s rendering capabilities with SVG output.

MMark Mburu

90% match

Loading thumbnail…

Vega-Lite API Template - linechart

This line chart visualizes daily temperature trends using the Vega-Lite API, which programmatically defines a line mark with encoded temporal x-values and quantitative y-values. Data is loaded asynchronously via D3’s `csv` parser from a San Francisco temperature dataset. The example demonstrates a minimal Vega-Lite specification, with tooltips enabled through vega-tooltip and custom axis styling in a separate config file. It integrates Vega, Vega-Lite, and the Vega-Lite API libraries, rendering to SVG and fitting the full browser window.

Llaplantalaplanta

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a time series of temperature readings as a single line across the full screen, with tooltips displaying the temperature values on hover. It is built with the Vega-Lite API, which registers Vega and Vega-Lite to generate the chart, and uses D3’s `csv` loader to fetch data from a remote CSV file. The visualization is rendered as SVG, and its appearance—including axis fonts and colors—is customized via a `config` object.

MMartin Straußberger

90% match

Loading thumbnail…

Fork of Vega-Lite API

This example shows a line chart of temperature over time, styled for a clean, dark-on-light appearance with large axis labels and a tooltip that displays temperature values. The visualization is built entirely through the Vega-Lite API, using `vl.markLine`, `vl.x().fieldT()`, and `vl.y().fieldQ()` to encode the data, which is loaded from a CSV file via D3’s `csv` function. It registers Vega, Vega-Lite, and the Vega-Tooltip handler, then renders an SVG with automatic resizing to fit the window.

MMichael Bergerson

90% match

Loading thumbnail…

Vega-Lite API Temp Template

This example visualizes temperature trends over time using a filled area chart. The visualization is built with the vega-lite-api library, which wraps the Vega-Lite grammar for programmatic chart specification, and renders through Vega with SVG output. Data is loaded asynchronously from a CSV file using d3.csv, showing temperature values on the y-axis and timestamps on the x-axis. The chart includes tooltips for individual data points, custom axis styling from a configuration object, and adapts to fit the browser window dimensions.

JJoe Hutchins

90% match

Loading thumbnail…

Vega-Lite Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Bbakstorage00001

89% match

Loading thumbnail…

Vega Lite API

This example visualizes temperature fluctuations over time using a Vega-Lite area chart, with data sourced from a CSV of weekly San Francisco temperatures. The visualization loads data via D3’s `csv` method and constructs the chart programmatically using the `vega-lite-api` library, registering it with Vega and Vega-Lite. The chart encodes time on the x-axis and quantitative temperature values on the y-axis, with a tooltip displaying the temperature. Custom styling through a `config` object adjusts axis labels, titles, and colors, while the rendering is handled as an SVG via Vega’s view renderer.

Llefat92

89% match