Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

90% match

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

89% match

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

88% match

Loading thumbnail…

Vega-Lite API Template

A single bar chart displays the estimated incidence of cancer cases per year, using orange bars along quantitative and temporal axes. The visualization is built with the Vega-Lite API, which programmatically composes a bar mark and encodings in `viz.js`, while `index.js` registers Vega, Vega-Lite, and Vega-Tooltip, renders the chart to SVG, and sizes it to fit the viewport. Data is loaded asynchronously from a CSV file containing cancer statistics using d3.csv, and a custom configuration in `config.js` adjusts axis and label styling.

Yyastika

84% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between country and year using a bar chart, where each bar’s length encodes the year value, sorted in descending order. It processes data from a TSV file, calculating a burglary-per-capita metric and filtering out low values before rendering. The visualization is built with the Vega-Lite API, using `vl.markBar` and `vl.y().fieldQ` for encoding, while D3’s `tsv` loader fetches the dataset. A custom configuration adjusts axis fonts and colors for readability.

DdaojunL

83% match

Loading thumbnail…

Vega-Lite API Template I

This example shows a bar chart of population by country, with bars colored by religion and tooltips displaying population values on hover. Using the Vega-Lite API, it constructs a specification via `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings, then renders it through `vl.register` with Vega 5 and Vega-Lite 4. The data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV. Appearance is customized through a shared configuration object that adjusts axis and label styling.

FFloorNummer

83% match

Loading thumbnail…

Vega-Lite API Template

This bar chart displays population by country from a 2015 dataset, using Vega-Lite’s API to build the visualization with horizontal bars sorted by value. The code loads CSV data via `d3.csv`, configures axes and styling through a custom config object, and renders SVG using vega-lite and vega-tooltip for interactive hover details. The example demonstrates programmatic chart construction and React state management for handling asynchronous data.

Hhamzavg

83% match

Loading thumbnail…

Vega-Lite API Template

This example shows a bar chart of religious demographics by country, with each bar colored by religion and tooltips revealing population counts. The visualization is built using the Vega-Lite API, which wraps the higher-level vl.encode patterns for declarative chart specification. The code uses `vl.markBar()` with `vl.x()`, `vl.y()`, `vl.color()`, and `vl.tooltip()` to define the visual channels, while data is loaded via `d3.csv` from a remote URL. The chart renders as SVG, with custom axis and label styling configured through the `config` object and displayed in a full-window view.

AAnthony Ynami

83% match