Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 27, 2021

Created on Feb 27, 2021

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.

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 visualizes the relationship between a car's country of origin and its horsepower using a scatter plot. Each point represents a car, with opacity applied to reveal overlapping data points, and a tooltip displays the car's name on hover. The visualization is built using the Vega-Lite API, which generates a specification rendered to SVG via Vega and Vega-Lite. It loads the Auto MPG dataset from the UCI Machine Learning Repository using `d3.csv`, and customizes axis styling and tooltip appearance through a configuration object.

Ww.fukuyama@gmail.com

96% match

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 example visualizes the relationship between car origin and horsepower using a scatter plot. It renders points from the auto-mpg dataset, with each point colored by origin and positioned by horsepower. The visualization is built with the Vega-Lite API, which constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously via the d3.csv function, and tooltips display car names on hover. The code customizes the chart’s appearance through a config object, setting fonts and axis styles, and uses a dark color for text.

Sseanmdalrymple@protonmail.com

94% 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

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.

SShashwat Kumar

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping miles per gallon against horsepower. Points are colored by country of origin and scaled in size by vehicle weight, with tooltips showing car model names. The example demonstrates the vega-lite-api library, which provides a JavaScript interface for building Vega-Lite specifications, combined with Vega and vega-lite for rendering. Data is loaded asynchronously via d3.csv from a remote CSV file containing auto-mpg statistics. The visualization uses SVG rendering, custom axis styling from a config object, and adjusts to fill the browser window.

Ssuserocc

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between the origin and horsepower of cars from the Auto MPG dataset. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an interactive SVG chart. It loads data from a CSV file via `d3.csv`, applies custom axis and label styling, and uses a tooltip handler to display car names on hover. The chart automatically fits the browser window dimensions.

PPratik Raja

93% match