Upgrade d3 from 3 to 7

[arikfr]

What type of PR is this?

• Other (dependencies)

Description

Part 8 of the frontend dependency upgrade stack tracked in #7848. Stacked on #7857.

Ports the d3 3 code to d3 7: viz-lib's box plot, sankey, sunburst, word cloud, pie/heatmap colors, map colors and the Albers USA projection script, plus the client's Resizable. Plotly no longer holds this back: since plotly.js 2 (#7359), it depends on individual d3 modules rather than the d3 package.

API changes handled

• Scales, axes, arcs and projections move to their d3 4+ names (scaleBand, scaleLinear, scaleOrdinal, axisBottom/Left/Right, arc, geoAlbersUsa/geoMercator).
• d3.layout.partition becomes d3.hierarchy + d3.partition.
• d3.nest becomes d3.group/groups. d3.functor and d3.timer.flush become an inline equivalent and timerFlush.
• Event listeners receive (event, datum) since d3 6, which affects the sankey and sunburst mouseover handlers.
• Enter selections are no longer merged into the update selection. Without an explicit merge(), the sunburst's breadcrumbs lost their positions and stacked on top of each other; the comparison below caught this.

Where d3 7 changed behavior, the port keeps d3 3's results

• Sunburst: d3 3 sorted children by value (largest first), computed values from leaves only, and returned the nodes in pre-order of the sorted tree. That order sets the color domain, so nodes are collected after sorting. My first version collected them before sorting, which gave every segment a different color; the visual tests (Add Playwright visual tests for visualizations, remove Percy #7853) caught it.
• Box plot with a single column: d3 3's ordinal scale returned 0 for a value outside its domain, and d3 7's band scale returns undefined, which produced a NaN offset. The offset uses 0 in that case, as before.
• Box plot axes: d3 4+ axes draw with currentColor, which turned the tick labels gray. The box plot's axes are styled black, as before.
• category20, which d3 removed, is kept as D3Category20 with d3 3's colors (sankey, word cloud).
• Word cloud: when all words have the same count, d3 3 gave every word the smallest size and d3 4+ would use the middle one (10px vs 55px).
• Resizable: it asked for ease("swing"), which d3 3 didn't know and treated as linear, so it now uses easeLinear.
• convert-projection.ts (offline script): pinned to d3 3's default Mercator scale (150; d3 4+ uses ~152.6).

A latent bug, fixed: box-plot/d3box.ts used a global d3 it never imported. That global only existed because d3 3's UMD bundle takes its AMD branch under webpack and assigns this.d3. It now imports d3.

How is this tested?

• Unit tests (pytest, jest)

• Manually

• Lint, type-check (client and viz-lib), jest (client 96, viz-lib 154, no snapshot changes; the pie and heatmap fixture tests cover the color scales) and the production build pass locally.

• Rendering comparison: I rendered the sankey, the sunburst (both data formats, plus the hover state) and the box plot in jsdom with the same data, using the previous code on d3 3.5.17 and this code on d3 7.9.0, then diffed the SVG:

  • Sunburst: identical elements, attributes and breadcrumbs. Arc coordinates match within 0.0005px (d3 7 rounds path coordinates to 3 decimals). This comparison missed the color order bug above.
  • Sankey: identical link paths and nodes. Node stroke colors are now written as rgb(…) instead of hex, and d3 7 rounds darker() channels where d3 3 truncated, so some differ by 1.
  • Box plot: identical boxes, medians, whiskers, outliers and tick labels. d3 4+ axes set presentation attributes (overridden by our existing CSS), and ticks shift by 0.5px on non-HiDPI screens for crisp lines.

• Visual tests (Add Playwright visual tests for visualizations, remove Percy #7853): pixel-identical to the previous step, except the box plot, whose grid lines shift by a sub-pixel amount (d3 4+ axis offsets). Its baseline is updated in a separate commit.

• Regenerated usa-albers.geo.json with the ported script: all 13,380 coordinates match the committed file (max difference 2e-13).

Bundle size: the vendor chunk grows by about 158 KB (uncompressed). viz-lib's lib/ is CommonJS, so webpack can't tree-shake d3 and includes all of d3 7. Building lib/ as ES modules would fix that; it's a follow-up because the client's Jest setup currently relies on lib/ being CommonJS.

🤖 Generated with Claude Code

[greptile-apps]

Confidence Score: 5/5

[High risk] Major version upgrade of the charting library.

The PR appears safe to merge; no outstanding findings or new actionable issues were identified.

Summary

This PR migrates the frontend and visualization library from D3 3 to D3 7, ports affected visualizations and interactions, and updates the lockfile and visual baseline. Since the previous review, it also restores Jest routing configuration and adds route-ordering tests.

_{Reviews (6) · Last reviewed commit: "Update visual test baselines for d3 7" · Reviewed by Greptile}

[cubic-dev-ai]

1 issue found across 15 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="viz-lib/src/visualizations/sunburst/initSunburst.ts">

<violation number="1" location="viz-lib/src/visualizations/sunburst/initSunburst.ts:263">
P3: Add a Cypress interaction test that moves between sunburst segments and verifies highlighting and breadcrumb placement; a static snapshot does not exercise the migrated hover behavior.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P3: Add a Cypress interaction test that moves between sunburst segments and verifies highlighting and breadcrumb placement; a static snapshot does not exercise the migrated hover behavior.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At viz-lib/src/visualizations/sunburst/initSunburst.ts, line 263:

<comment>Add a Cypress interaction test that moves between sunburst segments and verifies highlighting and breadcrumb placement; a static snapshot does not exercise the migrated hover behavior.</comment>

<file context>
@@ -271,7 +260,7 @@ export default function initSunburst(data: any) {
     // helper function mouseover to handle mouseover events/animations and calculation
     // of ancestor nodes etc
-    function mouseover(d: any) {
+    function mouseover(event: MouseEvent, d: any) {
       // build percentage string
       const percentage = ((100 * d.value) / totalSize).toPrecision(3);
</file context>

[arikfr]

Same as the other sunburst thread: reasonable, better placed in the Playwright suite.