Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 17, 2024

Created on Jun 17, 2024

This example visualizes the relationship between miles per gallon and horsepower across automobile models, with each point labeled by vehicle name via tooltips. It uses the Vega-Lite API to declaratively encode the scatterplot’s x- and y-axes with quantitative scales, while relying on D3’s CSV loader to fetch remote data. The visualization is rendered as SVG through Vega and Vega-Lite, with custom axis styling and a dark color scheme for readability. Vega Tooltip handles interactive hover details, and the chart auto-fits to 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 demonstrates the relationship between miles per gallon and horsepower for classic automobiles using a scatterplot with translucent points. The visualization loads data from a CSV file containing auto-mpg statistics and renders it through the Vega-Lite API, which is registered with Vega, Vega-Lite, and the vega-tooltip handler for interactive tooltips. The chart uses d3.csv to fetch and parse the data, while customizing axis styles and label formatting via the config object. The plot fills the entire viewport and includes tooltips displaying each vehicle’s name.

SSteven Pearce

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

Ggon araseon

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles, with points colored by region of origin. The visualization is built using the Vega-Lite API, which provides a declarative grammar for specifying charts, and is rendered as SVG via the Vega and Vega-Lite libraries. Data is loaded asynchronously using d3.csv from a GitHub-hosted auto-mpg dataset, and tooltips display vehicle names on hover. The chart is configured with custom axis styling and font sizes to improve readability.

JJamey Mccabe

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with points colored by origin and sized by mpg, using a tooltip to display car names. It employs the Vega-Lite API to declaratively define the scatterplot, registered with Vega and Vega-Lite, and renders it as SVG within a full-window layout. Data is loaded asynchronously from a CSV file using D3’s `csv` method, while the built-in Vega Tooltip handler manages interactive hover details. The configuration customizes axis styles and label fonts for improved readability.

Wwy2010344

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower across automobile models, with color mapping to the country of origin and point size encoding vehicle weight, and includes tooltips displaying model names. It uses the Vega-Lite API (vl) to declaratively define the scatter plot specification, with data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via d3.csv. The visualization is rendered through Vega’s and Vega-Lite’s JavaScript libraries, integrating the Vega Tooltip for interactive hover details, and applies a custom configuration for axis and label styling.

GGerasimos Katsagannis

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for various car models, with points colored by origin and sized by weight, based on the auto-mpg dataset. It is built using the Vega-Lite API (vl) with d3 for data loading, and uses vega-tooltip for interactive hover details. The view renders as SVG with a fixed point size and opacity of 0.6, and axes suppress zero scaling. The code registers Vega and Vega-Lite, applies a custom config for styling (removing axis domains, adjusting tick colors, and setting font sizes), and fits the chart to the window dimensions.

CChira Cezara Victoria

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for automobiles, with each point colored by origin and sized by horsepower. The visualization uses the Vega-Lite API in JavaScript to construct a circle mark with quantitative x and y encodings, along with color, size, and tooltip encodings. It loads data from a CSV file via `d3.csv` and renders as an SVG using the vega-lite-api library. Appearance is customized through a config file that adjusts axis and label styling for readability.

Bbryce-walsh

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead

93% match