Vega-Lite API Template 1216

Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It maps miles per gallon on the x-axis, horsepower on the y-axis, vehicle origin to color, and weight to point size, with tooltips showing car names. The visualization is built programmatically via `vl.markCircle` and `vl.encode` methods, then rendered as SVG using the Vega and Vega-Lite libraries with a custom config for larger fonts and a dark color scheme. Data is loaded asynchronously using `d3.csv` from a remote gist.

Hhuashe418

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen

Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing relationships between miles per gallon, horsepower, weight, and country of origin. The visualization is built using the Vega-Lite API (`vl.markCircle`, `vl.encode`) in a JavaScript framework, with data loading handled by `d3.csv` from D3 v7. The code registers Vega-Lite and Vega, applies custom axis styling from `config.js`, and renders a responsive SVG chart that fills the browser window with tooltips enabled via the Vega Tooltip handler.

OOleg Zhernovoy

Vega-Lite API Template

This visualization displays the relationship between the origin of a car and its horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as a circular scatter plot, each point represents a car, with opacity enhancing readability when points overlap. The code leverages the Vega-Lite API, specifically `vl.markCircle` and `vl.encode` for visual encoding, while `d3.csv` handles data loading. The visualization automatically fits the browser window and includes a custom tooltip via Vega-Tooltip, with axis styling customized through a separate configuration file.

Ggoyalshivam204

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

Fork of Vega-Lite API Template

This visualization renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, with miles per gallon on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size reflecting vehicle weight. Tooltips reveal the car names. The code uses the Vega-Lite API (vl) configured with vega, vega-lite, and vega-tooltip, while d3.csv fetches the remote data. Custom axis and label styling is applied through a shared config object before the SVG view renders to fill the window.

MMuhammadAaqib137

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

Vega-Lite API

This visualization shows the relationship between miles per gallon and horsepower for cars from the UCI Auto MPG dataset, with points colored by origin and sized by horsepower. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding tooltips for car names. The code registers vega, vega-lite, and vega-lite-api with a tooltip handler, loads data via d3.csv, and renders an SVG chart that fits the window size. Custom axis and label styling are applied through a configuration object.

DDavid