Skip to content

perf(ui): replace wildcard D3 imports with named imports for tree-shaking#841

Open
NewCoder3294 wants to merge 1 commit intokoala73:mainfrom
NewCoder3294:perf/d3-named-imports
Open

perf(ui): replace wildcard D3 imports with named imports for tree-shaking#841
NewCoder3294 wants to merge 1 commit intokoala73:mainfrom
NewCoder3294:perf/d3-named-imports

Conversation

@NewCoder3294
Copy link
Contributor

Summary

  • Replace import * as d3 from 'd3' with named imports in 5 components to enable better tree-shaking and reduce bundle size
  • All d3.xxx() call sites updated to use direct function calls (e.g., select(), scaleLinear(), extent())
  • D3 type references (d3.Selection, d3.GeoProjection, etc.) updated to use named type imports

Files changed

File D3 functions extracted
src/components/ProgressChartsPanel.ts select, extent, scaleLinear, area, curveMonotoneX, line, axisBottom, axisLeft, bisector, pointer + types Selection, ScaleLinear
src/components/SpeciesComebackPanel.ts select, extent, max, scaleLinear, area, curveMonotoneX, line
src/components/RenewableEnergyPanel.ts select, arc, interpolate, easeCubicOut, extent, scaleLinear, area, curveMonotoneX, line, stack, stackOrderNone, stackOffsetNone, max + type SeriesPoint
src/components/Map.ts select, geoPath, geoEquirectangular, geoGraticule, line (as d3Line), curveCardinal + types Selection, GeoProjection, GeoPath
src/components/CountryTimeline.ts select, scaleTime, scaleBand, axisBottom, timeFormat + types Selection, ScaleTime, ScaleBand, NumberValue

Bundle size impact

With wildcard imports (import * as d3 from 'd3'), bundlers must include the entire D3 library (~500KB unminified) even if only a handful of functions are used. Named imports allow tree-shaking to eliminate unused D3 modules, potentially reducing the D3 contribution to the bundle by 60-80% depending on the bundler configuration.

Test plan

  • tsc --noEmit passes with zero errors
  • Pre-push hooks pass (typecheck, API typecheck, CJS syntax, version sync)
  • Verify charts render correctly in ProgressChartsPanel, SpeciesComebackPanel, RenewableEnergyPanel
  • Verify map renders correctly (cables, pipelines, graticule, countries)
  • Verify CountryTimeline renders event circles and axes

🤖 Generated with Claude Code

…king

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Mar 2, 2026

@NewCoder3294 is attempting to deploy a commit to the Elie Team on Vercel.

A member of the Team first needs to authorize it.

@koala73 koala73 added Ready to Merge PR is mergeable, passes checks, and adds value Low Value Trivial, unnecessary, or not aligned with project needs labels Mar 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Low Value Trivial, unnecessary, or not aligned with project needs Ready to Merge PR is mergeable, passes checks, and adds value

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants