Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 21, 2021

Created on Jun 21, 2021

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin using data from the UCI Auto MPG dataset. Scatter plots map miles per gallon and horsepower, while point size encodes vehicle weight and color distinguishes geographic origin. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses d3.csv for data loading. Custom axis styling and tooltips enhance readability, with the view rendered as an SVG that fits the full window.

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 miles per gallon, horsepower, vehicle weight, and origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes weight as point size and color as origin, with tooltips revealing car names. It is built with the Vega-Lite API, running through Vega and Vega-Lite rendering pipelines, and dynamically sizes the chart to the browser window. Data is loaded asynchronously via d3.csv, while a custom configuration adjusts axis and label styling.

Sstefanpullen

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset. The scatter plot encodes miles per gallon on the x-axis, horsepower on the y-axis, color by origin, and point size by weight. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG chart. Data is loaded asynchronously via D3’s `csv` function, while the visualization code uses `vl.markCircle`, `.encode`, and `vl.x().fieldQ()` to define the marks and scales.

Aakiannejad123

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency using a scatter plot of miles per gallon versus horsepower, colored by origin and sized by weight. A slider interactively filters the data to a single weight value, which updates the displayed points. The visualization is built with the Vega-Lite API, leveraging d3.csv for data loading from the UCI Auto MPG dataset, and uses vega-tooltip for hover details. Rendering is handled through vega.

AAnna Schierholz

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js to load CSV data and render interactive circles with tooltips. Point color encodes the vehicle’s country of origin, while point size reflects weight. The chart is configured to fill the browser window and uses custom axis and label styling for clarity. Data is fetched via d3.csv from a Gist-hosted CSV file.

JJasmine Ye Han

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower with points colored by origin and sized by miles per gallon. Built with the Vega-Lite API, it renders an interactive scatter plot using d3.csv for data loading and Vega-Lite’s markCircle encoding for graphical marks. The visualization uses a custom configuration to adjust axis styling, font sizes, and tooltip appearance, all rendered as SVG with dynamic width and height based on the viewport.

AAlex Gomes

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

CCecilia831

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency data from the UCI Machine Learning Repository's Auto MPG dataset, showing the relationship between miles per gallon, horsepower, and weight across different countries of origin. A scatter plot with semi-transparent circular marks encodes the quantitative axes and origin as color, while car weight determines point size. Built with the Vega-Lite API for D3, the visualization registers Vega and Vega-Lite with a tooltip handler, loads CSV data via `d3.csv`, and renders an interactive SVG fitted to the browser window. Custom configuration adjusts axis labels and tick marks for readability.

KKunkgg

95% match