Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 28, 2021

Created on Dec 28, 2021

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.

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

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

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

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile performance data, mapping acceleration and horsepower for individual car models, with tooltips revealing model names. The visualization is built programmatically using the Vega-Lite API, which constructs specifications rendered through Vega and Vega-Lite. Data is loaded from a CSV file using D3’s `csv` method, while the chart’s size adapts to the viewport. Appearance is customized via a configuration object, and the Vega Tooltip handler provides interactive hover details.

KKediBabasi

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

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automotive data maps acceleration on the x-axis against horsepower on the y-axis, with points colored by origin and sized by weight. A tooltip reveals car names on hover. The visualization is created programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders via SVG. It loads CSV data from a remote URL using d3.csv, applies custom axis and label styling from a separate config module, and fits the chart to the viewport.

Nnicklaus-roy

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

93% match