Bagaski's Fork of Vega-Lite API Template

100%

Bagaski's Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 27, 2021

Created on Jun 27, 2021

This example uses Vega-Lite API to create a scatter plot of Automobile MPG data from the UCI Machine Learning Repository. The visualization displays vehicles as points, mapping year to the x-axis, origin to the y-axis, and weight to point size, with color encoding origin. It uses `vl.markPoint`, `vl.x()`, `vl.y()`, `vl.color()`, `vl.size()`, and `vl.tooltip()` to construct the chart, rendered as SVG via the `vega` and `vega-lite` libraries. The code customizes axis and label styling through a config object, and loads data with `d3.csv` from a remote Gist.

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 shows a scatter plot of auto-mpg data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded asynchronously via d3.csv, and the chart encodes tooltips for vehicle names. The code customizes axis and font styles through a config file, demonstrating programmatic chart creation with the vega-lite-api wrapper.

Hhbatteram

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository, showing the relationship between MPG and horsepower. Each point is colored by origin, sized by weight, and includes a tooltip revealing the vehicle name. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to declaratively encode the marks. Data is loaded asynchronously via D3's `csv` function, and the chart is rendered with a custom configuration that adjusts axis and label styling.

Mme-as-a-web-designer

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to build an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a Gist. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and colors points by origin, while point size reflects vehicle weight. It renders as a full-window SVG using the vega-lite-api library, with tooltips generated through vega-tooltip. Custom configuration in config.js adjusts axis and label styling for readability. The code loads data asynchronously via d3.csv, applies a dark theme, and fits the chart to the viewport dimensions.

MMatt Woods

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, sourced via a Gist CSV. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, colors points by origin, scales size by weight, and adds tooltips for vehicle names. It registers Vega, Vega-Lite, and the vega-lite-api library, then loads the data with d3.csv, applies a custom dark-themed config for axis styling, and fits the chart to the window dimensions.

SShaneBowen1

90% 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, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API and D3 to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization shows miles per gallon against horsepower, with color encoding for origin and point size representing vehicle weight. Hovering over a point reveals the car’s name via a tooltip. The code constructs the chart declaratively with `vl` from vega-lite-api, loads data using `d3.csv`, and renders to SVG with vega-lite and vega-tooltip.

Rrmgoldberg24

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

90% match