Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Nnncis
Last edited Sep 20, 2023
Created on Sep 20, 2023

This visualization uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg CSV dataset. It plots horsepower against origin, with each point sized and colored by its country of origin, and includes tooltips showing vehicle names. The code registers Vega-Lite with Vega and D3, loads data via d3.csv, and configures axes and label styling for improved readability. The plot fills the entire browser window, with rendering handled through Vega’s SVG view and interactivity powered by vega-tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatterplot of automobile data, mapping weight to the x-axis and horsepower to the y-axis, with color encoding for country of origin and point size reflecting miles per gallon. Tooltips display the vehicle name. The code uses the Vega-Lite API, registering vega and vega-lite libraries, and loads CSV data asynchronously via d3.csv from a gist URL. Config settings customize axis and label appearance, while the view is rendered as SVG with fit sizing to the window.

Ddanielscheeper@gmail.com
94% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping miles per gallon against horsepower. Points are colored by country of origin and scaled in size by vehicle weight, with tooltips showing car model names. The example demonstrates the vega-lite-api library, which provides a JavaScript interface for building Vega-Lite specifications, combined with Vega and vega-lite for rendering. Data is loaded asynchronously via d3.csv from a remote CSV file containing auto-mpg statistics. The visualization uses SVG rendering, custom axis styling from a config object, and adjusts to fill the browser window.

Ssuserocc
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

YYing-Liu21
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto MPG data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin and sized by horsepower. The code calls on `vega-lite-api`, `vega`, `vega-lite`, `vega-tooltip`, and `d3` to render the plot. It loads data from the UCI Machine Learning Repository’s Auto MPG dataset via a CSV URL using `d3.csv` and applies a customized configuration for darker text and styled axes for readability.

EErico103
94% match