Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 2, 2022

Created on Aug 2, 2022

This visualization displays the relationship between automobile acceleration, horsepower, and weight using an interactive scatter plot. Data from the UCI Auto MPG dataset is fetched as CSV via d3.csv, then rendered as circles over a dark-themed axis. The visualization leverages the Vega-Lite API (vl) with a custom config to stylize fonts and colors, while Vega-Tooltip provides hover details. The chart is dynamically sized to fit the browser window using window.innerWidth and window.innerHeight.

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 horsepower, acceleration, weight, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps horsepower to the x-axis and acceleration to the y-axis, with point size encoding weight and color distinguishing origin, while tooltips reveal car names. It is built with the Vega-Lite API (via `vl.markCircle` and `vl.encode`), configured through `config.js`, and loaded using D3’s `csv` function. The rendering pipeline combines Vega, Vega-Lite, and vega-tooltip, with the chart filling the browser window.

Hhenry c

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automotive data maps acceleration on the x-axis against horsepower on the y-axis, with points colored by origin and sized by weight. A tooltip reveals car names on hover. The visualization is created programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders via SVG. It loads CSV data from a remote URL using d3.csv, applies custom axis and label styling from a separate config module, and fits the chart to the viewport.

Nnicklaus-roy

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile acceleration against horsepower, with data from the UCI Machine Learning Repository's Auto MPG dataset. Built with D3.js, Vega, and Vega-Lite, the visualization configures axis styling and tooltips, displaying the data as a line mark with opacity and size set. The plot is generated through a JavaScript pipeline that fetches CSV data, registers the Vega-Lite API within a D3 environment, and outputs an SVG chart that fills the browser window.

OOluwatobi Samuel Akinola

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration across 398 automobiles. Each point represents a vehicle, with tooltips displaying the car name on hover. The visualization uses the Vega-Lite API to construct a scatter plot, with D3’s csv loader fetching data from an external auto-mpg dataset. The chart dynamically sizes to the browser window and applies custom styling for larger axis labels and a dark color palette.

JJYK

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

DDataFeast_71

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle horsepower, fuel efficiency (mpg), weight, and acceleration for a dataset of automobiles. It encodes weight as color and acceleration as circle size, with tooltips displaying car names. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, with data loaded asynchronously via D3’s `csv` function from an external URL. The chart is rendered in SVG using vega-tooltip for interactivity, while custom configuration adjusts axis appearance.

MMarmiya

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing the relationship between mpg, horsepower, origin, and weight. The visualization uses the Vega-Lite API to construct the chart, with d3.csv for data loading and a custom dark-themed configuration for improved readability. The marks are rendered as semi-transparent circles with size encoding weight, color encoding origin, and tooltips displaying car names, all fitted to the full viewport.

DDavid Oh

93% match