Vega-Lite Iterations

100%

Vega-Lite Iterations

✓ Published0🌍 Public

Last edited Aug 31, 2021

Created on Aug 31, 2021

This example demonstrates an interactive scatter plot of automotive fuel economy data, showing the relationship between cylinder count and origin while revealing individual car names through tooltips. Rendered as a Vega-Lite visualization via the `vega-lite-api`, the chart applies a custom configuration for axis styling and font sizes before resizing to fit the viewport. The data is loaded asynchronously from a CSV using `d3.csv`. The plot uses semi-transparent, oversized marks with opacity encoding to avoid overplotting, and the code registers `vega-tooltip` for hover interactions.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher

92% match

Loading thumbnail…

Vega-Lite Iteration

This visualization displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built using the Vega-Lite API, it registers handlers through `vega`, `vega-lite`, and `vega-tooltip` to render interactive SVG graphics with hover tooltips. The code loads CSV data with `d3.csv`, applies a custom configuration for axis styling, and dynamically sizes the chart to fit the window dimensions.

CChris Briggs

91% match

Loading thumbnail…

Iterating fast with Vega-Lite API

This example demonstrates an interactive scatter plot of automotive data, showing how weight, horsepower, and origin relate to fuel efficiency (mpg). The visualization uses the Vega-Lite API to declaratively specify the chart, with circle marks encoding horsepower on the y-axis and weight on the x-axis, while origin determines color and mpg controls size. The code loads data from a CSV via D3’s `csv` function, registers Vega and Vega-Lite with the API, and renders the result as SVG. Custom axis and label styling from a configuration object improves readability.

EElvira Nassirova

91% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing the car model name. Built with the Vega-Lite API, the visualization loads data from a CSV using `d3.csv` and renders through the `vega` and `vega-lite` libraries. Point marks are configured with a fill, a fixed size, and reduced opacity, while axis styling is customized via a config object. The chart's dimensions adapt to the window size, and interactive tooltips are enabled using `vega-tooltip`.

Rrandom-program

91% match

Loading thumbnail…

Vega-Lite API Template fast iteration

This example demonstrates rapid iteration with the Vega-Lite API by rendering a scatter plot of automobile data from the UCI Machine Learning Repository. It shows the relationship between highway miles per gallon, engine displacement, model year, and city MPG using circle marks with opacity. The visualization is built programmatically using `vega-lite-api` to construct the specification, then rendered as an SVG via Vega and Vega-Lite, with tooltips handled by `vega-tooltip`. The code uses `d3.csv` to fetch data, applies custom axis and label styling from a config object, and dynamically sizes the chart to fit the window.

DDanny Stephens

91% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

91% match

Loading thumbnail…

Vega-Lite API - scatter plot

This example demonstrates a scatter plot of vehicle data using the Vega-Lite API, showing the relationship between miles per gallon and horsepower across different car origins, with point size encoding weight and tooltips displaying car names. The visualization leverages `vl.markCircle` with opacity for density perception, and custom scales that avoid zero-based axes. It loads CSV data from a GitHub gist via d3.csv, then renders to SVG using Vega and Vega-Lite with a dark-on-light custom config. The code registers vega-tooltip for interactive hover labels and uses d3.v5.

Kkatjur01

90% match

Loading thumbnail…

Vega-Lite API Template II

This example displays a scatter plot of the auto-mpg dataset, mapping engine displacement on the x-axis and horsepower on the y-axis, with vehicle names shown via tooltips. The visualization is built entirely through the Vega-Lite API in JavaScript, using `vl.markPoint` with opacity to show data density. It loads CSV data via D3’s `csv` function, configures axis and label styling in a separate `config.js`, and renders with Vega 5 and Vega-Lite 4. The chart auto-sizes to the window and uses the Vega Tooltip handler for interactive hover details.

NNelson M

90% match