Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 21, 2021

Created on Apr 21, 2021

This example visualizes weekly temperature readings for multiple locations, plotting each measurement as a point in a scatterplot with time on the x-axis and temperature on the y-axis. Hovering over a point reveals the location name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to produce an SVG rendering. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is configured to fit the full browser window with custom axis styling.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature data as a scatter plot, with each point representing a measurement over time. The visualization uses the Vega-Lite API to define the chart declaratively, with `vl.markCircle` and `vl.x().fieldT('timestamp')` mapping time to the x-axis and temperature to the y-axis. Tooltips display the name of each data point via `vl.tooltip().fieldN('name')`. The data comes from a CSV file loaded with `d3.csv` from a GitHub Gist, and the chart is rendered using Vega, Vega-Lite, and the Vega-Lite API, with custom styling applied through a config object.

Kkan qiu

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a line chart of weekly temperature readings from San Francisco, using Vega-Lite’s declarative API. The chart encodes time on the x-axis and temperature on the y-axis, with a tooltip revealing the precise temperature value per point. The visualization is built with the `vega-lite-api` library, which registers Vega and Vega-Lite, and loads data via `d3.csv`. It renders interactively to an SVG, sized to the window, with custom axis and label styling from a configuration object.

Jj-PGi

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a line chart of weekly temperature data for San Francisco, using the Vega-Lite API to construct the visualization declaratively. The chart renders temperature values over time with a tooltip on hover, styled with custom axis configuration. It loads CSV data via d3.csv, registers Vega and Vega-Lite with the vega-lite-api library, and renders the final output as an SVG using vega-tooltip for interactivity. The visualization fills the entire browser window and adapts to its size.

CChristian Potdevin

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

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example streams weekly San Francisco temperature data from a CSV file into a Vega-Lite line chart, rendered as an SVG via the vega-lite-api and vega-tooltip libraries. The visualization uses `vl.markLine` with a time-encoded x-axis and quantitative y-axis, while `vl.x().fieldT()` and `vl.y().fieldQ()` define the encodings. Configuration in `config.js` removes axis domains, sets custom label fonts, and applies a dark color scheme. The code loads data with `d3.csv` and fits the chart to the full window size.

JJoakim Warholm

87% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

A line chart displays temperature readings over time, with a tooltip that reveals the exact temperature on hover. The visualization is built using the Vega-Lite API, which translates a concise specification into a rendered Vega graphic. Data is loaded from a CSV file of San Francisco weekly temperatures via the `d3.csv` method. The chart's appearance, including axis styling and label fonts, is customized through a configuration object, and the visualization resizes to fit the browser window.

Nnkarinti

87% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template - Temperatures

This example visualizes weekly San Francisco temperature data as a line chart built with the Vega-Lite API in a D3.js environment. It shows temperature fluctuations over time, with tooltips displaying specific values. The code imports and configures vega, vega-lite, vega-lite-api, and vega-tooltip, using d3.csv to load the data from a GitHub Gist. The chart is rendered as a full-window SVG, with axes and labels customized through hand-defined configuration objects to improve readability.

Kkatebacon32

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays temperature trends over time as a line chart, with points sized and colored by temperature values. The example is built using the Vega-Lite API, which generates a Vega-Lite specification that is rendered as an SVG via the Vega rendering engine. The data is loaded as CSV from a Gist using D3’s `csv` function, and interactive tooltips are enabled through the Vega-Tooltip handler. Appearance is customized through a configuration object that adjusts axis styles and typography.

Ddimanya

86% match