Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Nov 17, 2019

Created on Nov 17, 2019

This example visualizes commuting flows, plotting the relationship between the margin of error and the commuting flow volume for different work counties. It uses a scatter plot with circles whose size is also encoded by commuting flow, and both the x- and y-axes use a logarithmic scale. The visualization is built programmatically with the Vega-Lite API, which registers the Vega and Vega-Lite libraries, and it renders to an SVG canvas. The data is loaded from a remote CSV file using d3’s `csv` function, and the chart includes interactive tooltips provided by the vega-tooltip handler.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes commuting flows between counties, plotting the margin of error against the commuting flow volume on logarithmic scales. Each circle represents a county, with size encoding the commuting flow magnitude and tooltips revealing the work county name. The visualization uses the Vega-Lite API to declaratively define the scatter plot, with data loaded asynchronously via d3.csv. Vega and Vega-Lite render the chart to SVG, while Vega-Tooltip provides interactive hover details, and the code applies custom axis and label styling from a shared config file.

CCurran Kelleher

97% match

Loading thumbnail…

Vega-Lite API Template

This visualization shows the relationship between commuting flow and margin of error across work counties, using a scatter plot with logarithmic scales on both axes. Circle size encodes commuting flow, with tooltips revealing work county names. Built with the Vega-Lite API, it registers vega and vega-lite libraries, loads data via d3.csv from a GitHub gist, and applies custom axis and label styling. The chart renders as SVG with automatic fitting to the viewport, enhanced by the vega-tooltip handler for interactive data inspection.

Sssessaazi1

96% match

Loading thumbnail…

Commute Flows by County

This visualization presents county-to-county commuting flows across the United States, with each rectangle representing the volume of daily commuters between a work county and a residence county, encoded on a logarithmic orange color scale. The arrangement allows viewers to detect regional commuting patterns and compare relative flow magnitudes, though the data appears to show no obvious geographic hotspots. Built with the Vega-Lite API (using `vl.markRect`, `vl.x().fieldN()`, and `vl.color().fieldQ()`), it loads a CSV via `d3.csv`, renders as an SVG through Vega-Lite’s automatically generated specification, and includes tooltips for exact flow values. The chart uses a custom dark theme from `config.js` and scales to fit the window size.

Jjessand4

82% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of automobile data using the Vega-Lite API, with each circle representing a car model positioned by its country of origin and horsepower. The visualization shows overlapping points with low opacity to reveal density patterns. It loads data from a CSV file using d3.csv, constructs the mark and encoding specifications through vl.markCircle and vl.encode, then renders the final SVG using Vega charting libraries bundled with Vega-Tooltip. The code demonstrates a workflow that builds a Vega-Lite specification programmatically rather than writing JSON directly, minimizing boilerplate while retaining full expressiveness.

CCurran Kelleher

81% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824

80% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh

80% match

Loading thumbnail…

Vega-Lite API Template fast iteration

This example demonstrates rapid iteration with the Vega-Lite API by rendering a scatter plot of automobile data from the UCI Machine Learning Repository. It shows the relationship between highway miles per gallon, engine displacement, model year, and city MPG using circle marks with opacity. The visualization is built programmatically using `vega-lite-api` to construct the specification, then rendered as an SVG via Vega and Vega-Lite, with tooltips handled by `vega-tooltip`. The code uses `d3.csv` to fetch data, applies custom axis and label styling from a config object, and dynamically sizes the chart to fit the window.

DDanny Stephens

80% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot, with each car represented as a circle colored by weight and sized by miles per gallon. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the chart programmatically. Data is loaded from a CSV file via d3.csv, and the final SVG output is rendered to fill the browser window. Axis styling and tooltips are customized through the provided Vega-Lite config and the vega-tooltip handler.

CCurran Kelleher

80% match