Fork of Vega-Lite API Template 2

100%

Fork of Vega-Lite API Template 2

✓ Published0🌍 Public

Last edited Jun 2, 2024

Created on Jun 2, 2024

This example plots vehicle acceleration against horsepower from the auto-mpg dataset, using Vega-Lite API to construct a scatterplot and D3 to load the CSV data. Each point represents a car, with tooltips revealing the model name on hover. The visualization applies custom axis styling and dark text colors from a config file, and renders responsively to fill the browser window. It demonstrates the Vega-Lite API’s declarative mark specification and encoding methods, such as `vl.markPoint()`, `vl.x().fieldQ()`, and `vl.tooltip().fieldN()`, with Vega tooltips enabled.

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

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 renders a scatter plot of automobile data from the `auto-mpg` dataset, mapping acceleration on the x-axis and horsepower on the y-axis, with tooltips revealing vehicle names. It demonstrates programmatic chart construction using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`) within a D3 v5 async data-loading pipeline (`d3.csv`). The visualization is compiled through `vega-lite` and rendered as SVG via the `vega` view, with custom axis styling and tooltip handling from `vega-tooltip`.

Bbillmccabeusa@hotmail.com

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

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile characteristics from the auto-mpg dataset, plotting acceleration on the x-axis against horsepower on the y-axis, with color encoding car weight and tooltips revealing model names. The visualization is constructed programmatically using the Vega-Lite API through its JavaScript bindings, with `vl.markPoint()` defining the marks and `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` specifying the encodings. Data is loaded asynchronously with `d3.csv()` from a GitHub gist, while Vega and Vega-Lite render the SVG output, supported by `vega-tooltip` for interactive hovering and a custom configuration that enlarges fonts and removes axis domains for readability.

JJar-Jar-Blings

92% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between a car’s acceleration and horsepower from the classic Auto MPG dataset, plotting each vehicle as a point with a tooltip that reveals its name. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot via `vl.markPoint`, `vl.x().fieldQ('acceleration')`, and `vl.y().fieldQ('horsepower')`. Data is loaded asynchronously with D3’s `csv` function from a GitHub gist, while the chart is rendered to SVG and wrapped with interactive tooltips from `vega-tooltip`. The appearance uses custom config for larger fonts and lighter grid lines.

Bbakstorage00001

92% match