Grimsas

@Grimsas·2 public vizzes

D3 Nested & Independent General Update Pattern

This example demonstrates a nested General Update Pattern where each fruit group contains an independent, data-driven set of rectangles. The code shows how to use `selection.each` with the old-school `function` notation to access `this`, then create a new D3 selection via `select` for each `<g>` element. This allows a different number of rectangles per fruit, with sizes varying by fruit type. The visualization responds to data changes—adding, removing, and modifying fruits—updating both the outer groups and their inner rectangles through separate update patterns. It renders to SVG using D3 v6.

Oct 24, 2020

Loading thumbnail…

Read in JSON department files

This interactive sunburst diagram visualizes student enrollment across university departments, courses, and modules, segmented by gender. The visualization aggregates three JSON data sources—department names, course pathways, and module records—into a hierarchical structure rendered as animated arcs. Using D3 v5’s `d3.partition` and `d3.arc`, the chart displays the hierarchy with color-coded segments for each department. Radio buttons allow filtering by department, triggering a transition that updates the displayed arcs. The code employs a `d3.hierarchy` with a `sum` accessor and a `d3.scaleOrdinal` with an interpolated rainbow color scheme.

Oct 22, 2020