D3 v5 Zoomable Sunburst of Bee Colony Statistics in the US

100%

D3 v5 Zoomable Sunburst of Bee Colony Statistics in the US

✓ Published0🌍 Public

Last edited Oct 30, 2019

Created on Oct 24, 2019

Forked from Treemap of Bee Colonies, Beekeepers, and Bee Colony Loss Numbers by State

A zoomable sunburst chart displays US bee colony statistics, breaking down each state by year and further by loss, beekeepers, and colony counts. The interactive visualization allows users to click on segments to drill down into the hierarchy, with animated transitions smoothly rescaling the arcs. Built with D3 v5, it uses the `d3.hierarchy` and `d3.partition` layouts, renders via SVG, and animates with `transition.attrTween`. Data comes from a generated `flare.json` file, ported from an Observable notebook, with colors assigned per top-level state category.

AI-generated description

An example of porting a work from observablehq into VizHub. This is a direct port of Mike Bostock’s Sunburst, modified to fit the Bee Colony loss data.

The data for this version was generated using a script from https://beta.vizhub.com/bootshine2/beebcddb5fed4c7783b242816468ba9e. Not sure how to automate the file create from the script, or it would use the original CSV file at https://gist.githubusercontent.com/bootshine2/dc83fa6615ecf51fb382e233bf90840a/raw/b36dc061260662b23849d71599d12b336ce027c9/Bee%2520Colony%2520Loss4.csv and would autogenerate the flare.json file.

MIT Licensed

Similar vizzes

Loading thumbnail…

Treemap of Bee Colonies, Beekeepers, and Bee Colony Loss Numbers by State

This treemap visualizes bee colony loss numbers, beekeepers, and colony counts across US states from 2010 to 2016. The hierarchy nests each state by year, with leaf nodes representing the three metrics. Users can toggle between summing by colony size or counting each statistic, triggering a smooth animated transition. The visualization uses d3.treemap with d3.treemapResquarify, d3.hierarchy, and d3.scaleOrdinal for coloring, rendering SVG cells with clip-paths and labels. Data comes from a generated flare.json file based on USDA survey data.

Bbootshine2

85% match

Loading thumbnail…

US Honey Bees

This visualization shows US bee colony population trends for the 2020-Q2 period across states, plotting starting colony counts on the x-axis against maximum colony counts on the y-axis. Each circle represents a state, with its radius encoding the number of added colonies via `d3.scaleLinear` and its color mapped to renovated colonies using `d3.scaleSequential` with `d3.interpolateYlOrRd`. The SVG chart uses `d3.axisBottom` and `d3.axisLeft` with tick marks, and filters out the United States, California, and Texas as outliers. Data comes from a CSV file loaded via `d3.csv`.

PPeter Gish

83% match

Loading thumbnail…

US States Heatmap of Bee Colony Loss

This interactive map visualizes annual bee colony loss across US states, with a dropdown to switch between percent loss, colony count, and beekeeper count metrics. The choropleth uses a blue sequential color scale applied through `d3.scaleThreshold`, mapping each state’s value to its fill. States are drawn as SVG paths generated by `d3.geoPath` with a `d3.geoAlbersUsa` projection from TopoJSON data, while hover effects and a tooltip (via `d3-tip`) highlight individual states. The data comes from a CSV file loaded with `d3.csv`, and the interface is built using React components.

Bbootshine2

82% match

Loading thumbnail…

Bee Colonies by State as Surveyed Across Time

This visualization displays a point for each U.S. state, with the size of each point encoding the number of bee colonies surveyed in that state for a given year, and the x-axis showing states sorted alphabetically while the y-axis represents the survey year. The chart is rendered using the Vega-Lite API, leveraging the `markPoint` function and the separation of data by color. It loads survey data from a CSV file using d3’s `csv` function, and applies custom configuration for axis styling and label readability.

Bbootshine2

80% match

Loading thumbnail…

California Bee Population

This interactive bubble chart visualizes US bee colony data from 2015 to 2021, plotting starting colonies on the x-axis and maximum colonies on the y-axis, with bubble size proportional to added colonies and color representing renovated colonies. Built with D3 v7, the visualization uses SVG rendering and animation, featuring a tooltip on hover and gridlines for readability. The chart loads data from a remote CSV file and employs scales for position, size, and color, with an optional outlier-removal toggle. A linear time axis handles quarterly data parsing, and the design references the d3-graph-gallery bubble chart template.

PPeter Gish

80% match

Loading thumbnail…

Fork of beeswarm

This visualization displays a beeswarm plot of honey bee colony loss percentages across different U.S. states in 2015, with each circle representing a reported cause of loss positioned along a logarithmic x-axis. The chart uses d3.forceSimulation with forceX and forceCollide to arrange the data points, while d3.voronoi polygons provide hover detection and interactive highlighting. The code uses d3.csv to load data_2015.csv and renders the results as an SVG with a logarithmic scale axis.

Rryan-dirajlal

80% match

Loading thumbnail…

Fork of Percent Bee Colony Loss by State and Year

A square for each state-year pair encodes the percentage of bee colony loss using a red color scale, with states sorted by their worst recorded loss. The visualization reveals no clear geographic or temporal trends, suggesting colony losses are randomly distributed across the US. Built with the vega-lite-api, the chart uses `markRect()` for the tiles, `fieldN` for categorization, and a custom tooltip to display state, year, and loss values. Data comes from the Bee Colony Loss3.csv file, with appearance customized via a separate config file.

Sstanemurhula

80% match

Loading thumbnail…

Colm Lang A5 | Bubble Chart

This bubble chart visualizes bee colony loss across four U.S. states from 2019 to 2021, plotting starting colony counts on the y-axis against time quarters on the x-axis. Each bubble’s size encodes the percentage of colonies lost, while its color distinguishes the state, with legends showing both scales. The visualization is built with D3 v7 and the d3-legend extension, using SVG rendering. Data is loaded from a CSV file via `d3.csv`, with axes created using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

CColm Lang

79% match