Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 15, 2021

Created on Dec 15, 2021

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the Auto MPG dataset, with a tooltip revealing each car’s name. Built using the `vega-lite-api` wrapper around Vega-Lite and Vega, it renders an interactive scatter plot where circle size encodes weight and color encodes origin. The code loads CSV data via `d3.csv`, configures axis and label styling, and fits the visualization to the window with an SVG renderer and 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…

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset, loaded via a CSV from a GitHub Gist. It uses a scatter plot with circles sized by weight and colored by origin, rendered through the Vega-Lite API and Vega-Lite’s declarative specification. The code registers Vega and Vega-Lite with `vl.register`, configures axes and tooltips via `vega-tooltip`, and sets the visualization to fit the browser window. Data is fetched asynchronously using `d3.csv`.

Sseitzfab

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Llingfa

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 cars from the UCI Auto MPG dataset. The scatter plot encodes miles per gallon on the x-axis, horsepower on the y-axis, color by origin, and point size by weight. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG chart. Data is loaded asynchronously via D3’s `csv` function, while the visualization code uses `vl.markCircle`, `.encode`, and `vl.x().fieldQ()` to define the marks and scales.

Aakiannejad123

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

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

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The data is loaded from a CSV file containing the standard Auto MPG dataset, with each car represented as a semi-transparent circle. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite in a JavaScript API, while the D3 library handles CSV parsing. Interactive tooltips display car names on hover, and the chart is rendered as an SVG, with appearance customized through a configuration object that adjusts axis labels and colors.

Kkarl.dalborg@mail.com

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

Mmeghshah612

95% match