Fork of Fork of Vega-Lite API Template

100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 3, 2023

Created on Dec 3, 2023

Forked from Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the 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 visualization uses the Vega-Lite API to render interactive scatter plots of the Auto MPG dataset from the UCI Machine Learning Repository. The code applies the Vega-Lite API’s `markCircle` and `encode` methods to map vehicle weight to the x-axis, horsepower to the y-axis, and miles per gallon to point size and color, with tooltips showing car names. It retrieves data via d3’s `csv` loader, registers the Vega and Vega-Lite libraries, and customizes axis styling through a separate config object. The visualization is built to fill the browser window entirely.

FFonda Irena Santoso

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of the Auto MPG data set from the UCI Machine Learning Repository. The plot encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses color for the car’s origin while point size represents weight. It loads CSV data via d3.csv and builds the chart with vl.markCircle and vl.encode. The Vega-Lite API is registered with vega, vega-lite, and vega-tooltip, and the chart is automatically fitted to the window size.

Nny2cali

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing each car as a circle positioned by its miles per gallon and horsepower, colored by its region of origin, and sized by its weight. The visualization is constructed using the Vega-Lite API, with the `vl` object building a mark-circle encoding that maps data fields to x, y, color, and size channels. The underlying code registers Vega and Vega-Lite, fetches the data via d3’s `csv` function, and uses a custom config to style axis labels and titles.

NNYY

91% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile characteristics from the UCI Auto MPG dataset, comparing fuel efficiency (mpg) against horsepower while encoding weight through point size and origin through color. The visualization is built using the Vega-Lite API, which programmatically constructs the specification through chained methods like `markCircle`, `encode`, and field mappings. It imports and registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches CSV data via `d3.csv`, and renders to SVG with custom styling for axis labels and tooltips.

BBrian Olczak

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circles encode car origin on the x-axis, horsepower on the y-axis, weight as color, and miles per gallon as size, with tooltips revealing car names. The visualization uses the vega-lite-api library to construct the specification programmatically, registering Vega and Vega-Lite for rendering in SVG. The code loads CSV data via d3.csv, applies custom axis and label styling from config.js, and adapts to the full window size.

NNick Jefford-Horn

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, encoding engine horsepower on the y-axis, miles per gallon on the x-axis, and using color to distinguish the vehicle origin with point size mapped to weight. The code builds the chart using the Vega-Lite API, registering Vega and Vega-Lite libraries alongside a tooltip handler. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that automatically fits the browser window, with custom axis and label styling defined in a separate config file.

SSkye Chen

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through color and MPG via point size. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, then renders an interactive SVG scatter plot that fits the full window. The code uses `vl.markPoint()` with `encode()` mappings and `vl.x().fieldN()`, `vl.y().fieldQ()`, and tooltip fields, pulling CSV data asynchronously via d3.csv. Custom axis and label styling configures the dark-on-light appearance for readability.

TTyr Chen

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

91% match