Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
Ssurikmeetr
Last edited Mar 5, 2021
Created on Mar 5, 2021

This visualization explores the relationship between a car’s country of origin, its horsepower, weight, and miles per gallon, using a bubble chart built with the vega-lite-api. Each circle’s x-axis position encodes origin, y-axis horsepower, color encodes weight, and size encodes mpg, with tooltips revealing the car’s name. The code loads auto-mpg data via d3.csv, applies custom axis and label styling, and renders the SVG using vega-lite, vega, and a vega-tooltip handler.

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 the relationship between vehicle weight, horsepower, and country of origin using the auto-mpg dataset, loaded via `d3.csv` and rendered with Vega-Lite through the vega-lite-api. It displays circles scaled by weight, colored by origin, with tooltips showing car names. The chart uses a custom configuration for axis styling and readability, and is rendered as an SVG that fills the browser window.

SSahaj Singh
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle weight, horsepower, and fuel efficiency across different countries of origin, using a bubble chart where each point represents a car model. The data comes from the auto-mpg.csv dataset, loaded via d3's csv method. Built with the Vega-Lite API, it registers both Vega and Vega-Lite libraries, and constructs the plot using vl.markCircle with encodings for x, y, color, size, and tooltip. The visualization is rendered as an SVG, with custom config styling for axes and guide labels, and includes an interactive tooltip via the vega-tooltip Handler.

JJoseIGuzman
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

LLei Lei
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the Auto MPG dataset, with a tooltip revealing each car’s name. Built using the `vega-lite-api` wrapper around Vega-Lite and Vega, it renders an interactive scatter plot where circle size encodes weight and color encodes origin. The code loads CSV data via `d3.csv`, configures axis and label styling, and fits the visualization to the window with an SVG renderer and tooltip handler.

SSteven Pearce
92% 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
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the classic Auto MPG dataset, plotting each car as a circle with origin on the x-axis, horsepower on the y-axis, weight mapped to color, and miles per gallon to circle size. Hovering reveals the car’s name via tooltips. It uses the Vega-Lite API to construct the specification, with Vega and Vega-Lite rendering to SVG, and D3’s CSV loader to fetch the remote data file. Custom configuration adjusts axis appearance and label styling.

Ggeorgie-flood
92% 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
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

YYedrup
92% match