Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 21, 2021

Created on Nov 21, 2021

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.

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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

DDataFeast_71

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

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

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, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin through color and weight through size, with hover tooltips revealing model names. The visualization uses the Vega-Lite API to declaratively specify the chart, while D3.js (d3.csv) handles data loading. The code leverages vega-lite-api’s `vl` builder to chain mark and encoding specifications, with vega-tooltip providing interactive legends and tooltips.

Mmarquesjr79

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, 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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example showcases a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing miles per gallon against horsepower. Points are colored by origin and scaled by weight, with tooltips revealing car names. The visualization is built using the Vega-Lite API’s `vl.markCircle` with encoding methods like `vl.x().fieldQ()` and `vl.color().fieldN()`. It loads data via `d3.csv`, configures axis styling in `config.js`, and integrates Vega-Tooltip for interactive hover details.

IIlia Katkovnik

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

RRobin

96% match