A D3.js-based tree visualization component in an Astro application suffered from readability issues and cluttered categorization, impacting user experience.

Issue

The visualization had four main problems:

Overlapping text: Technology names were rendered too close together, making labels unreadable.
Poor readability: Default text styling with borders created visual noise, distracting from the data.
Unnecessary scrollbars: Fixed-height containers displayed scrollbars even when content fit.
Cluttered ‘Other’ category: Fifty-four miscategorized technologies (e.g., Docker, npm) appeared in an ‘Other’ branch, disrupting the structured view.

Culprit

The issues arose from:

Insufficient spacing in the D3.js layout for text rendering.
Default styling conflicts with the application’s theme, causing visual clutter.
Hardcoded container constraints that forced scrollbars.
A fallback categorization system that misplaced uncategorized technologies in an ‘Other’ group.

Solution

Improved Text Spacing and Layout

Increased vertical spacing to prevent text overlap, ensuring clear visibility of technology names.
Dynamically calculated SVG height to avoid fixed constraints.

Visual Styling Adjustments

Removed text borders and aligned styling with the application’s theme for consistency.
Subtle styling for count numbers to reduce visual noise while maintaining readability.

Scrollbar Removal

Eliminated fixed container constraints to allow the visualization to auto-size based on content.

Category Filtering

Added filtering logic to exclude the ‘Other’ category from the visualization, reducing clutter.
Considered alternative approaches, such as data regeneration or introducing a new category for misplaced technologies, but chose immediate filtering to simplify implementation.

Result: The visualization now displays 7 properly categorized groups with improved readability, no scroll artifacts, and a cleaner, more structured view.