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 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.

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 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`.

DDjPendej0

88% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes earthquake data using a scatter plot, where the magnitude, depth, horizontal distance, year, and country of each earthquake are encoded through position, color, size, and tooltips. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite to render an SVG output. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart is configured with custom axis and label styling for improved readability. The code also integrates vega-tooltip for interactive hover details.

VVarun Eranki

83% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of Milan metro suicide data, mapping years on the x-axis and metro lines on the y-axis with points colored by category. It uses the Vega-Lite API (vl) to declaratively define the visualization, with D3’s `csv` loading data from a Gist URL. The code registers Vega, Vega-Lite, and the vega-tooltip handler, then renders the chart as an SVG, sizing it to fit the window with custom axis and label styling from a shared config.

Ttatpiras

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

82% match

Loading thumbnail…

Vega-Lite API Template

This example showcases a scatter plot of automobile data, with each point representing a vehicle’s year and horsepower. It uses the Vega-Lite API to declaratively define the visualization, registering with Vega, Vega-Lite, and d3.csv for data loading. The plot is configured with custom axis styling and tooltips, rendered as an SVG that fills the window, and includes a semi-transparent point mark for overlapping data.

CCurran Kelleher

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

Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of individual-level data, plotting age against the number of convictions, using the Vega-Lite API. The visualization is built with the `vega-lite-api` library, which wraps Vega-Lite specifications in JavaScript, and relies on D3’s `csv` loader to fetch data from a GitHub gist. Circle marks are configured with size and opacity, and scales disable zero baselines for both axes. The chart’s appearance is customized through a config object, and the final SVG output is generated with Vega.

Llscholz1

81% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatterplot of ODI player statistics, plotting matches played against runs scored, with point size encoding centuries and tooltips revealing player names. Built with the Vega-Lite API, it uses the `vl.markCircle` and `vl.encode` methods to define the visualization, while D3’s `csv` function loads the dataset from a GitHub gist. The chart fills the entire viewport, applies a custom configuration for axes and fonts, and renders via Vega’s SVG renderer with an interactive tooltip handler.

AAtharvap2000

81% match