Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 9, 2021

Created on Jul 9, 2021

This example visualizes automobile characteristics from the UCI Machine Learning Repository’s Auto MPG dataset. The scatter plot displays each car’s origin on the x-axis and its horsepower on the y-axis, with semi-transparent points and tooltips revealing the vehicle name. Built with the vega-lite-api, it uses vega-lite encoding functions like `vl.x().fieldN` and `vl.y().fieldQ` to map fields. The visualization pulls data via `d3.csv`, customizes axes and labels through a `config` object, and renders full-window SVG using vega-tooltip for interactive hover details.

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 automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis against its horsepower on the y-axis using semi-transparent, oversized circular marks. The chart is built with the Vega-Lite API, registered and rendered through Vega and Vega-Lite, with tooltips provided by Vega-Tooltip. Data is loaded asynchronously via d3.csv, and the visualization is styled with custom axis and label configurations defined in a separate config.js file, resulting in a clean, full-screen scatter plot.

Jjjacobatandover

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

94% 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 origin against its horsepower as a scatter plot. It uses the Vega-Lite API to define the chart and encode the data, with circle marks colored by origin and tooltips showing car names on hover. The visualization loads CSV data via d3.csv, applies custom axis and label styling through a Vega-Lite config object, and renders the final output using Vega and Vega-Lite JavaScript libraries with SVG rendering and tooltip support.

LLorenzo Casbarra

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository, showing the relationship between MPG and horsepower. Each point is colored by origin, sized by weight, and includes a tooltip revealing the vehicle name. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to declaratively encode the marks. Data is loaded asynchronously via D3's `csv` function, and the chart is rendered with a custom configuration that adjusts axis and label styling.

Mme-as-a-web-designer

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It displays miles per gallon on the x-axis, horsepower on the y-axis, with color encoding by origin and size encoding by weight, plus tooltips for car names. The visualization fetches data via `d3.csv` and renders using `vega`, `vega-lite`, and `vega-lite-api`, with a custom config for axis styling and a Vega Tooltip handler. The chart is fit to the full window size.

JJessica Tucker

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, visualizing miles per gallon against horsepower. Each point is colored by origin and sized by vehicle weight, with tooltips revealing car names. The visualization uses the Vega-Lite API to declaratively define the chart, which is embedded via vega, vega-lite, and vega-tooltip. Data loading relies on d3.csv, while custom axis and label styling are applied through a Vega-Lite config object.

MMohammadSorkhian

94% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) to reveal patterns among vehicles. Built with vega-lite-api, it includes tooltips showing car names and configures axis styles for readability. The code loads data via d3.csv, renders the chart as SVG, and supports hover interactions through vega-tooltip.

Ggayatrisridhar

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

94% match