Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 12, 2021

Created on Sep 12, 2021

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing acceleration, horsepower, and weight as area marks with tooltips displaying car names. It uses the Vega-Lite API (vl) to define the visualization declaratively, with D3’s csv loader fetching the data. The code registers vega, vega-lite, and vega-lite-api, and uses vega-tooltip’s Handler for interactive tooltips. Styling is customized via a config object, and the chart is sized to fit the window, with rendering done in SVG.

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 weight and horsepower, colored by origin, and sized by miles per gallon. Hovering reveals the car name via a tooltip. The visualization is built with the Vega-Lite API (vl), which generates a Vega-Lite specification that is registered with vega and vegaLite and rendered as SVG. Data is loaded asynchronously using d3.csv from a Gist, and the chart uses custom axis and label styling from a shared config file.

LLaura Johnson

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting engine displacement 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 an SVG chart via the vega-tooltip handler for interactive tooltips. Data is loaded asynchronously with d3.csv from a Gist, while the chart encodes quantitative fields for axes and sizes. The code also applies a custom configuration for axis styling and font readability.

AAD-W99

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to display Auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circle marks. Each circle’s size encodes weight, while color groups vehicles by origin, and hovering reveals car names via tooltips. The code registers Vega, Vega-Lite, and the Vega-Lite API, renders SVG output, and uses a custom config to style axes and labels. Data is fetched asynchronously with d3.csv, and the visualization adapts to the window dimensions.

NNioh

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

94% match

Loading thumbnail…

Fork of 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, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower. Each dot represents a car, with color encoding the region of origin, size encoding cylinder count, and a tooltip displaying the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and rendered as an SVG via D3. Data loading relies on D3’s `csv` method, while custom axis and label styling are applied through a shared config object.

JJean David

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower with points colored by origin and sized by miles per gallon. Built with the Vega-Lite API, it renders an interactive scatter plot using d3.csv for data loading and Vega-Lite’s markCircle encoding for graphical marks. The visualization uses a custom configuration to adjust axis styling, font sizes, and tooltip appearance, all rendered as SVG with dynamic width and height based on the viewport.

AAlex Gomes

94% match