Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

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.

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

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

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

82% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot uses the Vega-Lite API to visualize stars from the Auto MPG dataset, plotting their distance from the sun against their magnitude. Each star is represented by a circular mark, with color encoding the star type and size reflecting its stellar class. The visualization loads data via `d3.csv`, configures axis styles and tooltips through the `vega-lite-api` and `vega-tooltip` Handler, and renders dynamically to the full browser window using `vl.markCircle().encode()`.

MMarta

80% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

80% match

Loading thumbnail…

Vega-Lite API Template II

This interactive scatter plot visualizes the Auto MPG dataset, showing the relationship between Mitoses and Bland Chromatin, with points colored by Class and tooltips displaying the class label. Built with the Vega-Lite API, it registers Vega and Vega-Lite through `vl.register()`, loads CSV data via d3’s `csv` function, and applies custom axis and label styling from a config object. The visualization dynamically sizes to the window and uses SVG rendering with a Vega Tooltip handler for interactivity.

OOleJRask

80% match