Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

90% 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

84% 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

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

A bar chart displays Finnish crime statistics from 2019 and 2020, sourced via a StatFin API request filtered by court, crime group, and appellant. The visualization uses Vega-Lite API for encoding, with `vl.markBar` for bars and `vl.y().fieldQ('name')`/`vl.x().fieldN('age')` mappings. Data is fetched asynchronously with d3.csv and d3.json, though the chart ultimately plots sample JSON objects with names and ages rather than the fetched statistics. Custom styling includes dark axis labels and enlarged fonts via a config object.

Iinar-vision

79% match

Loading thumbnail…

Vega-Lite API Template

This example displays a bar chart of U.S. counties with death counts, sorted in descending order, with a tooltip for population. Built with the Vega-Lite API, the visualization uses a D3 CSV loader to fetch the data from a GitHub gist. The chart is rendered as SVG via Vega, and the code applies a custom configuration to adjust fonts and axis styling. The visualization is sized to fit the browser window.

Mmtabaka

79% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

78% 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

78% 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

77% match