Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published1🌍 Public
AAtharvap2000
Last edited May 29, 2021
Created on May 27, 2021
Forked from HTML Starter

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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
85% 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
85% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher
84% match
Loading thumbnail…

Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing engine displacement, horsepower, model year, and weight. Each circle represents a car, with position encoding displacement and horsepower, color encoding year, and size encoding weight. The code registers Vega, Vega-Lite, and the Vega-Lite API with tooltip support, loads data via `d3.csv`, and applies a custom config for axis and font styling. It demonstrates using `vl.markCircle`, `.encode`, and chaining methods to build an interactive chart programmatically.

AAmit Wadhwa
84% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data, showing the relationship between engine displacement and horsepower with color-encoded cylinders and tooltips for car names. It fetches data from a CSV file via d3.csv, then builds the visualization using the vl API's markCircle and encode methods, configuring axes, styles, and layout through a custom config object. The view is rendered as SVG and fitted to the window size, with Vega and Vega-Lite registered in the API.

MMauricio García Benítez
84% 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
84% match
Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of automobile data using the Vega-Lite API, with each circle representing a car model positioned by its country of origin and horsepower. The visualization shows overlapping points with low opacity to reveal density patterns. It loads data from a CSV file using d3.csv, constructs the mark and encoding specifications through vl.markCircle and vl.encode, then renders the final SVG using Vega charting libraries bundled with Vega-Tooltip. The code demonstrates a workflow that builds a Vega-Lite specification programmatically rather than writing JSON directly, minimizing boilerplate while retaining full expressiveness.

CCurran Kelleher
84% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, mapping engine displacement to horsepower and coloring points by model year. The visualization is built programmatically by registering Vega-Lite with the `vl` API, fetching data via `d3.csv`, and applying custom axis and label styling from a config object. The chart is rendered as an SVG, with tooltips enabled through Vega Tooltip to display car names on hover.

CCurran Kelleher
83% match