Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Jul 16, 2021

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.

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

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

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

94% 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 the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by weight and horsepower, colored by origin, and sized by miles per gallon. Hovering reveals the car name via a tooltip. The visualization is built with the Vega-Lite API (vl), which generates a Vega-Lite specification that is registered with vega and vegaLite and rendered as SVG. Data is loaded asynchronously using d3.csv from a Gist, and the chart uses custom axis and label styling from a shared config file.

LLaura Johnson

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

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

MMark Zwart

93% match