Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

This example visualizes meteorite landing data, plotting mass against year for incidents after 1920 with mass under 40,000 grams. Circles are colored by fall type and include tooltips revealing the meteorite name. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries and wraps D3’s CSV loader to fetch data from a GitHub-hosted CSV file. A custom configuration improves readability, and the chart auto-fits its container’s dimensions, rendering as SVG with a Vega tooltip handler.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example displays meteorite landing data as a scatter plot, mapping year on the x-axis and mass on the y-axis, with circle size encoding meteorite classification and tooltips revealing names. Built with the Vega-Lite API, it filters out masses below 40,000 using a transform from config.js. The visualization loads CSV data via d3.csv, renders with Vega and Vega-Lite, and uses vega-tooltip for interactive hover details.

Jjulia-richards

94% match

Loading thumbnail…

Vega-Lite API Template

This example plots meteorite landings by longitude and latitude, with point size encoding mass and color encoding the year of impact. It uses the Vega-Lite API wrapper (`vl.markCircle`, `.encode`, and field specifications) to declaratively build the chart, which is then rendered to SVG. Data is loaded via D3’s `csv` function from a gist URL, and a custom config adjusts axis colors and font sizes. The chart auto-fits the window and includes a tooltip handler from vega-tooltip.

Mmshoer

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

80% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

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

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

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

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot visualizes terrorist reports from April 2003, encoded by date and threat level, with points colored by agency (CIA) and tooltips revealing detailed notes. The visualization is built using the Vega-Lite API, with `vl.markCircle` for marks and `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` encodings. Data is loaded from a CSV file via `d3.csv`, and interactive tooltips are provided through vega-tooltip. The chart resizes to the window and uses a custom dark theme defined in `config.js`.

BBrian Olczak

78% match