Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 2, 2021

Created on Oct 2, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Jjames.haarbauer@dunya-analytics.com

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_DL

This visualization shows the relationship between miles per gallon and horsepower for cars from the auto-mpg dataset, with points colored by origin. It uses the Vega-Lite API to construct a circle mark with quantitative scales for both axes, and includes a tooltip displaying car names. The code loads CSV data via d3.csv, applies custom styling through a configuration object, and renders the chart as SVG using Vega, Vega-Lite, and the vega-lite-api library.

Nnqu9DL

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles from the UCI Auto MPG data set, with point color encoding the region of origin and point size encoding vehicle weight. A tooltip displays the car’s name and origin on hover. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and font sizes. Data is loaded via `d3.csv`, and the chart adapts to the full browser window using dynamic height and width, rendered as an SVG through vega-tooltip for interactivity.

Pparshwa30122002@gmail.com

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to display the relationship between miles per gallon and horsepower for vehicles from the Auto MPG dataset, with color indicating origin and dot size representing weight. Built with the Vega-Lite API, it loads data via `d3.csv` from a remote URL and uses custom configuration for axis styling. The visualization also incorporates the `vega-tooltip` handler for interactive hover details, and the chart automatically fits the browser window dimensions.

SShasvathan Pathmanaban

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template2

This visualization displays automobile performance data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual car models. Points are colored by region of origin and sized according to vehicle weight, with tooltips revealing model names. The implementation uses the Vega-Lite API combined with Vega and Vega-Lite libraries, with D3’s `csv` function loading the dataset. The chart is configured for full-window rendering, with axis styling and dark text customized in the configuration file.

VVictor Henriquez

92% match