Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 8, 2023

Created on May 8, 2023

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV, mapping engine displacement and horsepower onto the x- and y-axes, with color encoding by origin and point size representing miles per gallon. It loads the data via `d3.csv` and builds the visualization with `vl.markPoint`, `vl.x`, `vl.y`, and other encoding functions, then renders to SVG using Vega and Vega-Lite, with a custom tooltip handler and configuration for improved readability.

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 uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing the relationship between engine displacement and horsepower. Each point represents a vehicle, with a tooltip displaying the car's name. The visualization leverages the Vega-Lite API to construct the mark and encoding specifications, while Vega and Vega-Lite handle rendering. The code loads the data using `d3.csv` from the `d3` library, applies custom styling through a configuration object, and uses the `vega-tooltip` handler for interactive hover details.

Aalliefeld

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing car names. The visualization relies on `vl.markPoint`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode quantitative fields, while the `config.js` file customizes axis and label styling for readability. Data is loaded asynchronously via `d3.csv`, and the chart is embedded using Vega, Vega-Lite, and Vega-Tooltip, with the output fitted to the full viewport.

AAshutosh5333

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from the auto-mpg CSV dataset, plotting displacement against horsepower with a tooltip revealing the car model. The visualization is built programmatically via `vl.markPoint` and encode methods, with the chart filling the browser window. Appearance is customized through a config object that removes axis domains and adjusts label styling, while `d3.csv` loads the data and a Vega Tooltip handler enables interactive hover details.

KKristopher Skelton

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot of automobile data, mapping miles per gallon and horsepower from a CSV dataset, with points colored by origin and sized by mpg. The visualization uses the Vega-Lite API (vl) to construct the chart declaratively, while D3.js fetches the data via `d3.csv`. Custom styling is applied through a Vega-Lite config for axis and label appearance. The code registers Vega and Vega-Lite with the API, renders to SVG, and integrates a tooltip handler for interactive exploration.

LLeandro Miguel Narciso

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data, mapping engine displacement to the x-axis, horsepower to the y-axis, and model year to color. The visualization is created programmatically via the `vl` API, with data loaded asynchronously from a remote CSV file using d3's `csv` function. The chart resizes to fit the browser window and includes a custom tooltip handler from Vega-Tooltip, while the `config` module customizes axis and label styling for improved readability.

Ddleoenri

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automotive data, showing the relationship between engine displacement and horsepower, with point size mapping to vehicle weight and color encoding the model year. A tooltip reveals the car name for each point. The visualization is built using the `vega-lite-api` library, which generates Vega-Lite specifications that are rendered via the Vega engine. Data is loaded from a CSV file using D3's `csv` function, and the chart is rendered as an SVG with a custom tooltip handler from `vega-tooltip`.

GGerasimos Katsagannis

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from an auto-mpg CSV file, plotting engine displacement against horsepower with points colored by opacity to reveal density. It uses the Vega-Lite API to construct a scatterplot, with D3’s `csv` loader fetching the data. The chart is rendered into an SVG via Vega’s view, configured with `vl.markPoint`, `vl.x`, and `vl.y` encodings, while a custom config adjusts axis and label styling for readability. Tooltips display car names on hover.

SSeolha Lee

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

94% match