Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Pparshwa30122002@gmail.com

Last edited Aug 13, 2024

Created on Aug 13, 2024

This example visualizes the relationship between miles per gallon and horsepower for automobiles from the UCI Auto MPG data set, with point color encoding the region of origin and point size encoding vehicle weight. A tooltip displays the car’s name and origin on hover. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and font sizes. Data is loaded via `d3.csv`, and the chart adapts to the full browser window using dynamic height and width, rendered as an SVG through vega-tooltip for interactivity.

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 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.

Ggon araseon

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

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

95% 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 circles colored by origin and sized by weight. Tooltips reveal additional attributes like vehicle name, cylinders, and acceleration. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in a fluent JavaScript interface, and renders via D3.js (v5) with dynamic width and height fitted to the browser window. Appearance is customized through a central config object that adjusts axis styles and label typography.

Pparshwa30122002@gmail.com

95% 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 as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It uses the Vega-Lite API to construct a scatter plot with circles, encoding mpg and horsepower as x and y axes, origin as color, and weight as size, with tooltips showing car names. The visualization is rendered in SVG via D3.js (d3.csv) and Vega-Lite, with a customized dark theme config and automatic sizing to fit the viewport.

Ddrandalldesign

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 example visualizes the relationship between miles per gallon, horsepower, and weight across cars from different origins, using the Auto MPG dataset from the UCI Machine Learning Repository. The visualization is built with the Vega-Lite API, which wraps Vega and Vega-Lite specifications in JavaScript. It renders a bar chart with semi-transparent bars colored by origin, sized by weight, and includes tooltips showing car names via `vega-tooltip`. The chart fits the full window size and uses a custom dark theme from an exported config object.

TTarul170720

94% match