Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 29, 2021

Created on Aug 29, 2021

This visualization displays automobile data from a CSV file, plotting horsepower against origin with points colored by year and labeled by name. It demonstrates the vega-lite-api library, which programmatically constructs Vega-Lite specifications using JavaScript method chaining. The code registers Vega, Vega-Lite, and the API with vega-tooltip, then renders an interactive SVG chart that adapts to the window size. Custom axis and label styles in config.js improve readability against a dark theme.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from the auto-mpg CSV file, plotting engine displacement against horsepower. Each point represents a vehicle, colored by its country of origin, with hover tooltips revealing the model name. The example demonstrates the vega-lite-api, which builds Vega-Lite specifications through a fluent JavaScript interface. It uses d3.csv for data loading, Vega-Lite's markPoint encoding, and integrates vega-tooltip for interactive labels. The visualization automatically resizes to fit the browser window, with custom axis styling and dark-themed labels.

GGnav3852

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

93% match

Loading thumbnail…

Vega-Lite API Template

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.

PPUUDI

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

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

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

92% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates an interactive scatterplot of automobile data, plotting acceleration against horsepower with points colored by origin. Built using the Vega-Lite API, the visualization renders via SVG and includes tooltips displaying car names. The code loads data from a CSV using d3.csv, registers Vega-Lite with vega and vega-tooltip, and configures axes and label styling. The visualization auto-fits its container dimensions and uses a custom dark color scheme.

JJohn Patrick Banas

92% match

Loading thumbnail…

Vega-Lite API Visualization

This example visualizes automobile performance data by plotting engine power (horsepower) against model year, with color and point size encoding vehicle weight. The scatter plot uses semi-transparent circles to reveal overlapping data points, and tooltips display the car model name on hover. Built with the Vega-Lite API (vl) wrapper, the code registers both Vega and Vega-Lite libraries, loads CSV data via d3’s csv function, and renders an SVG output. Custom axis styling and font sizes are applied through a shared config object for improved readability.

LLydia Francis

92% match