Marks & Channels

100%

Marks & Channels

✓ Published0🌍 Public

Last edited Sep 21, 2021

Created on Sep 21, 2021

Forked from Fork of Vega-Lite API Template

This visualization shows the relationship between engine displacement, miles per gallon, horsepower, and country of origin for a sample of automobiles. Using Vega-Lite’s API, it renders a scatterplot where point positions encode displacement and MPG, color encodes origin, and size encodes horsepower, while tooltips reveal additional details. The data is loaded asynchronously via D3’s CSV parser, and the chart is configured with custom axis and label styling for readability.

AI-generated description

Marks and Channels

Includes:

Marks -- Point, Line, Area
Channels -- Position, Color, Size, Shape
How to choose marks & channels based on attribute types & tasks

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the relationship between a vehicle’s miles per gallon and its horsepower, with each dot colored by country of origin and sized by weight. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification by chaining methods like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. Data is loaded asynchronously from the UCI Auto MPG dataset using the `csv` function from d3. The chart fills the browser window and includes tooltips, which are enabled through the Vega-Tooltip handler.

MMeAzuree

85% match

Loading thumbnail…

Vega-Lite Scatterplot

This scatterplot visualizes automotive data, mapping miles per gallon and horsepower for individual cars, with the vehicles' country of origin (USA, Europe, or Japan) indicated by color. Built with the Vega-Lite API, the chart uses `markCircle()` for points and `encode()` with `fieldQ()` and `fieldN()` to bind quantitative axes and the categorical color channel. It loads the Auto MPG dataset from a CSV via `d3.csv`, converts string values to numbers, and renders the final result as an SVG through a Vega View.

NNJ Smith

84% match

Loading thumbnail…

vega lite

This visualization shows the relationship between miles per gallon, horsepower, and country of origin for a set of automobiles. Each circle represents a car, with position encoding mpg and horsepower, while color distinguishes the origin and size reflects horsepower again. Built using the vega-lite-api library, the chart is rendered with Vega-Lite and Vega, pulling data from the UCI Auto MPG dataset via D3’s `csv` loader. The view auto-fits to the window and includes interactive tooltips through vega-tooltip.

Ttknaik

84% match

Loading thumbnail…

Vega-lite test1

This visualization displays the relationship between engine displacement (mpg), horsepower, weight, and country of origin for various automobile models. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset. It is rendered using the Vega-Lite API, with vega-lite-api wrapping vega-lite and vega for chart generation, while d3 fetches the JSON data. The chart uses an interactive scatter plot with tooltips, circle size representing vehicle weight, and color indicating origin, with a total user session count displayed in the header.

HHalcyonWjr

84% match

Loading thumbnail…

scatter plot

This scatter plot visualizes the relationship between engine displacement, horsepower, and vehicle origin, with circle size encoding weight. The visualization uses the vega-lite-api to construct the chart, which is rendered with Vega-Lite and Vega. Data is loaded from a remote CSV file of auto-mpg records using d3.csv. The plot maps displacement to the x-axis and horsepower to the y-axis, while color differentiates origin and size scales by weight.

MMalempatiSaranya

84% match

Loading thumbnail…

Fork of Vega-Lite API_DL

This scatterplot visualizes the relationship between engine displacement and horsepower for individual car models, colored by their country of origin. Data comes from the auto-mpg dataset fetched via d3’s `csv` utility. Using the Vega-Lite API, the chart encodes quantitative fields on x and y axes with a circle mark, while categorical origin color uses a custom range. Custom axes styling and a tooltip display attributes like mpg and model name.

Ddavidelowe

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js as its rendering framework, building interactive marks with circles sized by weight and colored by country of origin. Data loads asynchronously from a CSV file fetched via D3's CSV parser. The chart automatically fits the browser window and includes a tooltip showing each car's name, powered by the Vega Tooltip handler.

Xxychen0612.cs09@nycu.edu.tw

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for a sample of automobiles from the UCI Auto MPG dataset. A scatter plot maps mpg to the horizontal axis and horsepower to the vertical axis, with point size encoding weight and color distinguishing origin. The implementation uses the Vega-Lite API to declare the chart specification, while d3.csv loads the remote dataset. Custom axis styling and tooltips are configured through Vega-Lite’s config object and the Vega Tooltip handler, rendering in SVG.

EEngineerRajeev

83% match