Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Mar 19, 2022

Created on Mar 18, 2022

This scatter plot uses the Auto MPG dataset from the UCI Machine Learning Repository to visualize relationships among vehicle attributes. Each circle represents a car, positioned by weight and horsepower, colored by country of origin, and sized by miles per gallon. The visualization is built with the Vega-Lite API, which generates the chart specification, while D3.js fetches the CSV data and renders the SVG output. Interactive tooltips display car names when hovering.

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 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and engine power (horsepower) for various car models. Each circle is colored by country of origin and sized by vehicle weight, with tooltips revealing model names. Built with the Vega-Lite API, it uses d3’s CSV parser to load data, then renders an interactive SVG graphic with configurable axis styling and a custom dark theme.

GGeorge Williams

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto MPG data from the UCI Machine Learning Repository, mapping miles per gallon against horsepower. Each circle’s size encodes vehicle weight, while color distinguishes origin, and hovering reveals the car’s name. The visualization is built using the Vega-Lite API, with d3.csv loading the data and vega-tooltip providing interactive details. The chart fills the browser window, and a custom config adjusts axis and label styling for readability.

SSumit Kumar

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset. Each circle represents a vehicle, positioned by miles per gallon and horsepower, colored by country of origin, and scaled by weight. The visualization is built using the Vega-Lite API, which constructs the chart specification, with Vega rendering the SVG output. D3 handles CSV data loading, while Vega-Tooltip provides interactive hover details. The interface automatically fits the chart to the browser window, with customized axis styling and enlarged typography for improved readability.

SShantanu

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

GGyromighty

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes the relationships among car attributes in the Auto MPG dataset from the UCI Machine Learning Repository, showing fuel efficiency (mpg) against horsepower, with color encoding by origin, size encoding by weight, and tooltips revealing car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite in the browser, fetches data via d3.csv, and configures visual styling such as axis tick colors and font sizes. It renders as inline SVG, sized responsively to the window, with Vega-Tooltip handling interactive details on hover.

Jj-PGi

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, with miles per gallon on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size reflecting vehicle weight. Tooltips reveal the car names. The code uses the Vega-Lite API (vl) configured with vega, vega-lite, and vega-tooltip, while d3.csv fetches the remote data. Custom axis and label styling is applied through a shared config object before the SVG view renders to fill the window.

MMuhammadAaqib137

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Sseitzfab

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays relationships among automobile characteristics using the Auto MPG dataset from the UCI Machine Learning Repository. Scatter plots show miles per gallon against horsepower, with points colored by country of origin and sized according to vehicle weight. The code builds the chart programmatically using the Vega-Lite API, registering Vega and Vega-Lite with a custom configuration that removes axis domains and adjusts font styling. Data is loaded via D3's CSV reader, and rendering produces an SVG output with a tooltip handler for interactive exploration.

FFiewor John

95% match