Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Oct 27, 2022

Created on Oct 27, 2022

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

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 relationship between horsepower, fuel efficiency (MPG), and vehicle weight for classic cars, with color encoding by country of origin. Built using the Vega-Lite API on top of Vega and Vega-Lite, it renders as a single SVG, configured through `vl.markCircle` and the `encode` method. Data is loaded asynchronously from a CSV via `d3.csv`, sourced from the UCI Auto MPG dataset. The visualization adapts to the browser window and includes tooltips via the Vega Tooltip handler.

EEkuremaro

97% match

Loading thumbnail…

Fork of Vega-Lite API Template I

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API to declaratively encode data fields onto circular marks, with color distinguishing origin and size mapping to weight. It reads CSV data via `d3.csv`, renders with Vega’s SVG renderer, and includes Vega-Tooltip for interactive hover details. The chart resizes to fit the browser window and applies custom axis and label styling for readability.

FFonda Irena Santoso

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for classic automobiles, using a scatter plot where each car is a circle. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, with data fetched from the UCI Machine Learning Repository’s Auto MPG dataset via D3’s `csv` function. The API encodes the x-axis as miles per gallon, the y-axis as horsepower, color by origin, and size by weight, while a tooltip displays each car’s name. The chart fills the browser window and uses custom axis labels and colors for improved readability.

VVander Fillipe de Souza

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Iiblub

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

HHgeginat

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with circles colored by region of origin and sized by vehicle weight. Built using the Vega-Lite API, it defines the visualization through method-chaining operations including `markCircle`, `encode`, and scale specifications. The example loads car data from the UCI Machine Learning Repository via d3’s `csv` function, and renders interactively with tooltips provided by the `vega-tooltip` Handler. Custom axis and label styling are applied through a shared configuration object.

Wweny1109

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency, horsepower, and origin in a dataset of classic cars. The plot positions each vehicle by its miles per gallon and horsepower, colors points by the country of origin, and sizes them according to vehicle weight. Built using the Vega-Lite API, the visualization is rendered as an SVG via the vega-lite-api, with data fetched from the UCI Auto MPG dataset. Custom configuration adjusts the axis styling and tooltip appearance.

AAlejo Cortiñaz

96% match