Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
Sssessaazi1
Last edited Jun 4, 2020
Created on Jun 4, 2020
Forked from Hello VizHub

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.

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
96% match
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
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
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

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

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of vehicle data, mapping miles per gallon against horsepower, with points colored by region of origin and sized according to vehicle weight, along with tooltips revealing car model names. Built using the Vega-Lite API, the code registers vega, vega-lite, and vega-tooltip, then renders a circle mark with quantitative and nominal encodings. Data is loaded asynchronously via `d3.csv` from the UCI Auto MPG dataset hosted on GitHub, and the chart fills the browser window with a custom configuration for axis styling.

Llokeshp-0813
79% match
Loading thumbnail…

Vega-Lite API Template

This visualization displays a scatter plot of vehicle fuel efficiency data from the UCI Auto MPG dataset, with horsepower on the y-axis, miles per gallon on the x-axis, and points colored by origin while sized by weight. It is built using the Vega-Lite API, which programmatically constructs Vega-Lite specifications, and renders through the Vega and Vega-Lite libraries. The code loads CSV data with d3.csv, applies custom axis and label styling from a config object, and renders an interactive SVG view with tooltips via vega-tooltip.

GGenpinZ
79% match
Loading thumbnail…

Vega-Lite API Template

A scatter plot shows the relationship between pressure and acceleration, with tooltips revealing each point's name. Built with Vega-Lite API, it loads CSV data from a remote GitHub repository using d3.csv. The visualization uses Vega and Vega-Lite libraries, configures axes and label styling, and renders as a full-window SVG with interactive tooltips from vega-tooltip.

Jjacoyat08
79% match