Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 5, 2022

Created on Nov 5, 2022

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

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 visualization displays the relationship between miles per gallon and horsepower for various car models, with points colored by origin and sized by weight, based on the auto-mpg dataset. It is built using the Vega-Lite API (vl) with d3 for data loading, and uses vega-tooltip for interactive hover details. The view renders as SVG with a fixed point size and opacity of 0.6, and axes suppress zero scaling. The code registers Vega and Vega-Lite, applies a custom config for styling (removing axis domains, adjusting tick colors, and setting font sizes), and fits the chart to the window dimensions.

CChira Cezara Victoria

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower across automobile models, with color mapping to the country of origin and point size encoding vehicle weight, and includes tooltips displaying model names. It uses the Vega-Lite API (vl) to declaratively define the scatter plot specification, with data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via d3.csv. The visualization is rendered through Vega’s and Vega-Lite’s JavaScript libraries, integrating the Vega Tooltip for interactive hover details, and applies a custom configuration for axis and label styling.

GGerasimos Katsagannis

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles, with points colored by region of origin. The visualization is built using the Vega-Lite API, which provides a declarative grammar for specifying charts, and is rendered as SVG via the Vega and Vega-Lite libraries. Data is loaded asynchronously using d3.csv from a GitHub-hosted auto-mpg dataset, and tooltips display vehicle names on hover. The chart is configured with custom axis styling and font sizes to improve readability.

JJamey Mccabe

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to display the relationship between miles per gallon and horsepower for vehicles from the Auto MPG dataset, with color indicating origin and dot size representing weight. Built with the Vega-Lite API, it loads data via `d3.csv` from a remote URL and uses custom configuration for axis styling. The visualization also incorporates the `vega-tooltip` handler for interactive hover details, and the chart automatically fits the browser window dimensions.

SShasvathan Pathmanaban

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays relationships among automobile characteristics from the UCI Auto MPG dataset, encoding miles per gallon and horsepower on the axes, origin as color, and weight as point size. Built with Vega-Lite's API wrapper, the code uses `vega-lite-api` to construct a circular mark encoding specification, then renders interactively through Vega and Vega-Lite. The visualization includes tooltips for car names, styled with custom axis and label configuration for improved readability.

Vvigneswaran009

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s horsepower against its miles-per-gallon. Points are colored by country of origin, with size encoded by vehicle weight, and tooltips reveal the car’s name. The visualization is built using the Vega-Lite API (vl) with a custom config for axis styling, and rendered dynamically to fit the browser window. Data is loaded asynchronously via d3.csv, while Vega, Vega-Lite, and Vega-Embed handle the chart specification and SVG rendering.

VVilmer98

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for various car models, with color encoded by region of origin and point size representing vehicle weight. Hovering reveals the car's name via tooltip. Built using the Vega-Lite API, the visualization programmatically constructs the chart through method chaining in `viz.js`, then renders it with Vega and Vega-Lite. Data is loaded asynchronously from a CSV in `getData.js` using `d3.csv`, and custom axis and label styling is applied from `config.js`.

GGunjan Paul

94% match