Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
FFiewor John
Last edited Apr 26, 2022
Created on Apr 26, 2022

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.

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 visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, showing miles per gallon against horsepower, with color encoding the country of origin and point size representing vehicle weight. The plot uses a dark-themed, large-label aesthetic for clarity. It is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses D3’s `csv` loader to fetch the data. The interactive tooltip is provided by Vega Tooltip, and the chart renders as SVG, fitting the full browser window.

Lleopoldovce2
96% 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 displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

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.

TTanupat B.
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with engine horsepower on the y-axis and miles per gallon on the x-axis. Points vary in color by country of origin and size by vehicle weight, with tooltips revealing car names. The code uses the `vega-lite-api` to build the chart, which registers with Vega and Vega-Lite, while D3’s `csv` loads the data. A custom `config` object adjusts axis and label styling for readability.

Lleongtini
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower for various car models. Each point’s size encodes vehicle weight, color indicates the country of origin, and hovering reveals the car name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3, using `vl.markCircle` for encoding and `d3.csv` for loading data. The plot spans the full browser window with a custom dark color config for axis labels and titles.

NNana Kwame
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, encoding engine horsepower on the y-axis, miles per gallon on the x-axis, and using color to distinguish the vehicle origin with point size mapped to weight. The code builds the chart using the Vega-Lite API, registering Vega and Vega-Lite libraries alongside a tooltip handler. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that automatically fits the browser window, with custom axis and label styling defined in a separate config file.

SSkye Chen
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680
95% match