Vega-Lite API Template testing

100%

Vega-Lite API Template testing

✓ Published0🌍 Public

Last edited Mar 3, 2021

Created on Mar 3, 2021

This visualization displays the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon on the x-axis and country of origin on the y-axis, with color encoding horsepower. Built with the Vega-Lite API, the example demonstrates a programmatic approach to declarative chart construction, where the visualization specification is defined using the `vl` object's methods like `markCircle` and `encode`. The code registers Vega, Vega-Lite, and the API with `vl.register`, loads CSV data via `d3.csv`, and renders an SVG that fits the full window. Custom axis styling and tooltips via `vega-tooltip` enhance 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 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon and horsepower, with color encoding for country of origin and size encoding for vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and configured to render as SVG. Data is fetched asynchronously via the `csv` import from d3, and the chart includes an opacity setting and tooltip support through the `vega-tooltip` Handler. The API calls include `markCircle`, `encode`, `fieldQ`, and `scale`, with custom axis styling from a separate config file.

Jjchen6912

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

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

JJohn Lewis

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle with engine horsepower on the y-axis and miles per gallon on the x-axis. Color encodes the country of origin, while circle size represents vehicle weight, and hovering reveals the car’s name via a tooltip. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data asynchronously using d3.csv, and renders an interactive SVG chart that resizes to fit the viewport. The code also applies custom axis and label styling through a configuration object.

RRoland

93% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

YYedrup

93% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against miles per gallon. Points are colored by origin and sized by vehicle weight, with tooltips revealing model names. The visualization uses the Vega-Lite API, a JavaScript wrapper for Vega-Lite specifications, registered with Vega and Vega-Lite libraries, plus D3’s `csv` loader for data ingestion. Rendering occurs as an SVG via the `markCircle` and `encode` API methods, with custom axis styling from a config object.

Jjuanmy400

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car model as a circle. It shows miles per gallon against horsepower, with the circle’s color encoding the country of origin and its size corresponding to vehicle weight. Built using the Vega-Lite API, the visualization is configured through `vl.markCircle` and `vl.encode`, while data is fetched asynchronously via `d3.csv` from a Gist URL. The rendering uses Vega-Lite’s SVG renderer with an autosize fit, and a custom tooltip handler and configuration object define the visual styling.

Jjasonamey

93% match