Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
AAdriana Rodriguez Sanabria
Last edited Oct 12, 2021
Created on Oct 12, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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
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 visualization displays a scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point is rendered with low opacity to reveal density patterns, and hovering reveals the car’s name via tooltip. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the chart, with data loaded asynchronously via `d3.csv()` from a GitHub-hosted dataset. The code integrates Vega, Vega-Lite, and Vega-Tooltip, customizing axis styling through the `config` object.

Ffjvoris
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a vehicle. The plot uses semi-transparent, filled circles to show overlapping data density and includes hover tooltips revealing car model names. It is built using the Vega-Lite API, which wraps the Vega and Vega-Lite libraries, and loads the auto-mpg dataset via D3’s `csv` function. The visualization renders as an SVG, with custom configuration for axis styling and tooltip text.

AAlNahean
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
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, plotting engine displacement against horsepower, with each point representing a vehicle model. The visualization uses the Vega-Lite API template, which leverages the vega-lite-api library to construct the chart programmatically. The code loads data from a CSV file using d3's csv function, then renders the marks using Vega and Vega-Lite with SVG output. Tooltips are enabled via Vega-Tooltip, and the visualization dynamically sizes itself to fit the browser window.

JJay
95% match
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
94% match