Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SSavenkov Igor
Last edited May 22, 2022
Created on May 22, 2022

This example presents a scatter plot of auto-mpg data, showing the relationship between the country of origin (as a categorical x-axis) and horsepower (as a quantitative y-axis), with tooltips displaying car names. The visualization is built using the Vega-Lite API, wrapped in a D3.js v5 context, and rendered with SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, then encoded through the `vl.markCircle` and `vl.encode` functions from the vega-lite-api library. The chart resizes to the full browser window and uses custom axis and label styling from a separate config file.

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

A scatterplot of auto-mpg data displays horsepower by country of origin, with each point’s size and opacity fixed. The visualization is built using the Vega-Lite API, which compiles specifications to Vega and renders to SVG within a D3 environment. Data is loaded via `d3.csv` from a remote gist, and interactive tooltips are enabled through `vega-tooltip`. The chart fills the browser window, with custom fonts and axis styling configured for readability.

SShashwat Kumar
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between a car's origin country and its horsepower, using the auto-mpg dataset. Each point is rendered as a large, semi-transparent circle, with size and opacity set to 9000 and 0.02 respectively. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite, and retrieves data from a CSV URL via d3.csv. The plot is fitted to the window size and includes a tooltip that displays the car's name on hover.

SSofffos
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a car's country of origin and its horsepower using a scatter plot. Each point represents a car, with opacity applied to reveal overlapping data points, and a tooltip displays the car's name on hover. The visualization is built using the Vega-Lite API, which generates a specification rendered to SVG via Vega and Vega-Lite. It loads the Auto MPG dataset from the UCI Machine Learning Repository using `d3.csv`, and customizes axis styling and tooltip appearance through a configuration object.

Ww.fukuyama@gmail.com
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset using a scatter plot where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size representing vehicle weight. Hovering reveals the car’s name via tooltips. The visualization is built entirely with the Vega-Lite API, using the `vl.markCircle` and `vl.encode` methods to define the marks and channels. Data loading relies on `d3.csv`, while rendering is handled by Vega and Vega-Lite’s runtime, with custom axis styling configured through a dedicated config object.

Ssd2beatles
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 the auto-mpg.csv dataset. It plots miles per gallon on the x-axis against horsepower on the y-axis, with points colored by country of origin and sized with a fixed 300-pixel radius at 50% opacity. The visualization is generated declaratively using `vl.markCircle`, `vl.x().fieldQ`, `vl.y().fieldQ`, and `vl.color().fieldN` to encode the quantitative and nominal fields, with tooltips showing car names. Data is loaded asynchronously via `d3.csv` before the chart is rendered into the DOM.

Aape-ape-ape
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

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.

Nnncis
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