Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Mmmohatra
Last edited Mar 30, 2021
Created on Mar 27, 2021

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.

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 displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of auto MPG data, showing displacement on the x-axis and horsepower on the y-axis, with semi-transparent point markers to reveal data density. The visualization is built using the Vega-Lite API, which generates a Vega specification rendered as SVG via D3 v5. Data is loaded from a CSV file fetched from the UCI Machine Learning Repository. The code includes custom styling for axes and tooltips, and uses vega-tooltip for interactive hover details.

HHoosierExperienceDesigner
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays individual cars as points in a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis. The data comes from a CSV file, auto-mpg.csv, loaded via d3.csv. Built using the Vega-Lite API, the chart registers Vega, Vega-Lite, and Vega-Tooltip in index.js, then renders points with low opacity to reveal density. The visualization loads external scripts for Vega, Vega-Lite, the API wrapper, tooltip, and D3, and applies a custom config for axis styling and font sizes.

AAdriana Rodriguez Sanabria
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci
95% 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
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatterplot of auto-mpg data, plotting engine displacement against horsepower, with points colored by opacity and tooltips revealing car names. The code uses the Vega-Lite API integrated with D3.js (d3.v5) to fetch CSV data and render the chart via Vega. It loads the visualization libraries (vega, vega-lite) and configures custom axis and label styling. The chart resizes to fit the browser window and employs an opacity of 0.1 to handle overlapping points.

RReymond Mesuga
95% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatterplot of auto-mpg data, plotting engine displacement against horsepower, with points colored by opacity and tooltips revealing car names. The code uses the Vega-Lite API integrated with D3.js (d3.v5) to fetch CSV data and render the chart via Vega. It loads the visualization libraries (vega, vega-lite) and configures custom axis and label styling. The chart resizes to fit the browser window and employs an opacity of 0.1 to handle overlapping points.

RReymond Mesuga
95% match