Vega-Lite API Template with HW1

100%

Vega-Lite API Template with HW1

✓ Published0🌍 Public

Last edited Oct 6, 2023

Created on Sep 24, 2023

This visualization displays relationships among physical characteristics and weight class for a collection of vehicles, using data from the UCI Auto MPG dataset via a Gist. Each point represents an individual vehicle, with its attributes mapped to the x and y axes, while color encodes a categorical variable. The chart is built with the Vega-Lite API, running on top of Vega-Lite, Vega, and D3. The code defines a scatter plot using `vl.markCircle`, with custom axis and label styling configured in a separate `config.js` file.

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…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot maps vehicle weight to the x-axis and horsepower to the y-axis, with point size representing miles per gallon and color encoding weight. The visualization loads data via `d3.csv` and uses the `vl.markCircle` and `vl.encode` API to define the marks and channels. Vega-Lite and Vega are registered through the `vl.register` function, and interactivity is added with `vega-tooltip`.

CCyc-Evelyn

91% match

Loading thumbnail…

Vega-Lite API Template

This gallery example demonstrates relationships among vehicle attributes in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot displays miles per gallon on the x-axis and horsepower on the y-axis, with circles colored by country of origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data loading uses d3.csv, while the vega-tooltip Handler enables interactive hover details showing the car model name.

EElvira Nassirova

90% match

Loading thumbnail…

Vega-Lite API Template (1)

This visualization shows a scatter plot of automobile data from the UCI Auto MPG dataset, plotting population against horsepower with point size scaled by weight. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through JavaScript calls like `vl.markPoint()` and `vl.x().fieldQ()`. It loads data asynchronously via `d3.csv`, applies a custom configuration for axis styling, and renders to SVG with interactive tooltips powered by `vega-tooltip`. The visualization fills the browser window and auto-fits its dimensions to the viewport.

AAndres de la Garza

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

90% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

90% match

Loading thumbnail…

Vega-Lite API Template Cars

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting acceleration against horsepower while encoding weight through circle size and origin as color. Hovering reveals vehicle names via tooltips. The code uses the Vega-Lite API to construct the scatter plot declaratively, with D3’s `csv` loader fetching the remote dataset, and renders through Vega’s SVG output. Custom axis and label styling come from a shared config object.

Ddrc6587

90% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot displays automobile origin, horsepower, and weight, with each point sized and colored by weight and tooltips revealing model names. The visualization uses the Vega-Lite API (`vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`) to construct a declarative spec, rendered as SVG via Vega-Lite and Vega. Data loads from a CSV of the Auto MPG dataset, and a custom config adjusts axis styling and font sizes. The example demonstrates programmatic chart building, programmatic width/height fitting, and tooltip integration via the `vega-tooltip` Handler.

Mmiklud

90% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. The visualization uses the Vega-Lite API to declaratively define a markCircle with quantitative scales, color-encoding by country of origin, and tooltips displaying vehicle names. Rendered as an SVG, the chart supports interactive tooltips through vega-tooltip and d3.csv for asynchronous data loading, with a custom config for axis styling and fonts.

Aahora

90% match