Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Pparsonsdjp
Last edited Dec 26, 2022
Created on Dec 26, 2022

This scatter plot visualizes the relationship between engine displacement, acceleration, and weight for various car models, with color encoding for cylinder count. The visualization is built using the Vega-Lite API, a high-level grammar for declarative graphics, which is registered with the underlying Vega and Vega-Lite rendering engines. Data originates from the UCI Machine Learning Repository's Auto MPG dataset, loaded via d3's csv function. The chart renders as an SVG, and includes interactive tooltips via the Vega-Tooltip library, with custom styling applied through a configuration object.

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 engine displacement and vehicle weight using a scatter plot of the auto-mpg dataset. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an interactive SVG chart. Points are styled with size, opacity, and tooltips showing car names, while the chart automatically fits the window dimensions. Data loading uses D3's `csv` function, and appearance is customized through a reusable configuration object that adjusts axis labels, titles, and tooltip styling.

Llingfa
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot displays the relationship between engine displacement, horsepower, and weight for various car models, with points colored by model year and labeled with car names via tooltips. It uses the Vega-Lite API with Vega and Vega-Lite libraries, pulling auto-mpg data from a CSV file. The visualization is rendered as an SVG, with custom styling for axis labels and tooltips configured through `config.js`.

NNikhilchiguru-8
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement, horsepower, and color-coded weight for automobiles from the auto-mpg dataset. It uses the Vega-Lite API to declare a scatterplot with points sized and colored by weight, and includes tooltips showing vehicle names. The visualization is generated through Vega-Lite API’s `vl` object, registered with Vega and Vega-Lite, and renders as an SVG fitted to the window. Data is loaded via `d3.csv`, with customization handled through a config object for axis and label styling.

NNaitik Pitroda
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot correlated with car weight and horsepower reveals relationships between vehicle attributes for the Auto MPG dataset from UCI. The visualization encodes engine displacement, acceleration, and origin via point size, color, and tooltip. Built with the Vega-Lite API, the code uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to map quantitative fields, while `vl.color().fieldN()` applies categorical coloring. Data loads asynchronously via d3.csv from a Gist URL, and the view renders dynamically to the window size.

EElif Altundag
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot displays the relationship between engine displacement and horsepower for a collection of automobiles, with each circle’s area scaled by vehicle weight. The visualization is rendered using the Vega-Lite API, a programmatic wrapper around Vega-Lite and Vega, with tooltips supplied by the vega-tooltip library. Data is loaded as CSV from a remote source using d3.csv, and the plot’s axis styles and dimensions are customized via a configuration object.

NNikhilchiguru-8
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting engine displacement against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders an SVG chart via the vega-tooltip handler for interactive tooltips. Data is loaded asynchronously with d3.csv from a Gist, while the chart encodes quantitative fields for axes and sizes. The code also applies a custom configuration for axis styling and font readability.

AAD-W99
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for various car models, with tooltips revealing the car's name on hover. Built with the Vega-Lite API, it renders as SVG and automatically fits the browser window. The visualization loads the auto-mpg.csv dataset from a GitHub gist, applies custom axis and label styling, and uses semi-transparent square marks to represent data points, revealing overlapping clusters.

DDeepak Tomson
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses a scatter plot to explore the relationships among automobile performance metrics, including engine displacement, horsepower, weight, and origin. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and is rendered via Vega. It loads the auto-mpg dataset using D3’s `csv` function, then encodes the data with size and color channels. The chart is configured for full-screen display with custom axis and label styling from a separate config file, and includes a tooltip showing the car name.

Wweny1109
92% match