Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 8, 2023

Created on May 8, 2023

A bar chart displays the per-capita burglary rate for Massachusetts cities, filtered to those with rates above 0.005, with cities sorted descending by value. Built with the Vega-Lite API, it uses `vl.markBar()` and `vl.y().fieldQ()` for the quantitative axis, while `getData.js` loads a CSV via d3's `csv` method and computes the rate. The chart renders to SVG, with custom axis and label styling from `config.js`.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization shows the burglary rate per capita for Massachusetts cities, filtering to only those with rates above 0.005 and sorting the bars from highest to lowest. The bars are rendered with the Vega-Lite API, which builds a specification that Vega then renders as scalable vector graphics. Data is loaded from a CSV file using `d3.csv` and processed to calculate the per-capita metric. Interactive tooltips display the city name when hovering, and the chart automatically fits the browser window dimensions.

CCurran Kelleher

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

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

78% match

Loading thumbnail…

Major Crimes in Boston

This example visualizes major crimes in Boston from a city dataset, using a bar chart where each bar represents a crime type and its length corresponds to the number of incidents. The bars are color-coded by year, and hovering reveals a tooltip with the crime name and exact count. Built with Vega-Lite and rendered via the `vega-lite-api`, it loads data from a CSV URL using D3’s `csv` method, then applies custom axis styling and tooltip handling from `vega-tooltip`.

JJosvin John

77% match

Loading thumbnail…

Vega-Lite API Template - bar chart

This bar chart, built with the Vega-Lite API, visualizes the population of each country in 2015. It encodes country names on the x-axis, sorted by population, with the quantitative population value on the y-axis. The visualization is generated from a CSV file loaded via d3’s `csv` function. The chart uses `markBar` for rendering, and a tooltip displays each country’s population on hover, with the chart sized to fit the window.

MMahesha999

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

76% match

Loading thumbnail…

Massachusetts City Population by Burglary

This visualization compares burglary counts across Massachusetts communities using a bar chart with a logarithmic scale, making large value differences readable. The chart groups bars by community, with crime type on the x-axis and total crime count on the y-axis, colored by crime type. Built with the vega-lite-api library, it uses d3.v5 to load and unpivot a CSV dataset fetched from a Gist, then aggregates counts per community and crime type via `vl.aggregate` and `vl.sum`. Custom axis styling in `config.js` improves label readability.

Yyuzhang21

76% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the average median home value by room count, arranged in descending order within each district. The bar chart uses color to encode the room count variable, creating a grouped comparison across districts. Built with the Vega-Lite API, it registers both Vega and Vega-Lite libraries, loads Boston housing data from a CSV via d3.csv, and renders interactive tooltips through the Vega Tooltip Handler. The chart’s appearance is customized using a dark color scheme, with axis ticks and guide labels styled for readability.

Yyuzhang21

76% match