explor vegalite

100%

explor vegalite

✓ Published1🌍 Public

Last edited Nov 23, 2021

Created on Nov 23, 2021

This visualization explores the Auto MPG dataset from the UCI Machine Learning Repository. It renders a scatter plot with circles encoding miles per gallon on the x-axis, horsepower on the y-axis, origin as color, and vehicle weight as point size, with tooltips showing model names. Built using the vega-lite-api, it registers Vega and Vega-Lite to generate an SVG view with a custom dark-themed configuration. The code loads CSV data via `d3.csv` and renders the chart at full window size with a tooltip handler.

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 Iteration

This visualization displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built using the Vega-Lite API, it registers handlers through `vega`, `vega-lite`, and `vega-tooltip` to render interactive SVG graphics with hover tooltips. The code loads CSV data with `d3.csv`, applies a custom configuration for axis styling, and dynamically sizes the chart to fit the window dimensions.

CChris Briggs

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

91% match

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

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

90% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays a scatter plot of vehicle fuel efficiency data from the UCI Auto MPG dataset, with horsepower on the y-axis, miles per gallon on the x-axis, and points colored by origin while sized by weight. It is built using the Vega-Lite API, which programmatically constructs Vega-Lite specifications, and renders through the Vega and Vega-Lite libraries. The code loads CSV data with d3.csv, applies custom axis and label styling from a config object, and renders an interactive SVG view with tooltips via vega-tooltip.

GGenpinZ

90% 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 for individual cars. Each circle’s color encodes the car’s origin, while its size represents weight; hovering reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which composes a scatter plot with a circle mark and quantitative scales. It loads CSV data via d3.csv, renders with SVG through Vega-Lite’s view, and applies custom axis and label styling from a shared configuration object.

Ssofiamourap

90% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW

90% match

Loading thumbnail…

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen

90% match