Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
Sseitzfab
Last edited Jul 11, 2023
Created on Jul 11, 2023

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`.

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 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
97% 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 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.

SSteven Pearce
96% 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 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
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for cars, with each point colored by country of origin and sized by vehicle weight. It uses data from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The graphic is built declaratively using the Vega-Lite API, specifying a circle mark with encodings for position, color, and size. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG chart fitted to the browser window, with a tooltip provided by Vega-Tooltip.

Yyejichun@naver.com
95% 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
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for a sample of automobiles from the UCI Auto MPG dataset. A scatter plot maps mpg to the horizontal axis and horsepower to the vertical axis, with point size encoding weight and color distinguishing origin. The implementation uses the Vega-Lite API to declare the chart specification, while d3.csv loads the remote dataset. Custom axis styling and tooltips are configured through Vega-Lite’s config object and the Vega Tooltip handler, rendering in SVG.

EEngineerRajeev
94% match