Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 16, 2019
Created on Sep 16, 2019

This visualization shows bee colony loss trends over time across different states, with each line representing a state’s annual colony counts. The graphic uses a line mark with size and opacity adjustments to display time-series data. The example is built with the Vega-Lite API, which wraps Vega-Lite and Vega, and incorporates D3.js for data loading via `d3.csv`. Data comes from a remote GitHub gist, and the visualization renders as a scalable SVG with an interactive tooltip handled by Vega-Tooltip.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This heatmap displays the percentage of bee colony loss across US states and years, with each square colored by the magnitude of loss. The visualization reveals no clear geographic or temporal patterns, suggesting colony loss is random and consistent nationwide. Built with Vega-Lite API using the `markSquare` function, it encodes state on the x-axis, year on the y-axis, and loss percentage as color. Data comes from a CSV loaded via d3.csv, with rendering handled by Vega and vega-tooltip for interactive inspection.

Bbootshine2
83% match
Loading thumbnail…

Percent Bee Colony Loss by State and Year

This visualization displays the percentage of bee colony loss across US states and years using a grid of colored rectangles. The chart uses a red color scale to highlight loss severity, with states sorted by their worst year to reveal patterns. Built with the vega-lite-api library, it encodes state on the x-axis, year on the y-axis, and loss percentage as color, while tooltips show exact values. The data comes from a CSV file retrieved via d3’s csv function, rendering through Vega-Lite and Vega with an SVG output.

CCurran Kelleher
82% match
Loading thumbnail…

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This color-coded heatmap shows the percentage of bee colony loss across US states and years, revealing a random pattern with no clear geographic hotspots or temporal trends. Each square represents a state's loss for a given census year, with color intensity encoding the loss percentage. The visualization uses the Vega-Lite API’s `markSquare` function, projecting state names on the x-axis and years on the y-axis, with data sourced from a CSV of Bee Colony Loss. Built with D3 and Vega-Lite, it applies custom axis and label styling from a config file.

Cchungmin-yu
82% match
Loading thumbnail…

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This color-coded heatmap shows the percentage of bee colony loss across US states and years, revealing a random pattern with no clear geographic hotspots or temporal trends. Each square represents a state's loss for a given census year, with color intensity encoding the loss percentage. The visualization uses the Vega-Lite API’s `markSquare` function, projecting state names on the x-axis and years on the y-axis, with data sourced from a CSV of Bee Colony Loss. Built with D3 and Vega-Lite, it applies custom axis and label styling from a config file.

Cchungmin-yu
82% match
Loading thumbnail…

Percent Bee Colony Loss by State and Year

This visualization shows percent bee colony loss by state and year, with each square representing a state's loss percentage during a census year. The layout is designed to reveal geographic trends or hotspots, though the data ultimately demonstrates that colony loss appears random and consistent across the US. The visualization is built using Vega-Lite and the vega-lite-api, using `markRect` and `markPoint` functions to encode data with color and position. Data comes from a CSV file loaded via `d3.csv`, with tooltips and sorting by worst-hit states enabled through VEGA tooltip handlers and configuration settings.

Ppalti
80% match
Loading thumbnail…

Vega-Lite API Template

This example displays a line chart of miner deaths over time, using a thick semi-transparent stroke that emphasizes the overall trend and peaks. It builds the visualization declaratively with the Vega-Lite API (`vl.markLine`), while D3’s `csv` loads the external dataset from a GitHub gist. The chart is configured via a shared `config` object, and the view is rendered as an SVG with tooltip support from `vega-tooltip`, all initialized through `vl.register`.

DDjPendej0
79% match
Loading thumbnail…

Percent Bee Colony Loss by State and Year

This heatmap displays the percentage of bee colony loss for each U.S. state across multiple years, with cells colored on a red scale from light to dark to indicate increasing loss severity. States are sorted by their worst recorded loss, and hovering over a cell reveals a tooltip with the specific state, year, and percentage. The visualization uses vega-lite-api to construct a rectangle mark, with data loaded via d3.csv from a GitHub Gist containing the Bee Colony Loss dataset. It is built with Vega-Lite’s markRect and tooltip encoding, and configured to fit the full window.

Aalicenie
79% match
Loading thumbnail…

Bee Colony Statistics by State and Year

A grid of colored rectangles maps bee colony loss percentages across U.S. states and years, revealing a random pattern with no clear geographic or temporal hotspots. Each cell encodes loss severity through a red color scale, with tooltips showing state, year, and percent loss for individual data points. The visualization is built using Vega-Lite API, React, and D3, loading data from a CSV of Bee Colony Loss statistics. The vega-lite-api `markRect` function encodes state on the x-axis and year on the y-axis, with color intensity representing the percentage loss.

Bbootshine2
79% match