Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Mar 19, 2021

Created on Mar 19, 2021

This example showcases a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing miles per gallon against horsepower. Points are colored by origin and scaled by weight, with tooltips revealing car names. The visualization is built using the Vega-Lite API’s `vl.markCircle` with encoding methods like `vl.x().fieldQ()` and `vl.color().fieldN()`. It loads data via `d3.csv`, configures axis styling in `config.js`, and integrates Vega-Tooltip for interactive hover details.

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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower for individual car models. Each point is colored by origin and sized by vehicle weight, with hover tooltips revealing the car name. Built with Vega-Lite API, the visualization leverages `vl.markCircle`, positional encodings via `vl.x()` and `vl.y()`, and tooltips through `vl.tooltip()`. D3’s `csv` loader fetches the data, while Vega tooltip enhances interactivity, all running within a responsive, full-window layout.

JJoshua Holloway

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with points colored by region of origin. Mouse hover reveals tooltips with vehicle names. The visualization is built using the Vega-Lite API, which encodes the data through `vl.markCircle` and `vl.encode` specifications, with D3.js handling CSV loading via `d3.csv`. The final chart is rendered as SVG through Vega and Vega-Lite, with appearance customized through a shared config object.

AAman Bhashkar

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) as additional dimensions. Built with the vega-lite-api library version 0.1.0, it registers Vega and Vega-Lite, and includes a tooltip handler from vega-tooltip to display car names. The code uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for the encoding, with data loaded asynchronously via d3’s `csv` function.

DDor Peled

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, weight, and origin. The visualization uses the Vega-Lite API with d3.csv for data loading, and configures an SVG renderer with a custom dark theme. It encodes x, y, color, size, and tooltip channels through the vl.markCircle and vl.encode methods, with vega-tooltip handling interactive hover details. The chart automatically resizes to fill the viewport.

Vvarmps

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, exploring the relationship between miles per gallon, horsepower, and weight. Points are colored by origin and sized by weight, with hover tooltips displaying car names. Built with the Vega-Lite API, the code uses `vl.markCircle` and `vl.encode` to define the visualization, while `vl.x().fieldQ('mpg')` and `vl.y().fieldQ('horsepower')` map quantitative fields. The data loads via `d3.csv`, and the chart renders through the Vega-Lite API's `render()` method.

XXiyu Zhai

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset, showing the relationship between miles per gallon and horsepower for various car models. Points are colored by origin and sized by weight, with tooltips revealing the car name. The visualization is created programmatically using `vl.markCircle` and `vl.encode`, with data loaded via D3’s `csv` function. The view is fitted to the window size and styled using custom Vega-Lite configuration, relying on the Vega, Vega-Lite, and Vega-Tooltip libraries.

MMohammad jahangir alam

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing each car as a circle positioned by its miles per gallon and horsepower, colored by its region of origin, and sized by its weight. The visualization is constructed using the Vega-Lite API, with the `vl` object building a mark-circle encoding that maps data fields to x, y, color, and size channels. The underlying code registers Vega and Vega-Lite, fetches the data via d3’s `csv` function, and uses a custom config to style axis labels and titles.

NNYY

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

95% match