Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

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.

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 displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dducan114

96% match

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatterplot of automobile data, mapping weight to the x-axis and horsepower to the y-axis, with color encoding for country of origin and point size reflecting miles per gallon. Tooltips display the vehicle name. The code uses the Vega-Lite API, registering vega and vega-lite libraries, and loads CSV data asynchronously via d3.csv from a gist URL. Config settings customize axis and label appearance, while the view is rendered as SVG with fit sizing to the window.

Ddanielscheeper@gmail.com

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of automobile data, mapping weight on the x-axis, horsepower on the y-axis, and encoding country of origin as color and fuel efficiency (mpg) as point size. The visualization is built using the Vega-Lite API, which composes a declarative specification in `viz.js` and renders it as an SVG. Data is loaded from a remote CSV file via `d3.csv`, and the chart’s appearance is customized through a config object that adjusts axis styles and label typography. Interactivity is added via the Vega Tooltip handler, enabling hover details.

FFrancisco Ortega

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics using a scatter plot, where the x-axis maps the country of origin, the y-axis shows horsepower, color represents weight, and point size encodes miles per gallon. The visualization is built with the Vega-Lite API, which programmatically constructs the specification, while D3 handles CSV data loading from a remote source. The rendered SVG output includes an interactive tooltip showing car names. The code customizes the chart’s appearance through a configuration object that adjusts axis and label styling.

SSean Lin

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

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