Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 27, 2021

Created on Dec 27, 2021

This bar chart, built with the Vega-Lite API, visualizes the relationship between vehicle weight, horsepower, and fuel efficiency across different origins. Each circle represents a car model, with position encoding weight and horsepower, while color indicates origin and size reflects miles per gallon. The visualization uses the Vega-Lite API’s `markCircle` and encoding channels to generate the SVG directly in the browser. The underlying data is loaded from a CSV file via `d3.csv`, and the tooltip is enabled through the vega-tooltip `Handler`, with basic chart styling customized in the `config` object.

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 shows the relationship between vehicle weight, horsepower, and fuel efficiency in a scatter plot, using a dataset of automobile specifications. The plot encodes weight on both the x-axis and color scale, while horsepower appears on the y-axis and miles per gallon determines point size. Built with the Vega-Lite API wrapped in D3.js, it renders as an SVG and includes interactive tooltips showing each car’s name. The code demonstrates programmatic chart construction through `vl.markCircle` and encoding methods, with a custom configuration adjusting axis styling and label fonts.

Wwzhang88

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.

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight and fuel efficiency (mpg) across a dataset of auto models, with each point represented as a semi-transparent circle. The color encoding maps weight values, and hovering reveals the vehicle name via tooltip. Built using the Vega-Lite API wrapped in a D3.js framework, it loads CSV data from a gist URL and renders an interactive scatterplot. The code uses `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` to define the chart, with a custom config adjusting axis and label styling.

Ddan815

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

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template 2222

This example visualizes the relationship between fuel efficiency, horsepower, and vehicle origin in the classic Auto MPG dataset. Each car is represented by a semi-transparent circle, with position encoding miles per gallon and horsepower, while color distinguishes country of origin and circle size encodes vehicle weight. Built using the Vega-Lite API for JavaScript with D3.js version 5, the visualization renders as an interactive SVG chart. Data is loaded asynchronously from a CSV file hosted on GitHub, and the chart includes tooltips showing car names.

Iinar-vision

91% match

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

90% 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’s fuel efficiency (mpg) against its horsepower. Each circle’s size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car’s name. The visualization is built programmatically using the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), with data loaded asynchronously via `d3.csv`. Rendering is handled by Vega and Vega-Lite, with tooltips provided by Vega-Tooltip, and custom axis and label styling is applied through a shared config object.

MMohammed Jumail Shibily

90% match