Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 28, 2021

Created on Oct 28, 2021

This example visualizes the relationship between a vehicle's acceleration and its horsepower. Each point in the scatter plot represents a car model, with tooltips revealing the car's name. Built using Vega-Lite's API for declarative charting, the visualization loads auto-mpg.csv data via d3.csv. The chart is rendered to SVG with custom axis styling and configured to fit the browser window.

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 visualizes the relationship between car acceleration and horsepower using a scatter plot, with tooltips displaying car model names. Built with the Vega-Lite API, it registers Vega and Vega-Lite, then fetches automobile data from a CSV via d3.csv. The visualization uses semi-transparent filled points, custom axis styling, and a dark color scheme to improve readability, rendered as an SVG that fits the full browser window.

KKaitlyn Boyle

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration across 398 automobiles. Each point represents a vehicle, with tooltips displaying the car name on hover. The visualization uses the Vega-Lite API to construct a scatter plot, with D3’s csv loader fetching data from an external auto-mpg dataset. The chart dynamically sizes to the browser window and applies custom styling for larger axis labels and a dark color palette.

JJYK

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between acceleration and horsepower in auto-mpg.csv data using a scatter plot of points. It employs the Vega-Lite API (vl) to construct the visualization, with vega, vega-lite, and vega-tooltip handling rendering and tooltips. Data is loaded via d3.csv, and the chart is configured with custom axis and label styling in config.js. The visualization is rendered to a canvas, filling the browser window with a fit-based autosize.

Vvigneswaran009

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile performance data, using the Vega-Lite API to visualize the relationship between acceleration and horsepower for various car models. The visualization encodes each car as a point, with tooltips revealing the vehicle's name on hover. The code leverages the `vega-lite-api` library, which wraps Vega-Lite and Vega for declarative chart construction, and uses D3's `csv` function to fetch and parse the `auto-mpg.csv` dataset. The chart is configured with a dark theme and custom axis styling to improve readability, and it renders as an interactive SVG.

Kkevin-jake

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration for automobiles from the auto-mpg dataset. A scatter plot encodes acceleration on the x-axis and horsepower on the y-axis, with semi-transparent points to reveal density. The visualization is built using the Vega-Lite API in conjunction with D3’s `csv` loader to fetch data. Vega and Vega-Lite handle rendering, while vega-tooltip provides interactive hover details. The code customizes axis styling and removes chart domains for a cleaner appearance.

AAlejo Cortiñaz

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with acceleration on the horizontal axis and horsepower on the vertical axis. Each point represents a car model, and hovering reveals the car’s name via a tooltip. The visualization is built programmatically using the vega-lite-api library, which generates a Vega-Lite specification that Vega renders to SVG. Data is loaded from a CSV file via d3.csv, and the chart auto-fits the browser window. Axis styling is customized with a dark theme for improved readability.

Eelia-dot

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile acceleration against horsepower, with data from the UCI Machine Learning Repository's Auto MPG dataset. Built with D3.js, Vega, and Vega-Lite, the visualization configures axis styling and tooltips, displaying the data as a line mark with opacity and size set. The plot is generated through a JavaScript pipeline that fetches CSV data, registers the Vega-Lite API within a D3 environment, and outputs an SVG chart that fills the browser window.

OOluwatobi Samuel Akinola

93% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between acceleration and horsepower for vehicles from the auto-mpg dataset, with each point representing a car and a tooltip revealing its name. The visualization uses the Vega-Lite API to construct a scatterplot with configurable opacity and point size, rendered as an SVG. The code loads CSV data via d3.csv, registers the Vega-Lite API with Vega and the Vega-Tooltip handler, and fits the chart to the full browser window.

CCurran Kelleher

93% match