vega lite

100%

✓ Published0🌍 Public

Last edited Oct 22, 2021

Created on Oct 22, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API

This visualization shows the relationship between miles per gallon and horsepower for cars from the UCI Auto MPG dataset, with points colored by origin and sized by horsepower. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding tooltips for car names. The code registers vega, vega-lite, and vega-lite-api with a tooltip handler, loads data via d3.csv, and renders an SVG chart that fits the window size. Custom axis and label styling are applied through a configuration object.

DDavid

91% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It displays a scatter plot where each circle’s position encodes mpg and horsepower, color encodes origin, and size encodes weight. The code uses the Vega-Lite API to build the chart declaratively, with the `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` methods. It loads CSV data via D3’s `csv` function, registers Vega-Lite components, and renders an interactive SVG with tooltips.

NNelson M

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower. Each car is represented as a circle, with color indicating the country of origin, size mapped to vehicle weight, and tooltips revealing the car name. The chart is built using the Vega-Lite API, which translates a declarative specification into a rendered SVG. The code leverages `vl.markCircle` and the encode functions to bind data fields to visual channels. The underlying Vega and Vega-Lite libraries, along with the `vega-tooltip` handler for interactive hover details, render the final output.

AAshutosh5333

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile fuel efficiency (mpg) and horsepower, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API and rendered as an interactive SVG, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV file. The code uses vl.markCircle and vl.encode for the scatter plot, with a tooltip handler from vega-tooltip to show car model names on hover.

RRolf Niggemann

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. A semi-transparent line mark encodes mpg on the x-axis and horsepower on the y-axis, with color distinguishing origin and size representing weight. The visualization is built using the Vega-Lite API, which is registered with vega, vega-lite, and vega-tooltip for interactive tooltips. Data is loaded asynchronously via d3.csv, and the final SVG is rendered to fit the full window size.

GGeekboxer

90% match

Loading thumbnail…

Vega-Lite API Template I

This visualization displays automobile performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with each point colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API, the example constructs chart specifications programmatically, encoding tooltips for car names and customizing axis styling through a config object. The implementation uses `vl.markCircle` with field encodings for quantitative and nominal data, while `getData` imports the dataset via d3's `csv` function, and the `run` function renders the visualization directly into the document body.

OOleJRask

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization explores the relationship between a car’s country of origin, its horsepower, weight, and miles per gallon, using a bubble chart built with the vega-lite-api. Each circle’s x-axis position encodes origin, y-axis horsepower, color encodes weight, and size encodes mpg, with tooltips revealing the car’s name. The code loads auto-mpg data via d3.csv, applies custom axis and label styling, and renders the SVG using vega-lite, vega, and a vega-tooltip handler.

Ssurikmeetr

89% match