Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

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

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

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.

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
88% 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
86% 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
84% match
Loading thumbnail…

Vega light API demo

This example demonstrates a scatter plot where each circle represents a data point, with its position mapped to the `jan` and `year_val` fields and color encoding the `districtid` category. The Vega Lite API, using `vl.markCircle` and `vl.encode`, builds the visualization declaratively from CSV data fetched via `d3.csv`. Rendered as an SVG through the Vega rendering engine, the plot includes tooltips for `state`, `districtid`, `year_val`, and `jan` values, and employs a custom configuration for styled axes and labels.

Aarunkumarv1530@gmail.com
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
84% 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
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
83% match