TC of Vega-Lite API Template

100%

TC of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 11, 2022

Created on Mar 11, 2022

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin across automotive models. It renders a scatter plot using Vega-Lite API, where points are scaled by weight and colored by origin, with a tooltip displaying vehicle names. The code loads data from a CSV via D3’s `csv` function, and uses Vega-Lite API’s `vl.markCircle` and encoding methods for x, y, color, and size. Custom configuration adjusts axis labels and fonts for readability against a dark theme.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It displays a scatter plot where each circle’s position encodes mpg and horsepower, color encodes origin, and size encodes weight. The code uses the Vega-Lite API to build the chart declaratively, with the `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` methods. It loads CSV data via D3’s `csv` function, registers Vega-Lite components, and renders an interactive SVG with tooltips.

NNelson M

93% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for cars from the UCI Machine Learning Repository’s Auto MPG dataset. It uses the Vega-Lite API to compose a scatter plot with colored points by origin, sized by weight, and includes tooltips showing car names. The code registers the API with Vega and Vega-Lite, then fetches CSV data via D3’s `csv` method, applying a custom dark theme for readability. The view renders to SVG and fits the window dimensions.

Zzhangwbhi

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to use the Vega-Lite API to build a scatter plot of automobile data, showing the relationship between weight, horsepower, and fuel efficiency (mpg), with points colored by country of origin. The visualization leverages the vega-lite-api JavaScript library to construct the chart declaratively, then renders it using Vega and Vega-Lite with an SVG output. Data is loaded asynchronously from a CSV file using D3’s `csv` function. Custom styling is applied through a config object to adjust axis labels, fonts, and colors for improved readability.

MMGamboa

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

92% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle horsepower, weight, and fuel efficiency across different origins using a scatter plot. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification through chained method calls such as `vl.markCircle()` and `vl.encode()`. Data comes from an auto-mpg CSV loaded via `d3.csv`, and the chart renders as an SVG using Vega’s rendering engine with tooltip support from Vega-Tooltip. The visualization is configured with custom axis and label styling to improve readability.

Mm1k3yp

92% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot of auto-mpg data shows the relationship between vehicle weight, horsepower, and fuel efficiency, with points colored by country of origin and sized by miles per gallon. The visualization is built with the Vega-Lite API, registering both Vega and Vega-Lite engines, and leverages D3’s `csv` module for data loading from a UCI Machine Learning Repository dataset. SVG rendering and tooltip interactions are configured through Vega-Lite’s `config` and `Handler` interfaces.

CCarlos Caballero

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

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

92% match