Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 17, 2024

Created on Oct 17, 2024

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, visualizing horsepower against country of origin with points sized by a fixed constant. The code builds the visualization programmatically using the Vega-Lite API, registering Vega and Vega-Lite libraries with vega-tooltip for interactivity. Data is loaded asynchronously via `d3.csv`, and the chart is configured with custom styling for improved readability, rendering as a full-window SVG fit to the viewport.

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 presents a scatter plot of automobile data from the UCI Machine Learning Repository, showing the relationship between MPG and horsepower. Each point is colored by origin, sized by weight, and includes a tooltip revealing the vehicle name. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to declaratively encode the marks. Data is loaded asynchronously via D3's `csv` function, and the chart is rendered with a custom configuration that adjusts axis and label styling.

Mme-as-a-web-designer

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between a car's country of origin and its horsepower using a scatter plot. Each point represents a car, with opacity applied to reveal overlapping data points, and a tooltip displays the car's name on hover. The visualization is built using the Vega-Lite API, which generates a specification rendered to SVG via Vega and Vega-Lite. It loads the Auto MPG dataset from the UCI Machine Learning Repository using `d3.csv`, and customizes axis styling and tooltip appearance through a configuration object.

Ww.fukuyama@gmail.com

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg CSV dataset. It plots horsepower against origin, with each point sized and colored by its country of origin, and includes tooltips showing vehicle names. The code registers Vega-Lite with Vega and D3, loads data via d3.csv, and configures axes and label styling for improved readability. The plot fills the entire browser window, with rendering handled through Vega’s SVG view and interactivity powered by vega-tooltip.

Nnncis

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car’s country of origin on the x-axis against its horsepower on the y-axis using semi-transparent, oversized circular marks. The chart is built with the Vega-Lite API, registered and rendered through Vega and Vega-Lite, with tooltips provided by Vega-Tooltip. Data is loaded asynchronously via d3.csv, and the visualization is styled with custom axis and label configurations defined in a separate config.js file, resulting in a clean, full-screen scatter plot.

Jjjacobatandover

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automobile data from the UCI Auto MPG dataset, loaded via `d3.csv`. The visualization encodes the vehicle’s country of origin on the x-axis and horsepower on the y-axis, with each point representing a car model and a tooltip showing its name. The plot uses a semi-transparent circle mark to emphasize overlapping points and is rendered on a full-window canvas via `vega-lite-api` with a custom dark-themed configuration for improved readability.

Aandrotop

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded asynchronously via d3.csv, and the chart encodes tooltips for vehicle names. The code customizes axis and font styles through a config file, demonstrating programmatic chart creation with the vega-lite-api wrapper.

Hhbatteram

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, encoding vehicle weight on the x-axis, horsepower on the y-axis, and miles per gallon as both point size and color. The visualization is constructed programmatically using the Vega-Lite API, which builds a specification rendered as an SVG. The code imports data via D3’s CSV loader and registers Vega-Lite with custom tooltip handling from the Vega-Tooltip library. Axis styling is customized through a configuration object to improve readability.

TTyler Durham

94% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example displays a scatter plot of automobile fuel efficiency against horsepower, with points colored by country of origin and tooltips showing model names. The visualization uses the Vega-Lite API to construct the chart declaratively, combining `vl.markCircle` with encodings for the quantitative axes and nominal color. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`. The code integrates vega, vega-lite, and vega-lite-api libraries, with additional tooltips from vega-tooltip and custom axis styling from a config object.

MMayank Kumar

94% match