Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template-- faizal

✓ Published0🌍 Public
Ffaizalmunna
Last edited Jul 28, 2021
Created on Jul 27, 2021

This visualization uses the Vega-Lite API to render a scatterplot of automobile data from an auto-mpg CSV dataset, with displacement on the x-axis and horsepower on the y-axis. Each point is semi-transparent blue, and hovering reveals the vehicle name via tooltips. The code registers Vega-Lite with D3’s CSV loader, applies custom axis and label styling from a config object, and dynamically sizes the chart to the window. It demonstrates the vega-lite-api library’s programmatic specification-building approach.

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
92% 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
91% 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
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This point-based scatter plot visualizes the relationship between engine displacement and horsepower for various automobile models. Built with the Vega-Lite API and rendered through D3, it displays data from a CSV file of auto-mpg statistics, with each point representing a vehicle name revealed via tooltip. The visualization uses a semi-transparent point mark, custom config for axes and labels, and automatically sizes to fit the browser window.

MMuhammad Faizan Khurshid
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto-mpg data, showing the relationship between fuel efficiency and horsepower. Each point represents a car, with its origin encoded by color and weight by size. The tooltip displays the car's name and displacement. The example uses the Vega-Lite API to construct the visualization, which is then rendered by Vega with a custom configuration for improved readability. Data is loaded from a CSV file using d3.csv, and the plot fills the browser window with a responsive layout.

MMuhammadAaqib137
91% 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
91% 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
91% 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
91% match