Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template_DL

✓ Published0🌍 Public
Nnqu9DL
Last edited Mar 9, 2021
Created on Mar 9, 2021

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.

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 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
95% 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 for individual cars. Each circle’s color encodes the car’s origin, while its size represents weight; hovering reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which composes a scatter plot with a circle mark and quantitative scales. It loads CSV data via d3.csv, renders with SVG through Vega-Lite’s view, and applies custom axis and label styling from a shared configuration object.

Ssofiamourap
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the Auto MPG dataset, with color mapping to region of origin and point size encoding weight. Built with the Vega-Lite API, the visualization uses the `vl.markCircle` and `vl.encode` specifications to define the marks and channels, while `vl.x()` and `vl.y()` handle quantitative scales. Data is loaded asynchronously via D3’s `csv` function, and the chart is rendered with Vega, Vega-Lite, and Vega-Tooltip for interactive hover details.

AAakarshak Sthapak
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 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 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 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon and horsepower. Color encodes origin, while point size reflects vehicle weight, with tooltips revealing model names. Built using the Vega-Lite API and D3’s `csv` loader, it renders as an SVG via the vega-tooltip handler, dynamically fitting the viewport dimensions. Custom axis and label styling come from a shared config object, and the chart updates automatically when data loads.

Yyaron-lavi
93% match