Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published1🌍 Public
Yyuzhang21
Last edited Sep 27, 2019
Created on Sep 8, 2019

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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

Boston Housing Dataset Part II

This visualization explores the Boston Housing dataset by splitting it according to the `rad` variable (accessibility to highways), which clusters at values 1–8 or 24. Four scatterplots compare house price (`medv`) against `rad` and lower-status population percentage (`lstat`), with circle size encoding proximity to the Charles River (`chas`) and color indicating average room count (`rm`). Built with the `vega-lite-api` and rendered using Vega-Lite, the plots load CSV data from a Gist and are configured via a custom `config.js`. The author uses `vl.markPoint`, `vl.markSquare`, and `vl.markCircle` to distinguish the visualizations.

Yyuzhang21
76% match
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
76% match
Loading thumbnail…

Fork of Boston Housing Dataset Part I

This visualization displays four scatter plots exploring correlations in the Boston Housing Dataset, with median home value (medv) plotted against lstat, pupil-teacher ratio, age, and industrial character (indus/nox). Each plot uses color and size encodings for additional variables, revealing relationships such as the strong negative correlation between housing price and lower-status population percentage. Built with the vega-lite-api library, the code fetches CSV data via d3.csv and renders interactive SVG charts with custom tooltips, axis styling, and a dark color scheme through the vega-tooltip handler and vega-lite configuration.

Llimenzi
74% match
Loading thumbnail…

Vega-Lite API Template

This visualization uses Vega-Lite's API to render a bar chart of household counts in Yemen, grouped by governorate of origin and colored by displacement date. It loads CSV data from a remote gist, configures axes and tooltips, and fits the chart to the browser window. The example demonstrates the `vega-lite-api` library alongside D3 and Vega tooltip handlers.

AAmit Wadhwa
73% 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
73% match
Loading thumbnail…

Boston Housing Dataset Part I

This visualization presents four scatter plots exploring relationships in the Boston Housing Dataset, focusing on median home value (medv) against variables like lower-status population percentage, pupil-teacher ratio, building age, and nitrous oxide concentration. The plots reveal correlations, such as the strong negative relationship between medv and lstat, while coloring points by additional attributes like indus or ptratio and sizing by the chas binary variable. Built with the vega-lite-api library and D3, the charts load CSV data from a GitHub Gist and render interactively with tooltips and a custom dark-themed configuration.

Yyuzhang21
73% match