Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 2, 2023

Created on Mar 2, 2023

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.

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 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.

AAnkit-Ian-53787

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

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

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a circle-marked visualization of religious populations by country, with circle size encoding population and both axes using categorical fields. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and renders to an SVG via Vega. The underlying data is loaded from a CSV using d3.csv, and the visualization includes tooltips through the vega-tooltip Handler. The code applies custom axis and label styling, and sets the chart to fit the full browser window.

Ccynichole

80% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2

80% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from a CSV file, plotting engine horsepower against miles per gallon. Circle size is fixed, while color encodes vehicle weight and a tooltip displays the car name on hover. The visualization is built using the Vega-Lite API, with `vl.markCircle` defining the marks and `vl.x().fieldQ`, `vl.y().fieldQ`, `vl.color().fieldQ`, and `vl.tooltip().fieldN` specifying the encodings. Data is loaded via `d3.csv`, and the Vega-Lite specification is rendered to SVG using the `vega-lite-api` library with custom axis and label styling from the `config` object.

KKhadidja Arezki

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to plot automobile data, showing each car as a circle positioned by weight and horsepower, colored by origin, and sized by fuel efficiency (mpg). The code loads CSV data from a GitHub gist via D3’s `csv` method, then builds the chart with `vega-lite-api`’s `markCircle` and encodes position, color, size, and tooltip fields. Rendered as an SVG through the Vega renderer, the visualization includes a Vega tooltip handler for interactive inspection.

80% match