Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 7, 2021

Created on Mar 7, 2021

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.

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

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

92% match

Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render an interactive area chart of weekly temperature data for San Francisco. The visualization shows temperature readings over time, with tooltips displaying the temperature value on hover. The code imports data from a CSV file using d3.csv and then passes it to a Vega-Lite specification that defines the x-axis as timestamps and the y-axis as quantitative temperature values. The chart is configured with custom axis styling and uses vega, vega-lite, and vega-tooltip libraries to handle rendering and interactive tooltips.

SSimmer999

91% match

Loading thumbnail…

Vega-Lite API Template_Temperature

This example visualizes a week of San Francisco temperature readings as a single thick line chart, using data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via a GitHub Gist. The visualization is built entirely with the Vega-Lite API, which programmatically registers Vega and Vega-Lite, and uses d3.csv to fetch the data. The line encodes temperature over time, with tooltips enabled through Vega Tooltip, and the chart is styled by a custom config to remove axis domains and adjust font sizes. The visualization auto-fits to the full browser window dimensions.

OOleg Zhernovoy

90% match

Loading thumbnail…

Line Vega-Lite API Template

This visualization displays daily temperature variations across a week in San Francisco, using an area chart to emphasize the range and trend over time. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and incorporates D3’s `csv` loader to fetch data from a GitHub Gist sourced from the Auto MPG dataset. The chart encodes timestamps on the x-axis and temperature on the y-axis, with a fixed width and height fit to the viewport and a custom config that enlarges axis labels and titles.

Jjyotigpt790

89% match

Loading thumbnail…

Ep18: Vega-Lite API Temperature

This visualization displays daily temperature readings over time as a scatter plot, using color and vertical position to encode temperature values. Built with the Vega-Lite API, it renders data from a CSV file of San Francisco weekly temperatures, fetched via d3.csv. The chart is configured with custom styling for axis labels and titles, and includes interactive tooltips that display nominal temperature labels. The visualization adapts to the full browser window using an SVG renderer, with circles sized and semi-transparent for improved readability.

SStoo Sepp

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

Loading thumbnail…

Vega-Lite API Template

This example renders a line chart of San Francisco’s weekly temperatures using the Vega-Lite API. The visualization maps timestamps to the x-axis and temperature to the y-axis, with a tooltip displaying the temperature value on hover. The code registers Vega and Vega-Lite, pulls data from a CSV via D3’s `csv` function, and customizes axis and label styles through a config object. The chart adapts to the browser window with autosize settings and outputs an SVG.

RReinaFeng

88% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a temperature-over-time visualization using an area mark. It plots weekly temperature readings for San Francisco, with time on the x-axis and temperature on the y-axis. The code builds the chart declaratively using the Vega-Lite API, registering it with Vega and Vega-Lite, and loads the dataset via d3.csv. The chart renders as an SVG, includes tooltips via Vega Tooltip, and applies custom axis and label styling from a shared config.

CCurran Kelleher

88% match