Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 17, 2020

Created on Jun 17, 2020

This example displays a line chart of miner deaths over time, using a thick semi-transparent stroke that emphasizes the overall trend and peaks. It builds the visualization declaratively with the Vega-Lite API (`vl.markLine`), while D3’s `csv` loads the external dataset from a GitHub gist. The chart is configured via a shared `config` object, and the view is rendered as an SVG with tooltip support from `vega-tooltip`, all initialized through `vl.register`.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of Miners’ Deaths data from a CSV file, with the Year on the x-axis and Deaths on the y-axis, using circular marks and tooltips. The visualization is built with the vega-lite-api library, which wraps Vega-Lite and Vega, and is rendered as an SVG via the d3 v5 loader. The code customizes axis and label styling through a config object, and incorporates vega-tooltip for interactive hover details. The plot automatically fits the window dimensions.

DDjPendej0

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

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

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

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

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

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

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of deaths per episode, colored by season, with tooltips displaying the death count. It uses the Vega-Lite API to construct the chart specification, with data loaded from a CSV file via d3.csv. The visualization renders as SVG and is configured with custom axis styling and tooltip handlers from vega-tooltip.

AAnmol Gupta

81% match