Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published2🌍 Public

Last edited May 10, 2021

Created on May 10, 2021

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.

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

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

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 automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full browser window.

JJay M Gonzalez

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

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

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

This example visualizes automobile performance data from a CSV file, plotting acceleration against horsepower with points colored by origin and tooltips showing car names. The visualization is built using the Vega-Lite API (vl) with D3.js for data loading via the csv function. The code constructs a scatter plot with circular marks, customizes axis appearance through a config object, and renders the chart to fit the browser window using canvas-based rendering and Vega tooltip handlers.

MMarkvanHaperen

93% match