Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 12, 2021

Created on Jan 12, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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.

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each vehicle as a circle based on its origin, horsepower, and weight. The chart uses color to encode weight and circle size to represent miles per gallon, with tooltips showing vehicle names. Built with the Vega-Lite API and D3.js, it loads data asynchronously and renders an interactive scatter plot that fits the full window. The visualization configures axes and label styles, and integrates Vega tooltip for hover details.

Nnayak-sarvesh12

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from a CSV file, plotting engine horsepower against miles per gallon. Circle size is fixed, while color encodes vehicle weight and a tooltip displays the car name on hover. The visualization is built using the Vega-Lite API, with `vl.markCircle` defining the marks and `vl.x().fieldQ`, `vl.y().fieldQ`, `vl.color().fieldQ`, and `vl.tooltip().fieldN` specifying the encodings. Data is loaded via `d3.csv`, and the Vega-Lite specification is rendered to SVG using the `vega-lite-api` library with custom axis and label styling from the `config` object.

KKhadidja Arezki

94% 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 miles per gallon and horsepower, with color encoding for country of origin and size encoding for vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and configured to render as SVG. Data is fetched asynchronously via the `csv` import from d3, and the chart includes an opacity setting and tooltip support through the `vega-tooltip` Handler. The API calls include `markCircle`, `encode`, `fieldQ`, and `scale`, with custom axis styling from a separate config file.

Jjchen6912

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data using a scatter plot of weight versus horsepower, colored by origin and with tooltips showing car names. The visualization is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart. Data is loaded asynchronously from a CSV file via d3.csv, then passed to a vega-lite-api markCircle specification. The chart fits the full window size with custom axis and label styling from a config object.

EEdgar Alves

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository, displaying a scatter plot of miles per gallon against horsepower. Color encodes the car’s country of origin, while the size of each circular mark scales with weight, and tooltips reveal the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with the `vl.markCircle`, `vl.x().fieldQ`, and `vl.color().fieldN` functions. The code imports data via `d3.csv`, registers Vega-Lite with `vega-tooltip`, and renders the output as an SVG using the Vega view.

TThiago Sawada

93% match

Loading thumbnail…

Fork of Vega-Lite API Template srubio

This example visualizes automobile performance data from a CSV file, plotting engine weight against horsepower while using circle size to encode fuel efficiency (mpg) and color to encode weight. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification in JavaScript. The code registers Vega, Vega-Lite, and the Vega-Lite API, and renders the chart as an SVG via D3. It includes custom configuration for axis styling and tooltips, and the data is fetched asynchronously using the D3 CSV parser.

FFloweringDeathStar

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

93% match