Skip to main content
SimilarExport ZIP
100%

HTML

✓ Published0🌍 Public
KKoundinya
Last edited Dec 28, 2021
Created on Dec 28, 2021

This example presents a scatter plot showing the relationship between automobile origin, model year, and vehicle name from the auto-mpg dataset. The visualization uses data fetched from a CSV file via `d3.csv()`, with points encoded by origin as both color and x-axis position, while the y-axis represents model year. The code leverages the vega-lite-api library to construct the specification, registering Vega and Vega-Lite, and includes tooltip functionality through the vega-tooltip `Handler`. The plot is rendered as an SVG with custom styling for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates the relationship between automobile origin, model year, and name using a scatterplot of the auto-mpg dataset. The visualization reveals patterns in vehicle attributes across different manufacturers and time periods. It combines the Vega-Lite API for declarative chart specification with D3’s `csv` loader for data ingestion. The code registers Vega, Vega-Lite, and vega-tooltip, then renders an interactive SVG with origin-based color encoding, tooltips, and a fitted, full-window layout.

KKoundinya
87% match
Loading thumbnail…

Vega-Lite API

This example visualizes the relationship between car origin, horsepower, and model name using the Vega-Lite API, a JavaScript wrapper for Vega-Lite. It renders a scatterplot of points colored by origin, with tooltips displaying car names. The code loads automobile data from a CSV file via d3.csv and uses Vega-Lite’s declarative mark and encoding methods to specify the chart, which is then rendered to SVG with Vega. Appearance is customized through a configuration object, and the chart is sized to fit the browser window.

CChiedu Egbumokei Jr
85% match
Loading thumbnail…

Vega-Lite API Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg CSV dataset, showing the relationship between horsepower and origin on x and y axes. Each point represents a car model, with tooltips revealing the car name. Built with Vega-Lite API in conjunction with d3.csv for data loading, the visualization uses vega and vega-lite for chart specification, vega-tooltip for interactive hover details, and applies custom styling through a config object to adjust axis and label appearance.

CCaroline Ghisolfi
84% match
Loading thumbnail…

cars_scatter_plot

This scatter plot visualizes relationships among automobile characteristics from the auto-mpg dataset, plotting displacement against horsepower while encoding vehicle weight through point size and model year through color. Tooltips reveal car names on hover. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite, and loads data asynchronously via d3.csv. The chart renders responsively using an SVG renderer with the vega-tooltip Handler for interactive annotations.

Ggoldpot
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between automobile horsepower, fuel efficiency, and origin using the Vega-Lite API, rendered with D3.js. Data from the auto-mpg.csv dataset is fetched via `d3.csv` and displayed as semi-transparent circles, where the x-axis encodes origin, the y-axis encodes horsepower, color distinguishes origin, and size maps to miles per gallon. The code builds the visualization by chaining `vl.markCircle()` and encoding methods, then applies a custom config for axes and typography, with tooltips enabled through the Vega-Tooltip handler.

CCatalina Vajiac
82% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car origin and horsepower using a scatter plot. It renders points from the auto-mpg dataset, with each point colored by origin and positioned by horsepower. The visualization is built with the Vega-Lite API, which constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously via the d3.csv function, and tooltips display car names on hover. The code customizes the chart’s appearance through a config object, setting fonts and axis styles, and uses a dark color for text.

Sseanmdalrymple@protonmail.com
82% match
Loading thumbnail…

Cars Scatter Plot w/ Vega Lite API

This example presents a scatter plot of automobile data from a CSV file, showing the relationship between vehicle weight, horsepower, and origin, with point size mapped to miles per gallon. It uses the Vega-Lite API to declaratively define the chart’s encoding, including tooltips that reveal each car’s name. The code integrates Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip via d3.csv for data loading and a custom configuration for axis styling. The visualization renders as an SVG that fills the browser window, with points colored by origin and sized by fuel efficiency.

Hhunsingeruk@gmail.com
82% match
Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, visualizing vehicle attributes across model years. Each circle’s position encodes the year and horsepower, while its color differentiates the region of origin and its size reflects vehicle weight, with tooltips revealing model names. The visualization is built using the Vega-Lite API, where `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` are chained to define encodings. Data is loaded asynchronously via `d3.csv`, and the rendered SVG view is configured with custom axis styling and a tooltip handler from `vega-tooltip`.

JJoe Hutchins
82% match