Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Dec 27, 2024

Created on Dec 27, 2024

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for cars, with each point’s color indicating the country of origin and its size reflecting vehicle weight. A tooltip reveals the car’s name on hover. The visualization is constructed programmatically using the Vega-Lite API, with a custom configuration for axis styling and tooltip formatting. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered into an SVG using the Vega-Lite and Vega libraries, with interactivity enhanced by the Vega Tooltip handler.

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…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle horsepower, fuel efficiency (mpg), and weight, with points colored by country of origin and labeled by model name using hover tooltips. It renders an interactive scatter plot from the UCI Auto MPG dataset, loaded via CSV through `d3.csv`. The chart is built using the Vega-Lite API, which composes specifications programmatically, leverages `vl.markCircle` for rendering, and integrates `vega-tooltip` for interactivity within an SVG-based D3 view.

RRoberto M

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with points colored by origin and sized by mpg, using a tooltip to display car names. It employs the Vega-Lite API to declaratively define the scatterplot, registered with Vega and Vega-Lite, and renders it as SVG within a full-window layout. Data is loaded asynchronously from a CSV file using D3’s `csv` method, while the built-in Vega Tooltip handler manages interactive hover details. The configuration customizes axis styles and label fonts for improved readability.

Wwy2010344

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

Llingfa

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

SS-Au-Zn

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Iiblub

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between horsepower, fuel efficiency (MPG), and vehicle weight for classic cars, with color encoding by country of origin. Built using the Vega-Lite API on top of Vega and Vega-Lite, it renders as a single SVG, configured through `vl.markCircle` and the `encode` method. Data is loaded asynchronously from a CSV via `d3.csv`, sourced from the UCI Auto MPG dataset. The visualization adapts to the browser window and includes tooltips via the Vega Tooltip handler.

EEkuremaro

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the Auto MPG dataset, with a tooltip revealing each car’s name. Built using the `vega-lite-api` wrapper around Vega-Lite and Vega, it renders an interactive scatter plot where circle size encodes weight and color encodes origin. The code loads CSV data via `d3.csv`, configures axis and label styling, and fits the visualization to the window with an SVG renderer and tooltip handler.

SSteven Pearce

94% match