Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
Mmshoer
Last edited Apr 26, 2020
Created on Apr 26, 2020

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.

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
91% match
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
90% 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
84% match
Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2
83% 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
83% 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 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
83% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to visualize page visits over time, plotting each visit as a small black circle with timestamps on the x-axis and page names on the y-axis. The chart is rendered as an SVG via the View API, with data loaded asynchronously from a CSV file using d3.csv. The API is registered with vega and vega-lite, and a custom config adjusts axis and label styling for readability.

Ppalti
82% match