Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 24, 2023

Created on Feb 24, 2023

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.

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 engine displacement and vehicle weight using a scatter plot of the auto-mpg dataset. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an interactive SVG chart. Points are styled with size, opacity, and tooltips showing car names, while the chart automatically fits the window dimensions. Data loading uses D3's `csv` function, and appearance is customized through a reusable configuration object that adjusts axis labels, titles, and tooltip styling.

Llingfa

95% match

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot displays the relationship between engine displacement, horsepower, and weight for various car models, with points colored by model year and labeled with car names via tooltips. It uses the Vega-Lite API with Vega and Vega-Lite libraries, pulling auto-mpg data from a CSV file. The visualization is rendered as an SVG, with custom styling for axis labels and tooltips configured through `config.js`.

NNikhilchiguru-8

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting miles per gallon against horsepower, with weight encoded as color. The visualization is built using the Vega-Lite API, which is programmatically assembled in JavaScript via `vl.markPoint`, `vl.x`, `vl.y`, and `vl.color`. Data is loaded asynchronously from a CSV file using `d3.csv`. The chart renders as SVG with a custom dark theme and tooltips provided by `vega-tooltip`.

Aaniosindustries

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset using a scatter plot where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size representing vehicle weight. Hovering reveals the car’s name via tooltips. The visualization is built entirely with the Vega-Lite API, using the `vl.markCircle` and `vl.encode` methods to define the marks and channels. Data loading relies on `d3.csv`, while rendering is handled by Vega and Vega-Lite’s runtime, with custom axis styling configured through a dedicated config object.

Ssd2beatles

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between vehicle weight and horsepower. Each circle’s position encodes these quantitative fields, while color represents the country of origin and size encodes miles per gallon (mpg). Hovering reveals the car’s name via a tooltip. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega, and uses d3.csv to load the auto-mpg dataset. The code configures axes, scales, and styling through the vega-lite-api’s fluent method chaining.

GGuus Lammers

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatterplot of automotive data, showing the relationship between engine displacement and horsepower, with points colored by production year and sized according to vehicle weight. Built using the Vega-Lite API, the chart defines visual encodings through a fluent API, mapping quantitative fields to x and y axes, an ordinal temporal field to color, and another quantitative field to point size. The data is loaded asynchronously from a CSV file using d3’s `csv` function, and custom configuration settings adjust axis tick colors, font sizes, and label styling for improved readability. The resulting SVG render is generated via Vega-Lite’s rendering pipeline, with tooltips enabled through the vega-tooltip handler.

RRuibone

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses a scatter plot to explore the relationships among automobile performance metrics, including engine displacement, horsepower, weight, and origin. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and is rendered via Vega. It loads the auto-mpg dataset using D3’s `csv` function, then encodes the data with size and color channels. The chart is configured for full-screen display with custom axis and label styling from a separate config file, and includes a tooltip showing the car name.

Wweny1109

93% match