Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 11, 2021

Created on Aug 10, 2021

This example creates a scatter plot of cereal data, positioning each cereal brand by its cups of cereal and calories. The visualization uses a Vega-Lite API built on the `vega-lite-api` library, with `vl.markCircle` and `vl.x`/`vl.y` encodings to map the quantitative fields, and a tooltip encoding showing the cereal name. Data is fetched as CSV from a remote URL using `d3.csv`. The rendering is handled by Vega-Lite and Vega, with tooltips provided through `vega-tooltip`. The chart is customized with a dark text color and simplified axes, and it auto-fits to the browser window size.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of global food consumption data from the UCI Machine Learning Repository’s Auto MPG dataset, sourced via a Gist. The visualization encodes Animal Products and Recovered values as x- and y-position, with color by country and point size by weight. It applies a custom dark-colored axis and label configuration, and uses Vega-Lite’s `markCircle`, `encode` with `fieldQ`, and `scale` methods, all rendered through Vega’s SVG view with tooltips from Vega-Tooltip.

Bblueyjuice

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature data as a scatter plot, with each point representing a measurement over time. The visualization uses the Vega-Lite API to define the chart declaratively, with `vl.markCircle` and `vl.x().fieldT('timestamp')` mapping time to the x-axis and temperature to the y-axis. Tooltips display the name of each data point via `vl.tooltip().fieldN('name')`. The data comes from a CSV file loaded with `d3.csv` from a GitHub Gist, and the chart is rendered using Vega, Vega-Lite, and the Vega-Lite API, with custom styling applied through a config object.

Kkan qiu

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of the Auto MPG Data Set from the UCI Machine Learning Repository, loaded via D3’s `csv` function. The visualization renders circles encoding weight on the x-axis, horsepower on the y-axis, and a color scale for weight, with a tooltip displaying vehicle names. It demonstrates the declarative `vl` API, combining `markCircle`, `encode`, and configurable axes, while leveraging Vega, Vega-Lite, and Vega-Tooltip for interactive rendering. The chart fills the window and adapts to its size.

MManon ROMAIN

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot shows the relationship between potassium and calcium content in various foods, with circle size encoding protein amount. The visualization loads CSV data from a GitHub-hosted NutritionFacts dataset using d3.csv, then renders the chart through the Vega-Lite API's vl.markCircle and vl.encode methods. Opacity and size settings improve readability, while config.js customizes axis styling and tooltip formatting. The page integrates Vega, Vega-Lite, and vega-tooltip libraries to display the interactive SVG output.

AAliaksandr

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

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

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automobile data, mapping weight to the x-axis, horsepower to the y-axis, and weight to color, with tooltips showing car names. It loads data from a CSV file of auto-mpg statistics via d3.csv, then renders the visualization with SVG. The code registers Vega and Vega-Lite via the `vl.register` method, applies a custom configuration for axis and label styling, and uses `vega-tooltip` to handle interactive hover details.

MManuel Bauer

82% match