Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

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

A scatterplot of age against number of convictions displays a dense, overlapping point cloud. Built with the Vega-Lite API, it composes the chart declaratively via `vl.markPoint` and `vl.encode`, then renders to SVG through vega and vega-lite. D3’s `csv` loads the dataset from a GitHub gist. A custom config sets dark labels on light-gray axes, with semi-transparent, filled points sized at 900 and tooltips showing age.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

Vega-Lite API Template

A bar chart displays the number of convictions for each age group, sorted in descending order by age. The visualization is built using the Vega-Lite API library, which programmatically constructs the chart specification via `vl.markBar()`, `vl.x()`, and `vl.y()`. Data is loaded asynchronously from a CSV URL using `d3.csv`. The chart renders with Vega-Lite's SVG renderer, and hovering triggers a tooltip via the `vega-tooltip` handler. Appearance is customized through a shared config object that removes axis domains and adjusts tick colors, label sizes, and dark text styling.

Llscholz1
89% 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
84% match
Loading thumbnail…

Vega-Lite API Template

This example presents a bar chart of prisoner convictions, showing the number of convictions for each offense category, sorted in descending order. Using the Vega-Lite API—built on Vega, Vega-Lite, and D3—the visualization renders data loaded via `d3.csv` from a GitHub-hosted CSV file. The chart is automatically sized to fit the browser window and incorporates custom axis, label, and title styling from a separate configuration object, along with a tooltip displaying exact conviction counts.

Llscholz1
83% match
Loading thumbnail…

Vega-Lite API Template

A scatter plot visualizes modern mathematicians, statisticians, computer scientists, engineers, inventors, biologists, and physicists born after 1950 across seven countries, mapping historical prominence index (hpi) and lifespan (l) on the axes. Each point’s color and fill encode occupation, shape indicates birth country, and size reflects non-English page views. The example uses the Vega-Lite API to construct the specification programmatically, with D3’s `csv` loading data from the Pantheon.world dataset, and renders through Vega with tooltip support.

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