Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 4, 2021

Created on Apr 4, 2021

This visualization presents a scatter plot of auto-mpg data, showing the relationship between fuel efficiency and horsepower. Each point represents a car, with its origin encoded by color and weight by size. The tooltip displays the car's name and displacement. The example uses the Vega-Lite API to construct the visualization, which is then rendered by Vega with a custom configuration for improved readability. Data is loaded from a CSV file using d3.csv, and the plot fills the browser window with a responsive layout.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template b

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with points colored by origin and sized by weight, using data from the UCI Auto MPG dataset. The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is subsequently rendered by Vega. It uses D3.js to load the CSV data from a Gist, customizes axis and label styling through a configuration object, and includes interactive tooltips displaying the car name via the Vega-Tooltip handler.

Bbilalialikissankpeyi

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg) and horsepower for a set of automobiles, with points colored by origin and sized by weight, using the vega-lite-api to construct a scatter plot. The code loads CSV data from the UCI Auto MPG dataset via d3.csv, then renders the chart with Vega-Lite and Vega, configured with a custom dark theme for improved readability. Hovering over a point reveals the car’s name through a vega-tooltip handler. The visualization fills the entire viewport and uses a fit autosize mode with zero-suppressed scales.

Hhimchan94

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot displays auto-mpg data from the UCI Machine Learning Repository, plotting fuel efficiency (mpg) against horsepower. Each point represents a car model, colored by country of origin and sized by weight, with hover tooltips revealing the car name. Built with the Vega-Lite API, it uses D3.js for data loading via `d3.csv` and renders through Vega-Lite's specification. The visualization adapts to the browser window dimensions, using a customized axis and label style for improved readability.

KKoorosh1900

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of Auto MPG data, with weight on the x-axis, horsepower on the y-axis, and color encoding the origin of each car. Point size represents miles per gallon, with tooltips showing car names. It uses the Vega-Lite API to construct the chart, which is rendered with Vega and Vega-Lite, while D3 fetches the CSV data. The visualization is configured for full-window display and includes custom styling for axes and labels.

Vvedanth bora

94% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping fuel efficiency (mpg) against horsepower. Each point’s size encodes vehicle weight, while color distinguishes the country of origin. The chart uses the vega-lite-api DSL to construct the specification, with vega, vega-lite, and d3.csv handling data loading and rendering. Custom axis styles and tooltips are applied via vega-tooltip, and the view auto-fits to the window using vega’s autosize configuration.

Mmuwu16

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

94% match