Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 29, 2021

Created on Dec 29, 2021

This example visualizes automotive performance data by plotting horsepower against country of origin, with vehicle names available as tooltip labels. The code uses the Vega-Lite API to define a circle mark with large size and low opacity, while loading data from a CSV file of auto-mpg statistics using d3.csv. Configuration adjusts axis labels and tick marks for readability, and the visualization renders as a full-window SVG using vega-tooltip for interactive hover details.

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

JJay M Gonzalez

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from the auto-mpg dataset, plotting cylinders and horsepower with circle size encoding weight and color encoding origin. Built with the Vega-Lite API for declarative chart specification, it uses d3.csv to load the data and renders the result as an SVG via the Vega view API. Configuration customizes axis labels and tick colors, while a Vega tooltip handler displays car names on interaction.

Cchristopher

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis against its horsepower on the y-axis using semi-transparent, oversized circular marks. The chart is built with the Vega-Lite API, registered and rendered through Vega and Vega-Lite, with tooltips provided by Vega-Tooltip. Data is loaded asynchronously via d3.csv, and the visualization is styled with custom axis and label configurations defined in a separate config.js file, resulting in a clean, full-screen scatter plot.

Jjjacobatandover

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of auto-mpg data, showing the relationship between the country of origin (as a categorical x-axis) and horsepower (as a quantitative y-axis), with tooltips displaying car names. The visualization is built using the Vega-Lite API, wrapped in a D3.js v5 context, and rendered with SVG. Data is loaded asynchronously from a CSV file via `d3.csv`, then encoded through the `vl.markCircle` and `vl.encode` functions from the vega-lite-api library. The chart resizes to the full browser window and uses custom axis and label styling from a separate config file.

SSavenkov Igor

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the auto-mpg dataset, plotting engine horsepower against miles per gallon. Circles are colored by country of origin and sized according to vehicle weight. The visualization is built programmatically using the Vega-Lite API, which compiles to Vega specifications, with data loaded asynchronously via D3’s `csv` function. Custom axis and label styling are applied through the `config` object, and an interactive tooltip displays each car’s model name on hover.

SSabbir

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis and horsepower on the y-axis as translucent circles. The visualization is built with the Vega-Lite API, using `vl.markCircle` and `vl.encode` to define the marks and channels, while `d3.csv` loads the remote CSV data. The code leverages vega, vega-lite, and vega-tooltip libraries for rendering and interactive tooltips, with a custom config adjusting axis styles and font sizes for readability.

Aaredmond-re

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from an auto-mpg dataset, plotting horsepower against origin of manufacture. Each car is represented as a semi-transparent circular mark, with tooltips revealing the vehicle’s name on hover. Built with the Vega-Lite API, the example uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.y().fieldQ()` to encode categorical and quantitative fields. The code registers Vega and Vega-Lite with `vl.register`, loads CSV data via `d3.csv`, and applies a custom config to adjust axis and label appearance.

JJonas Carvalho

93% match