Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 20, 2021

Created on Oct 20, 2021

This example shows the distribution of CSS named colors by plotting each color’s keyword against its RGB hex value as a computed field, using a semi-transparent area mark with tooltips for individual names. It loads color data from a CSV via d3.csv, then renders the visualization through the Vega-Lite API, which registers Vega and Vega-Lite instances and configures an SVG view with a custom tooltip handler. The chart auto-fits to the window size and applies a dark themed configuration for labels and axes.

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 visualizes the relationship between CSS named colors and their specifications, plotting each color as a circle positioned by its `Specification` and `Keyword` fields, with the `RGB hex value` determining the circle’s color. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite through the `vl` object, and uses the `vl.markCircle` method to encode the data. It loads a CSV file of named colors via `d3.csv`, applies a custom configuration for axis styling, and renders the chart as an SVG with tooltips provided by Vega-Tooltip.

NNikita Toropov

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between CSS color keywords, their specifications, and RGB hex values using a scatter plot. Each point is colored by its corresponding keyword, with axes sorted by keyword frequency. The visualization is built using the Vega-Lite API, layered with d3.csv for data loading from a Gist-hosted CSV file. Custom configuration settings adjust axis styling and label fonts, while Vega Tooltip provides interactive hover details. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, adapted here for CSS color exploration.

RRemy-dev

89% match

Loading thumbnail…

Vega-Lite API Part I

This example visualizes CSS named colors as an arc diagram, where each color name is mapped to a radial segment and its hue determines the stroke color. A tooltip reveals the color name on hover, and the chart fills the entire browser window with a dark, high-contrast theme. The visualization is built using the Vega-Lite API, which composes a single `markArc` encoding with `fieldN` mappings for position, color, and tooltip. Data is loaded asynchronously from a CSV file via `d3.csv`, while the view is rendered as SVG using Vega, Vega-Lite, and the vega-tooltip handler.

CChinedu Ozodi

85% match

Loading thumbnail…

Fork of Vega-Lite API

This example shows a line chart of temperature over time, styled for a clean, dark-on-light appearance with large axis labels and a tooltip that displays temperature values. The visualization is built entirely through the Vega-Lite API, using `vl.markLine`, `vl.x().fieldT()`, and `vl.y().fieldQ()` to encode the data, which is loaded from a CSV file via D3’s `csv` function. It registers Vega, Vega-Lite, and the Vega-Tooltip handler, then renders an SVG with automatic resizing to fit the window.

MMichael Bergerson

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to visualize the classic Auto MPG dataset, plotting categorical origin on the x-axis and quantitative horsepower on the y-axis, with color encoding for weight and size encoding for miles per gallon. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG scatterplot with a tooltip showing car names via the vega-tooltip Handler. Custom configuration in config.js adjusts font sizes and axis styling for readability, while getData.js loads the CSV using d3.csv.

Ssd2beatles

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a bar chart from CSV data, with a custom dark theme applied through configuration. The visualization is built declaratively in `viz.js` using `vl.markBar()`, mapping fields `a` and `b` to the x and y axes, while `index.js` orchestrates the data loading via D3’s `csv` function and registers Vega-Lite with tooltip support. The chart is sized to fill the viewport using the `autosize` directive, with axis and label styling customized in `config.js` for readability.

SSamirAhma

80% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template2

This example displays a line chart of temperature readings over time, using a simple categorical tooltip to show each value. The visualization is built with the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries, and rendered as an SVG. Data is fetched asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styling for improved readability.

AArookie-2020

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

80% match