Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited May 11, 2021

Created on May 11, 2021

This visualization displays relationships among automobile characteristics from the UCI Auto MPG dataset, encoding miles per gallon and horsepower on the axes, origin as color, and weight as point size. Built with Vega-Lite's API wrapper, the code uses `vega-lite-api` to construct a circular mark encoding specification, then renders interactively through Vega and Vega-Lite. The visualization includes tooltips for car names, styled with custom axis and label configuration for improved readability.

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 visualization displays relationships among automobile characteristics using the Auto MPG dataset from the UCI Machine Learning Repository. Scatter plots show miles per gallon against horsepower, with points colored by country of origin and sized according to vehicle weight. The code builds the chart programmatically using the Vega-Lite API, registering Vega and Vega-Lite with a custom configuration that removes axis domains and adjusts font styling. Data is loaded via D3's CSV reader, and rendering produces an SVG output with a tooltip handler for interactive exploration.

FFiewor John

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

Ggon araseon

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through color and MPG via point size. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, then renders an interactive SVG scatter plot that fits the full window. The code uses `vl.markPoint()` with `encode()` mappings and `vl.x().fieldN()`, `vl.y().fieldQ()`, and tooltip fields, pulling CSV data asynchronously via d3.csv. Custom axis and label styling configures the dark-on-light appearance for readability.

TTyr Chen

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

SSong Tao Chen

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays car attributes from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through both color and point size. It uses the Vega-Lite API alongside vega, vega-lite, d3.csv for data loading, and vega-tooltip for interactive hover details. The chart automatically fits its container dimensions, with custom axis styling and a dark color scheme to enhance readability. Each data point represents a car model, with tooltips revealing the vehicle name.

TTOKIHISA

93% match