Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Feb 26, 2021

Created on Feb 26, 2021

This example visualizes automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full 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 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

A scatter plot visualizes automobile data from an auto-mpg CSV, mapping model year to horsepower with tooltips showing vehicle names. Built using the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures axes and styling, and renders an SVG view that fits the window. The code formats year as temporal and horsepower as quantitative, while using a config object for font and color customization.

GGuido Perdomo

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data by plotting car origins on the x-axis against horsepower on the y-axis, with the vehicle’s name available as a tooltip. Built using the vega-lite-api, it programs a scatter plot with semitransparent circular marks, configured to fit the entire viewport. The code loads an auto-mpg CSV dataset via D3’s `csv` method, registers Vega-Lite with a tooltip handler, and applies custom axis and label styling from a shared config module.

CChristian Rohrer

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with engine displacement mapped to the x-axis and horsepower to the y-axis, using a semi-transparent point mark for each vehicle. The visualization is built with the Vega-Lite API, which composes the specification and rendering through Vega and Vega-Lite, while D3 (d3.csv) fetches the auto-mpg dataset from a remote URL. The code also applies custom axis and label styling via a config object, and includes a Vega Tooltip handler for interactive hovering.

ZZakaria Salogo

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile horsepower across model years, with translucent circular marks and hover tooltips revealing vehicle names. Built with the Vega-Lite API, it loads data from the UCI Auto MPG dataset via d3.csv and renders the visualization as SVG using the vega-lite-api library. The plot encodes year on the x-axis, horsepower on the y-axis, and uses a custom config for axis styling and tooltip font size.

Tthe-1000th-summer

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

94% match