Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published5🌍 Public
CCurran Kelleher
Last edited Sep 10, 2019
Created on Sep 10, 2019

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.

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 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`.

TTammminana
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
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…

Massachusetts City Population by Burglary

This example plots Massachusetts cities as points on a scatterplot, with burglary counts on the x-axis and population on a logarithmic y-axis. It reveals that among similarly populated cities, New Bedford and Fall River experience notably higher burglary rates. The visualization is built with the vega-lite-api, which registers Vega and Vega-Lite, and uses d3.csv to load the crime dataset from a GitHub gist. Custom axis styling and tooltips are configured through Vega-Lite’s API, with points colored by city and rendered via SVG.

Wwenleicao
77% match
Loading thumbnail…

Massachusetts Crime Proportion by Community (final project)

This visualization shows the proportion of different crime types across Massachusetts communities, using a stacked, normalized bar chart to compare relative shares. Rural areas exhibit more burglary, while cities show higher rates of robbery, motor vehicle theft, and violent crime. Built with vega-lite-api on d3.v5, it loads CSV data from a GitHub gist, aggregates crime counts by community and type, and renders horizontal bars with tableau20 color coding. The config adjusts font sizes and axis styling, while vega-tooltip provides interactive crime-type and count details on hover.

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

Massachusetts City Population by Burglary

The visualization displays Massachusetts city population data plotted against burglary rates across years, using bar marks to encode weekly ILI (influenza-like illness) totals. It employs the vega-lite-api with d3 for data loading, rendering a small-multiple column layout by year with color indicating temporal grouping. The chart uses a dark-themed config for improved readability and attempts logarithmic scaling on the y-axis, though the code ultimately applies linear scaling for the ILI totals. Data originates from a CSV gist containing unpivoted Massachusetts crime statistics.

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