Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
RRobin
Last edited Mar 7, 2023
Created on Mar 7, 2023

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps miles per gallon and horsepower, with each point’s size encoding vehicle weight and color distinguishing country of origin. Hovering reveals the car’s name via a tooltip. Built with the Vega-Lite API in a D3.js framework, the code uses `vl.markCircle` and `vl.encode` to construct the visualization, with `d3.csv` fetching the data and `vega-tooltip` providing interactivity.

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 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

SSong Tao Chen
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower for individual car models. Each point is colored by origin and sized by vehicle weight, with hover tooltips revealing the car name. Built with Vega-Lite API, the visualization leverages `vl.markCircle`, positional encodings via `vl.x()` and `vl.y()`, and tooltips through `vl.tooltip()`. D3’s `csv` loader fetches the data, while Vega tooltip enhances interactivity, all running within a responsive, full-window layout.

JJoshua Holloway
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

BBrian Olczak
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

BBrian Olczak
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

BBrian Olczak
96% 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
96% match