Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This visualization uses a scatter plot to explore the relationship between the year and electronic sales, with each point colored by item type. The Vega-Lite API constructs a circle mark with a tooltip that reveals the item name on hover. Data is loaded asynchronously via D3’s `csv` function from a Gist-hosted ElectronicSales dataset. The rendering pipeline leverages the Vega and Vega-Lite libraries, with a custom config to adjust font sizes and axis styles, while Vega-Tooltip provides interactive hover details.

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…

ICE-7 Scatter Plot 1

This scatter plot visualizes electronic sales data, showing the relationship between Year and Electronicsales, with points colored by Item type and tooltips revealing item names on hover. The visualization uses Vega-Lite’s API to encode quantitative fields on both axes, with zero-scaled domains for clearer trends. Data loads from a remote CSV file via d3.csv, while the chart renders in SVG using Vega’s renderer. Custom configuration adjusts axis tick colors, label font sizes, and tooltip styling to improve readability. The plot fills the entire viewport, adapting to window dimensions with a fitted autosize strategy.

SSaiSree0122

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with each circle representing a vehicle based on its miles per gallon, horsepower, origin, and weight. The visualization uses the Vega-Lite API within a D3.js context to render interactive SVG graphics. It loads a CSV dataset from a GitHub gist and applies custom encoding for position, color, and size, while tooltips reveal vehicle names. The code integrates vega, vega-lite, vega-lite-api, and vega-tooltip libraries, with the figure automatically fitting the browser window.

TTylerSaikaleyTheriault

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

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between engine displacement and horsepower in a dataset of automobiles, with tooltips revealing the model name of each point. Built with the Vega-Lite API and Vega-Lite 4.0, it renders points as semi-transparent circles with a custom dark theme and large axis labels. The code loads data from a CSV file via D3’s `csv` method, configures the chart through Vega-Lite’s JavaScript API, and uses Vega Tooltip for interactive hover details.

JJaswitha09

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, colored semi-transparently to reveal data density, with tooltips displaying car names. It uses the Vega-Lite API to construct the visualization declaratively, while D3.js handles CSV loading from an external dataset via `d3.csv`. The chart is rendered as an SVG, with custom configuration for axis styling and typography. The code registers Vega-Lite with the Vega runtime and integrates Vega-Tooltip for interactive hover details.

VVishwanath Hegde

81% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

81% match

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

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra

81% match