Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 21, 2021

Created on Aug 20, 2021

This example visualizes automobile data from a CSV file, plotting each car as a circle on a scatterplot with origin on the x-axis and horsepower on the y-axis. Tooltips display the car model name. Built with React and the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldN`, and `vl.y().fieldQ` to create the chart, fetching data with `d3.csv`. The visualization is rendered to SVG via Vega-Lite with custom axis styling for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Bbreadcircle

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting each car’s origin against its horsepower as a scatterplot with semi-transparent circles and tooltips showing the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with D3’s `csv` function for data loading and Vega-Tooltip for interactive hover details. The code registers Vega and Vega-Lite, then renders the visualization in an SVG view, with custom axis and label styling applied via a shared configuration object.

LLaura Brown

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance and origin using a scatter plot generated with the Vega-Lite API, where each circle’s position encodes miles per gallon and horsepower, while color indicates the car’s origin and size encodes weight. Tooltips display the car name on hover. The code loads a CSV dataset via `d3.csv`, constructs the chart with `vl.markCircle` and its encoding helpers, then renders it to canvas using Vega’s `view` with a custom config for axis styling and label fonts. The visualization fills the window and updates responsively.

MMatty Danbury

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive data from a CSV file, plotting horsepower and weight for each car as circles, with color indicating origin and size encoding miles per gallon. It uses the Vega-Lite API to build the chart declaratively, with D3’s `csv` function for data loading. The visualization leverages vega-lite-api’s `markCircle` and `encode` methods, and it renders SVG output through Vega, vega-lite, and vega-tooltip for interactive tooltips.

TTakuya Kitazawa

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with circles positioned by vehicle origin on the x-axis and horsepower on the y-axis. Tooltips reveal car names when hovering, using the vega-lite-api to construct the visualization. The code loads data from a CSV via d3.csv, then renders the chart with vega, vega-lite, and vega-tooltip, applying a custom config for styling and fitting the full window size.

PPetko4

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to plot automobile data, showing each car as a circle positioned by weight and horsepower, colored by origin, and sized by fuel efficiency (mpg). The code loads CSV data from a GitHub gist via D3’s `csv` method, then builds the chart with `vega-lite-api`’s `markCircle` and encodes position, color, size, and tooltip fields. Rendered as an SVG through the Vega renderer, the visualization includes a Vega tooltip handler for interactive inspection.

91% match

Loading thumbnail…

Fork of Vega-Lite API Template 3

This visualization uses a Vega-Lite API specification to render a scatter plot of automobile data from a CSV file. Each circle represents a vehicle, positioned by origin and horsepower, with color encoding weight and size encoding miles per gallon (mpg), with tooltips showing the car name. The code builds the chart declaratively using the `vega-lite-api` library, registering it with vega and vega-lite, and loads data via d3.csv. Custom configuration adjusts font sizes and axis styling for readability.

Iinar-vision

91% match

Loading thumbnail…

Fork of Vega-Lite API Template practice

This example visualizes automobile performance data from a CSV file, plotting acceleration against horsepower with points colored by origin and tooltips showing car names. The visualization is built using the Vega-Lite API (vl) with D3.js for data loading via the csv function. The code constructs a scatter plot with circular marks, customizes axis appearance through a config object, and renders the chart to fit the browser window using canvas-based rendering and Vega tooltip handlers.

MMarkvanHaperen

91% match