Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 7, 2021

Created on Jul 7, 2021

This example displays a scatterplot of automobile data, mapping miles per gallon and horsepower from a CSV dataset, with points colored by origin and sized by mpg. The visualization uses the Vega-Lite API (vl) to construct the chart declaratively, while D3.js fetches the data via `d3.csv`. Custom styling is applied through a Vega-Lite config for axis and label appearance. The code registers Vega and Vega-Lite with the API, renders to SVG, and integrates a tooltip handler for interactive exploration.

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

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting miles per gallon against horsepower, with tooltips revealing car names. It renders using the Vega-Lite API, which compiles specifications to Vega and renders to SVG. The code loads the auto-mpg dataset via `d3.csv`, configures axis and label styling, and fits the visualization to the window. Custom styling includes removing axis domains and settings for guide labels and titles.

TTung Pham

96% match

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data from 1980, plotting miles per gallon against horsepower, with each point colored by origin and sized by weight. The visualization is built using the Vega-Lite API (vl) with a custom configuration that removes axis domains and enlarges label and title fonts. Since it is a fork of an API template, it loads data from a CSV file using `d3.csv`, then renders the marks with `vl.markCircle`, encoding position, color, size, and tooltip fields directly in `viz.js`. The view resizes to the window and includes a tooltip handler from Vega Tooltip.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

YYing-Liu21

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto MPG data, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color for the car’s origin and size for weight, with tooltips revealing car names. The visualization is built with the Vega-Lite API, which compiles specifications to Vega, and rendered via D3 v5. It loads CSV data from the UCI Machine Learning Repository and customizes axis and label styling through a configuration object.

Ddimanya

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset, showing the relationship between miles per gallon and horsepower for various car models. Points are colored by origin and sized by weight, with tooltips revealing the car name. The visualization is created programmatically using `vl.markCircle` and `vl.encode`, with data loaded via D3’s `csv` function. The view is fitted to the window size and styled using custom Vega-Lite configuration, relying on the Vega, Vega-Lite, and Vega-Tooltip libraries.

MMohammad jahangir alam

95% match