Vega-Lite API

100%

✓ Published0🌍 Public

Last edited Nov 1, 2023

Created on Nov 1, 2023

This example demonstrates how the Vega-Lite API can be used to create an interactive line chart showing the price of electricity over time. The visualization plots a single series of Price values against a Date axis, with a tooltip that displays the exact price on hover. The code imports data from a CSV file hosted on GitHub, likely derived from the UCI Auto MPG dataset, and renders the chart using Vega-Lite’s `markLine` encoding. The implementation leverages the `vega-lite-api` library, registered with Vega and Vega-Lite, along with D3’s `csv` loader and the Vega Tooltip handler for interactive feedback.

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 Example

This example demonstrates a line chart visualizing numerical values over time, with data sourced from an Auto MPG dataset and individual time-stamped observations. The visualization is constructed programmatically using the `vega-lite-api`, which provides a fluent JavaScript interface for defining Vega-Lite specifications. After fetching data using the `json` function from `d3`, the chart is rendered as an SVG through the `vega` and `vega-lite` libraries, with a custom tooltip handler integrated for interactive exploration. The chart is configured to fit the window size, and styling is adjusted for readability.

DDaniel Lauzon

85% match

Loading thumbnail…

Vega-Lite API Template

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.

FFrederick O'Brien

84% 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

83% match

Loading thumbnail…

Vega-Lite API Line Chart Template

This example demonstrates a line chart of temperature over time, using data from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders as an SVG. The chart encodes time on the x-axis and temperature on the y-axis, with tooltips enabled for data inspection. D3 is used to load the CSV data, and the configuration customizes axis styling and label fonts for readability.

JJohn Kobbeman

83% match

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

82% 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

82% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824

81% match

Loading thumbnail…

Vega-lite - template

This example uses Vega-Lite to render an area chart with yearly time on the x-axis and a non-zero-based quantitative total on the y-axis, with tooltips showing temperature values. The visualization is built programmatically using the `vega-lite-api` library, which registers Vega and Vega-Lite to produce an SVG. Data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart fills the window and applies custom axis and label styling from a config object, with tooltips provided by the `vega-tooltip` Handler.

HHgeginat

81% match