Vega-Lite API Scatter Plot

100%

Vega-Lite API Scatter Plot

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 26, 2023

Created on Jul 26, 2023

This example displays a scatter plot of product brands against their costs, with tooltips revealing product names and size and opacity encoding additional data dimensions. Built with the Vega-Lite API, it uses the `vl` wrapper to define the visualization, registering Vega and Vega-Lite under the hood. The code loads D3 via UNPKG, fetches CSV data using `d3.csv`, and renders the chart as an SVG. The visualization integrates a custom tooltip handler and a configuration object that adjusts tick colors, font sizes, and removes axis domain lines for a cleaner appearance.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, mapping engine displacement to horsepower and coloring points by model year. The visualization is built programmatically by registering Vega-Lite with the `vl` API, fetching data via `d3.csv`, and applying custom axis and label styling from a config object. The chart is rendered as an SVG, with tooltips enabled through Vega Tooltip to display car names on hover.

CCurran Kelleher

83% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher

83% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, mapping engine displacement to horsepower with circle color encoding model year and size encoding vehicle weight. Tooltips reveal car names on hover. It is built using the Vega-Lite API, a programmatic wrapper for the Vega-Lite grammar, with data loaded from a CSV via D3's `csv` function and rendered as SVG through the bundled Vega and Vega-Lite libraries. The visualization spans the full viewport and applies custom axis and label styling.

AAlice Hua

83% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, with each car’s origin encoded by color and weight by point size. The visualization is built using the Vega-Lite API, which abstracts the declarative Vega-Lite specification into a programmatic interface, and renders through Vega’s SVG engine. Data is loaded asynchronously via D3’s `csv` function, and a custom tooltip is attached using the Vega-Tooltip `Handler` class. The chart’s axes and labels are styled through a custom Vega-Lite configuration object.

Llok noe

82% match

Loading thumbnail…

Vega-Lite API Example

This example uses the Vega-Lite API to create a scatter plot of automobile data from a CSV file. The visualization encodes miles per gallon, horsepower, origin, and weight into position, color, and size, with a tooltip revealing the car name. It leverages vega-lite-api, vega, and vega-lite to generate an SVG chart, and d3.csv for data loading. The chart uses overlaid translucent circles and a custom config to improve label readability.

Bbakstorage00001

82% match

Loading thumbnail…

Vega-Lite API - scatter plot

This example demonstrates a scatter plot of vehicle data using the Vega-Lite API, showing the relationship between miles per gallon and horsepower across different car origins, with point size encoding weight and tooltips displaying car names. The visualization leverages `vl.markCircle` with opacity for density perception, and custom scales that avoid zero-based axes. It loads CSV data from a GitHub gist via d3.csv, then renders to SVG using Vega and Vega-Lite with a dark-on-light custom config. The code registers vega-tooltip for interactive hover labels and uses d3.v5.

Kkatjur01

82% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing each vehicle’s name. It uses the Vega-Lite API to declaratively define the marks and encodings, registering with Vega and Vega-Lite for rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while the chart’s size adapts to the browser window. Configuration customizes axis and label styling, and Vega-Tooltip provides interactive hover information.

Llaplantalaplanta

82% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between horsepower and country of origin, with tooltips revealing car names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through method chaining (e.g., `vl.markPoint`, `vl.x().fieldN`). The code registers Vega, Vega-Lite, and the Vega-Lite API in a D3 v5 environment, fetches CSV data via `d3.csv`, applies custom axis and label styling from a separate config module, and renders to SVG with an interactive tooltip handler from Vega-Tooltip.

PPriteshlip10

82% match