Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
PPUUDI
Last edited Nov 26, 2021
Created on Nov 26, 2021

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automobile data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, fuel efficiency (mpg), and car model name. Circles are sized by mpg and colored by weight, with tooltips displaying the model name. The code registers Vega, Vega-Lite, and the Vega-Lite API, fetches data via d3.csv, and renders an SVG view that fits the window dimensions with customized axis and label styling.

Mmkt-ds
95% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting engine displacement against horsepower with circles colored by origin and sized by weight. Tooltips reveal car names on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, loads data with d3.csv, and renders an SVG chart configured with custom axis styling and a dark color scheme. The code demonstrates programmatic chart construction through vl.markCircle and vl.encode methods.

CCurran Kelleher
95% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive performance metrics from an auto-mpg dataset, plotting engine displacement against horsepower with points colored by model year and sized by vehicle weight. It uses the Vega-Lite API to declaratively specify the chart, with Vega and Vega-Lite handling rendering and the Vega Tooltip library providing interactive hover details. D3.js loads the CSV data, and custom configuration adjusts font sizes and axis styling for readability.

CCurran Kelleher
95% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

JJohn Lewis
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower with point color encoding model year and point size encoding weight. Tooltips expose the vehicle name. It uses the Vega-Lite API to construct the specification, registering Vega, Vega-Lite, and Vega-Tooltip within a D3-based application, rendering to SVG. Data is loaded asynchronously via d3.csv, and the visualization is sized to fit the browser window.

Ddavid-cv2
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400
94% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with points colored by model year, sized by vehicle weight, and displaying car names on tooltip. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is rendered as SVG through Vega and Vega-Lite. The data is loaded asynchronously via D3's `csv` function, and the chart includes visual customization through a custom config object that adjusts axis and label styling.

CCurran Kelleher
94% match