Easier visualization

100%

Easier visualization

✓ Published2🌍 Public

Last edited May 22, 2024

Created on May 22, 2024

This example uses the Vega-Lite API to create an interactive scatter plot from the UCI Auto MPG dataset, displaying each car's miles per gallon against its horsepower. Points are colored by country of origin, sized by vehicle weight, and show the car name on hover through a tooltip. The JavaScript code constructs the visualization declaratively using `vl.markCircle` and `vl.encode`, then renders it with Vega-Lite's renderer while applying custom axis styling from a separate config file. Data is loaded asynchronously using `d3.csv` from a remote Gist.

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…

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

92% match

Loading thumbnail…

Vega-Lite API Template 1216

This visualization uses the Vega-Lite API to display a scatter plot of UCI Auto MPG data, plotting miles per gallon against horsepower. Each circle represents a car model, with color encoding the country of origin, size encoding weight, and tooltips revealing the car name. The code fetches CSV data via `d3.csv`, then builds the chart programmatically using functions like `vl.markCircle` and `vl.x().fieldQ`. The visualization renders as a full-window SVG with a custom dark theme, with axis styling and tooltip formatting configured for readability.

DDavid-Wong110723

91% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy

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

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

90% match

Loading thumbnail…

Vega light API demo

This example demonstrates a scatter plot of automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, visualizing fuel efficiency (mpg) against horsepower, with point color encoding country of origin, size encoding vehicle weight, and tooltips showing model names. Built with the Vega-Lite API, the visualization leverages `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.encode()` to define the specification programmatically, while d3.csv loads the remote data. The chart is rendered as an SVG and includes custom axis styling and tooltip handling via vega-tooltip.

Aarunkumarv1530@gmail.com

90% match

Loading thumbnail…

Visualization with Vega-Lite

This visualization uses Vega-Lite and the vega-lite-api to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot displays miles per gallon and horsepower on the axes, with color encoding for the country of origin and size encoding for vehicle weight. The code fetches the CSV data using d3.csv, configures the chart with custom axis and label styles, and renders it as an SVG while enabling tooltips through vega-tooltip.

MMartin Coronel

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with points colored by region of origin. Mouse hover reveals tooltips with vehicle names. The visualization is built using the Vega-Lite API, which encodes the data through `vl.markCircle` and `vl.encode` specifications, with D3.js handling CSV loading via `d3.csv`. The final chart is rendered as SVG through Vega and Vega-Lite, with appearance customized through a shared config object.

AAman Bhashkar

90% match