Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Pparshwa30122002@gmail.com
Last edited Aug 13, 2024
Created on Aug 13, 2024

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for classic automobiles, using a scatter plot with circle size encoding weight and color encoding country of origin. Hovering reveals car model names via tooltips. The chart is built with the Vega-Lite API, which translates a declarative specification into Vega and renders as SVG, with data sourced from the UCI Auto MPG dataset fetched via D3’s CSV loader. Custom axis and label styling come from a shared configuration object.

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 example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for classic automobiles, using a scatter plot where each car is a circle. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, with data fetched from the UCI Machine Learning Repository’s Auto MPG dataset via D3’s `csv` function. The API encodes the x-axis as miles per gallon, the y-axis as horsepower, color by origin, and size by weight, while a tooltip displays each car’s name. The chart fills the browser window and uses custom axis labels and colors for improved readability.

VVander Fillipe de Souza
96% 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
96% 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
95% 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
95% match
Loading thumbnail…

Fork of Vega-Lite API Template I

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API to declaratively encode data fields onto circular marks, with color distinguishing origin and size mapping to weight. It reads CSV data via `d3.csv`, renders with Vega’s SVG renderer, and includes Vega-Tooltip for interactive hover details. The chart resizes to fit the browser window and applies custom axis and label styling for readability.

FFonda Irena Santoso
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

Mmeghshah612
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

CCecilia831
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency, horsepower, and origin in a dataset of classic cars. The plot positions each vehicle by its miles per gallon and horsepower, colors points by the country of origin, and sizes them according to vehicle weight. Built using the Vega-Lite API, the visualization is rendered as an SVG via the vega-lite-api, with data fetched from the UCI Auto MPG dataset. Custom configuration adjusts the axis styling and tooltip appearance.

AAlejo Cortiñaz
95% match