Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Feb 12, 2023

Created on Feb 12, 2023

This example uses the Vega-Lite API to render a bubble chart of Bluebikes station data, with the x-axis showing "Total docks" and the y-axis showing the "District". The circles are sized and colored by the number of docks, and a tooltip reveals details like station name and capacity. The code loads the tooltip, config, and data modules, with the data fetched from a remote CSV using `d3.csv`. The visualization is rendered to SVG, and the `viz.js` file defines the mark and encodings.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a bubble chart showing the population of each religion across countries, with circular marks sized by population and colored by country. The visualization loads CSV data from a GitHub gist, renders with SVG via Vega, and includes tooltips for inspecting values. The code configures axes, labels, and styling for readability, while the chart automatically fits the window dimensions. It leverages D3 for data fetching, Vega for rendering, and Vega-Lite’s declarative encoding for marks and scales.

Jjbruzzo

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bubble chart comparing religious affiliations across countries, using circle size to encode population and axes for country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries with D3’s CSV loader to fetch data from a GitHub gist. The visualization automatically fills the browser viewport, applies custom axis styling from a config object, and includes a Vega-Tooltip handler for interactive population details on hover.

LLento Manickathan

80% match

Loading thumbnail…

Blue Bike Stations

This visualization maps Blue Bike stations by district, using circle size, color, and opacity to represent the total number of docks at each station. It is built with the Vega-Lite API, leveraging `vl.markCircle` and encoding fields like `Total docks` for quantitative mapping and `District` for categorical positioning. The data is loaded from a remote CSV file via `d3.csv`, and the visualization is rendered with `vega-lite` and `vega`, incorporating custom styling through a `config` file for axis and label appearance.

KKimberly Nguyen

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to plot automobile data, showing each car as a circle positioned by weight and horsepower, colored by origin, and sized by fuel efficiency (mpg). The code loads CSV data from a GitHub gist via D3’s `csv` method, then builds the chart with `vega-lite-api`’s `markCircle` and encodes position, color, size, and tooltip fields. Rendered as an SVG through the Vega renderer, the visualization includes a Vega tooltip handler for interactive inspection.

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the classic Auto MPG dataset. The visualization encodes quantitative fields for acceleration (x-axis) and horsepower (y-axis), with origin as color and cylinders as size, plus a tooltip for car name. The code loads data via `d3.csv`, renders with `vega` and `vega-lite`, and applies custom styling from `config.js` for axis ticks and label fonts. The chart auto-fits to the window, uses SVG rendering, and integrates `vega-tooltip` for hover details.

Ssmile2git

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a bubble chart that visualizes religious affiliation by country. The visualization maps country to the x-axis, population to both the y-axis and circle size, and religion to color, with tooltips showing exact population values. Built with vega-lite-api, the chart loads CSV data via d3.csv and renders with the Vega and Vega-Lite libraries. The code registers vega-tooltip for interactive hover details and applies a custom configuration for improved readability and styling.

Bbangberga

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from a CSV file, plotting engine displacement against horsepower with a tooltip that displays the car name. The code registers Vega, Vega-Lite, and Vega-Lite API with a tooltip handler, loads the data via d3.csv, and applies custom styling through a config object. It demonstrates a programmatic workflow where the chart specification, data loading, and rendering are separated across modules, culminating in a full-screen, interactive visualization.

Aaymen0023

80% match