Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Hhimchan94
Last edited Sep 8, 2021
Created on Sep 8, 2021

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.

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

This scatter plot shows the relationship between fuel efficiency (mpg) and horsepower for a sample of automobiles, with color encoding by region of origin and point size encoding vehicle weight. The visualization is built using the vega-lite-api library, which programmatically constructs a Vega-Lite specification that renders as an SVG. Data is loaded asynchronously via d3.csv from the UCI Auto MPG dataset, and the resulting chart includes interactive tooltips displaying the car model name. The code customizes the visual appearance through a separate config.js file and appends the rendered visualization to the document body.

DDaniel Vanpelt
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

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

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

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

Fork of Vega-Lite API Template

This scatter plot visualizes automotive fuel efficiency and performance data from the UCI Auto MPG dataset, showing the relationship between miles per gallon and horsepower while encoding vehicle origin via color and weight via marker size. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification that is then rendered through Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously from a GitHub Gist using the `csv` function from d3.v5, while the Vega Tooltip handler provides interactive hover details displaying each car model's name. The chart auto-fits to the browser window dimensions.

KKevin McMorrow
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with points colored by origin and sized by mpg, using a tooltip to display car names. It employs the Vega-Lite API to declaratively define the scatterplot, registered with Vega and Vega-Lite, and renders it as SVG within a full-window layout. Data is loaded asynchronously from a CSV file using D3’s `csv` method, while the built-in Vega Tooltip handler manages interactive hover details. The configuration customizes axis styles and label fonts for improved readability.

Wwy2010344
95% match
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