Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 3, 2023

Created on Jan 3, 2023

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using data from an auto-mpg dataset loaded via D3’s `csv` function. It renders a scatterplot where each point’s position encodes mpg and horsepower, color encodes origin, and size encodes weight, with tooltips showing car names. The visualization is built declaratively with the Vega-Lite API (`vl.markPoint`, `vl.encode`), registered with Vega and Vega-Lite, and rendered in SVG with a customized dark theme and axis styling.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower for vehicles from the Auto MPG dataset, encoding weight as point size, origin as color, and car model name as a tooltip. It shows a scatter plot with a custom dark theme and enlarged axis labels. The visualization is built declaratively using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, while the data is fetched and parsed using D3’s `csv` function.

II'm Ronald

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight, horsepower, and fuel efficiency in a scatter plot, using a dataset of automobile specifications. The plot encodes weight on both the x-axis and color scale, while horsepower appears on the y-axis and miles per gallon determines point size. Built with the Vega-Lite API wrapped in D3.js, it renders as an SVG and includes interactive tooltips showing each car’s name. The code demonstrates programmatic chart construction through `vl.markCircle` and encoding methods, with a custom configuration adjusting axis styling and label fonts.

Wwzhang88

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and miles per gallon from the auto-mpg dataset. It renders a scatter plot using Vega-Lite’s API, with circle size mapped to mpg, color to weight, and tooltips showing car names. The code builds the chart via `vl.markCircle` and `vl.encode`, then renders it with `vega`, `vega-lite`, and `vega-tooltip`, using `d3.csv` to load the data and custom config to adjust axis styling.

MMarco Malvicini

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, exploring the relationship between miles per gallon, horsepower, and weight. Points are colored by origin and sized by weight, with hover tooltips displaying car names. Built with the Vega-Lite API, the code uses `vl.markCircle` and `vl.encode` to define the visualization, while `vl.x().fieldQ('mpg')` and `vl.y().fieldQ('horsepower')` map quantitative fields. The data loads via `d3.csv`, and the chart renders through the Vega-Lite API's `render()` method.

XXiyu Zhai

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

SSpuddy2884

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

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

94% match