Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
CCurran Kelleher
Last edited Nov 17, 2019
Created on Nov 17, 2019

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.

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

Jjessand4
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
83% 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
82% 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
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
81% 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

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher
80% match