Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jul 21, 2021

Created on Jul 21, 2021

A scatterplot of auto-mpg data displays horsepower by country of origin, with each point’s size and opacity fixed. The visualization is built using the Vega-Lite API, which compiles specifications to Vega and renders to SVG within a D3 environment. Data is loaded via `d3.csv` from a remote gist, and interactive tooltips are enabled through `vega-tooltip`. The chart fills the browser window, with custom fonts and axis styling configured for readability.

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 presents a scatter plot of auto-mpg data, showing the relationship between the country of origin (as a categorical x-axis) and horsepower (as a quantitative y-axis), with tooltips displaying car names. The visualization is built using the Vega-Lite API, wrapped in a D3.js v5 context, and rendered with SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, then encoded through the `vl.markCircle` and `vl.encode` functions from the vega-lite-api library. The chart resizes to the full browser window and uses custom axis and label styling from a separate config file.

SSavenkov Igor

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg CSV dataset. It plots horsepower against origin, with each point sized and colored by its country of origin, and includes tooltips showing vehicle names. The code registers Vega-Lite with Vega and D3, loads data via d3.csv, and configures axes and label styling for improved readability. The plot fills the entire browser window, with rendering handled through Vega’s SVG view and interactivity powered by vega-tooltip.

Nnncis

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping displacement against horsepower, with points colored by country of origin and tooltips revealing model names. The example uses the Vega-Lite API (via `vega-lite-api`) to declaratively construct the chart, while D3's `csv` method loads the auto-mpg dataset. Rendering is handled by Vega and Vega-Lite with SVG output, and the tooltip functionality comes from the `vega-tooltip` Handler. Axis styling and color scheme are customized through a JSON config object, which is merged into the visualization's default appearance.

MMathieuSchaff

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between a car's origin country and its horsepower, using the auto-mpg dataset. Each point is rendered as a large, semi-transparent circle, with size and opacity set to 9000 and 0.02 respectively. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite, and retrieves data from a CSV URL via d3.csv. The plot is fitted to the window size and includes a tooltip that displays the car's name on hover.

SSofffos

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto MPG data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin and sized by horsepower. The code calls on `vega-lite-api`, `vega`, `vega-lite`, `vega-tooltip`, and `d3` to render the plot. It loads data from the UCI Machine Learning Repository’s Auto MPG dataset via a CSV URL using `d3.csv` and applies a customized configuration for darker text and styled axes for readability.

EErico103

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot of automotive data visualizes the relationship between the country of origin and horsepower, with each car represented by a semi-transparent circle. The visualization uses the Vega-Lite API with the `data(await getData())` method to load and bind the Auto MPG dataset from the UCI Machine Learning Repository, then applies a custom configuration to adjust axis styles and typography. The code registers Vega, Vega-Lite, and the Vega-Tooltip handler, and sets the chart dimensions to fill the browser window using `.width(window.innerWidth)` and `.height(window.innerHeight)` with an autosize fit option.

Aadam

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, and color encoding the country of origin. The point size is also encoded by the vehicle’s weight, with tooltips revealing the car’s name on hover. The visualization is built using the Vega-Lite API, which constructs a Vega-Lite specification programmatically, and is rendered with Vega’s SVG renderer. Data is loaded asynchronously from the UCI Machine Learning Repository via D3’s `csv` function, and the tooltip interaction is handled through `vega-tooltip`’s `Handler`.

MMuhammadAaqib137

93% match