Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 7, 2022

Created on May 7, 2022

This example visualizes the Auto MPG dataset, showing a scatter plot of vehicle counts by country. The visualization uses Vega-Lite API to create circles with tooltips, sorted by country on the x-axis and number of vehicles on the y-axis. The code integrates vega, vega-lite, and d3.csv for data loading, with a custom config to style axis labels and titles. It renders SVG via the vega view, fitting the visualization to the full window size.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset using a scatter plot where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size representing vehicle weight. Hovering reveals the car’s name via tooltips. The visualization is built entirely with the Vega-Lite API, using the `vl.markCircle` and `vl.encode` methods to define the marks and channels. Data loading relies on `d3.csv`, while rendering is handled by Vega and Vega-Lite’s runtime, with custom axis styling configured through a dedicated config object.

Ssd2beatles

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Sseitzfab

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset, showing relationships between fuel efficiency, horsepower, weight, and country of origin through a scatter plot with adjustable point size and opacity. Built using the Vega-Lite API with D3.js for data loading, it fetches CSV data from a Gist, registers Vega and Vega-Lite specifications, and renders an interactive SVG chart with tooltips configured through the Vega-Tooltip handler.

Mmr.kijin.bang@gmail.com

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to construct an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The plot displays each car as a circle, with its position determined by miles per gallon and horsepower, while color encodes the country of origin and size reflects vehicle weight. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite specifications, and includes tooltips via vega-tooltip. Data is loaded through d3.csv, and the chart resizes to fit the browser window.

RRahel Gunaratne

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, with miles per gallon on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size reflecting vehicle weight. Tooltips reveal the car names. The code uses the Vega-Lite API (vl) configured with vega, vega-lite, and vega-tooltip, while d3.csv fetches the remote data. Custom axis and label styling is applied through a shared config object before the SVG view renders to fill the window.

MMuhammadAaqib137

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It visualizes vehicle horsepower against miles per gallon, with circle size encoding weight and color representing country of origin via a quantitative size encoding and a nominal color field. The visualization is built using the `vega-lite-api` library, which programmatically constructs the plot through chained method calls like `vl.x()`, `vl.y()`, and `vl.color()`, with data loaded via d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip for rendering and interactive tooltips, while a custom configuration adjusts axis styling for readability.

Ccynobill

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each point encodes the car’s country of origin by color and its weight by size, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and renders as an SVG. Data is loaded asynchronously via d3.csv, while the Vega Tooltip handler enables interactive inspection of individual data points.

Ppakoensi

92% 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 horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

YYedrup

92% match