Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public
JJonas Carvalho
Last edited Apr 4, 2021
Created on Apr 4, 2021

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.

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 Auto MPG data from the UCI Machine Learning Repository, plotting each car as a semi-transparent circle positioned by origin (categorical) and horsepower (quantitative), with tooltips revealing the vehicle name. The visualization is built entirely with the Vega-Lite API, leveraging `vl.markCircle`, `vl.x().fieldN`, `vl.y().fieldQ`, and `vl.tooltip` to define the encodings. Data is loaded asynchronously via D3’s `csv` function, while Vega, Vega-Lite, and the Vega Tooltip handler manage rendering and interaction. The configuration customizes axis styles and label colors to improve readability against a dark background.

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

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

This example visualizes automobile data by plotting car origins on the x-axis against horsepower on the y-axis, with the vehicle’s name available as a tooltip. Built using the vega-lite-api, it programs a scatter plot with semitransparent circular marks, configured to fit the entire viewport. The code loads an auto-mpg CSV dataset via D3’s `csv` method, registers Vega-Lite with a tooltip handler, and applies custom axis and label styling from a shared config module.

CChristian Rohrer
93% match
Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from the auto-mpg dataset, plotting the origin of each vehicle against its horsepower as circles. The chart uses the Vega-Lite API within a D3.js framework, leveraging `vl.markCircle()` for the points and `vl.x().fieldN()` and `vl.y().fieldQ()` for the categorical and quantitative encodings. Data is loaded via `d3.csv`, and the rendering pipeline combines Vega, Vega-Lite, and Vega-Tooltip to provide interactive tooltips with vehicle names. A custom configuration adjusts axis styling and font sizes for improved readability.

MMonish Vassantrai
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting fuel efficiency (mpg) against horsepower with points colored by origin and sized by weight. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, while `vl.color().fieldN()` and `vl.size().fieldQ()` map additional variables. The code registers Vega-Lite with `vl.register` and configures a custom dark theme via `config.js`. Data is loaded asynchronously using D3’s `csv` function, and tooltips display car names through the vega-tooltip `Handler`. The chart renders responsively to the window dimensions.

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