Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 20, 2021

Created on Nov 20, 2021

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.

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

JJenna Hamza

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight and fuel efficiency (mpg) across a dataset of auto models, with each point represented as a semi-transparent circle. The color encoding maps weight values, and hovering reveals the vehicle name via tooltip. Built using the Vega-Lite API wrapped in a D3.js framework, it loads CSV data from a gist URL and renders an interactive scatterplot. The code uses `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` to define the chart, with a custom config adjusting axis and label styling.

Ddan815

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatterplot visualizes the relationship between fuel efficiency (mpg) and horsepower for vehicles from the UCI Auto MPG dataset, with point size encoding weight and color encoding origin. Built with the Vega-Lite API (vl.markCircle, vl.x, vl.y) and rendered through D3.js, it uses vega-tooltip for hover details and a custom config to style axes and labels. The chart spans the full viewport and updates dynamically on resize, demonstrating the Vega-Lite API’s programmatic chart construction within a D3 framework.

AAnne Lin

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

SS-Au-Zn

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with circles colored by region of origin and sized by vehicle weight. Built using the Vega-Lite API, it defines the visualization through method-chaining operations including `markCircle`, `encode`, and scale specifications. The example loads car data from the UCI Machine Learning Repository via d3’s `csv` function, and renders interactively with tooltips provided by the `vega-tooltip` Handler. Custom axis and label styling are applied through a shared configuration object.

Wweny1109

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, and weight for various car models, with the country of origin represented by color. Built using the Vega-Lite API, it loads data from the UCI Auto MPG dataset and renders circles with a fixed size and opacity. The visualization leverages `vl.markCircle` and `vl.encode` for encoding, while `window.innerWidth` and `window.innerHeight` determine the canvas size. The code uses `d3.csv` for data ingestion and a custom `config` for axis styling, with tooltips handled via vega-tooltip. The visualization is generated dynamically and appended to the document body.

HHgeginat

93% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot, with each car represented as a circle colored by weight and sized by miles per gallon. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the chart programmatically. Data is loaded from a CSV file via d3.csv, and the final SVG output is rendered to fill the browser window. Axis styling and tooltips are customized through the provided Vega-Lite config and the vega-tooltip handler.

CCurran Kelleher

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency by plotting miles per gallon against horsepower, with point size encoding weight and color distinguishing country of origin. Built using the Vega-Lite API and D3.js, it loads automotive data from the UCI Machine Learning Repository via a CSV file. The visualization is rendered as an SVG, configured with customized axis and label styling, and includes hover tooltips displaying vehicle names.

HHaowenWeiJohn

93% match