Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 19, 2023

Created on Apr 19, 2023

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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 visualization uses a scatter plot to explore the relationship between miles per gallon and horsepower in classic automobiles, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API on top of Vega-Lite and Vega, it loads auto-mpg data from the UCI Machine Learning Repository via D3's CSV loader. The chart renders as SVG, fitting the browser window, with tooltips enabled through the Vega Tooltip handler and custom axis styling for readability.

Ttopnep

94% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon and horsepower for automobiles, with color encoding by origin and interactive tooltips displaying car names. It uses the vega-lite-api to construct a circle mark scatter plot, which is then rendered and configured via Vega-Lite, Vega, and d3.csv for data loading. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, and the view auto-sizes to the window with custom axis and label styling.

Aakarki79

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28

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

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

94% match