Vega-Lite API Template w/ API Fetch

100%

Vega-Lite API Template w/ API Fetch

✓ Published0🌍 Public

Last edited Mar 1, 2021

Created on Feb 28, 2021

This example demonstrates a scatterplot of temperature readings for various cities, using the Vega-Lite API to construct the visualization. The chart encodes temperature as the y-axis and city as the x-axis, with a tooltip displaying the state for each point. The code fetches CSV data from a remote URL using `d3.csv`, then builds the visualization with `vega-lite-api`, rendering it as an SVG via the `vega` and `vega-lite` libraries. Styling is customized through a config object, and the chart fills the browser window with an autosize fit.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

A scatterplot displays daily temperature readings over time from a CSV dataset of San Francisco weather. The visualization is built using the Vega-Lite API, which constructs declarative specifications programmatically, then renders them through the Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously via D3's `csv` function, while the `vega-tooltip` handler provides interactive hover details for each circle mark.

CCurran Kelleher

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

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

86% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh

85% match

Loading thumbnail…

Vega-Lite API Template

This example pairs a heatmap with Vega-Lite’s declarative API to visualize daily temperature readings. The chart plots date fields on both axes, using semi-transparent pink points to reveal density patterns, with tooltips showing the raw Temperature value. The visualization is built with `vega-lite-api`, registered alongside `vega` and `vega-lite`, and loads CSV data via d3’s `csv` function. Custom config adjusts axis labels and tick colors for readability, while the canvas is sized to fit the full viewport.

Aalicenie

85% match

Loading thumbnail…

Vega-Lite API Template

This interactive visualization uses the Vega-Lite API to render a scatter plot of weekly temperature readings from San Francisco. The visualization maps timestamp to the x-axis and temperature to the y-axis, with color encoding timestamps and tooltips showing temperature values. Built with d3.csv for data loading, it employs vega-lite-api’s vl object to construct circle marks with configurable styling, drawing directly to an SVG canvas sized to the window. The underlying data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Ssinghjy

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

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

85% match