Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 2, 2022

Created on Aug 2, 2022

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.

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 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 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 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.

TT-Reiser

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

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, acceleration, weight, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps horsepower to the x-axis and acceleration to the y-axis, with point size encoding weight and color distinguishing origin, while tooltips reveal car names. It is built with the Vega-Lite API (via `vl.markCircle` and `vl.encode`), configured through `config.js`, and loaded using D3’s `csv` function. The rendering pipeline combines Vega, Vega-Lite, and vega-tooltip, with the chart filling the browser window.

Hhenry c

93% match

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile acceleration, horsepower, and weight using an interactive scatter plot. Data from the UCI Auto MPG dataset is fetched as CSV via d3.csv, then rendered as circles over a dark-themed axis. The visualization leverages the Vega-Lite API (vl) with a custom config to stylize fonts and colors, while Vega-Tooltip provides hover details. The chart is dynamically sized to fit the browser window using window.innerWidth and window.innerHeight.

SSam Hege

93% match