Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 circle barchart with nested data() and join()

Public visualization

D3 circle barchart with nested data() and join()

1 star3🌍 Public
AAxVa 🐍 💪
Last edited Feb 6, 2024
Created on Feb 4, 2024

This example shows Nobel Prize laureates from 1901 to 1905 arranged as circles in a grid, with each year as a column and categories color-coded via a legend. The visualization uses D3 v7’s nested `data()` and `join()` methods to bind grouped data to SVG circle elements, with `d3.group` organizing entries by year. Animated transitions highlight updates when data changes. The chart includes rotated x-axis tick labels and a legend built with joined category groups, rendering entirely in SVG.

AI-generated description

D3 circle barchart with nested data() and join()

Visit https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023

Comments

Sign in to join the discussion.

MIT Licensed