Graphs/Diverging Bar

Edit src/renderers/d3/comparison/diverging-bar.ts and save to see changes across all configurations

Tests: 30Sections: 6

Filter:

Container SizesSame 8-item dataset, different container dimensions

Small350×220 · 8 rows

Medium500×320 · 8 rows

Large700×420 · 8 rows

Wide800×280 · 8 rows

Tall350×500 · 8 rows

Data VariationsDifferent item counts and positive/negative distributions

5 items500×280 · 5 rows

10 items500×360 · 10 rows

20 items600×500 · 20 rows

Mostly positive500×320 · 8 rows

Mostly negative500×320 · 8 rows

Config VariationsDiverging bar has limited config options (renderer is straightforward)

Default500×320 · 8 rows

No title500×320 · 8 rows

With y-axis title500×320 · 8 rows

Narrow range500×320 · 8 rows

Color SystemNamed palettes, highlight mode (note: renderer hardcodes green/red for pos/neg)

Default (Categorical)500×320 · 8 rows

Green Palette500×320 · 8 rows

Highlight: Marketing500×320 · 8 rows

Multi-Highlight500×320 · 8 rows

Purple Palette500×320 · 8 rows

Vertical OrientationCategories left-to-right, bars extend up/down from zero line

Monthly P&L700×400 · 12 rows

Quarterly Growth600×350 · 8 rows

Weekly Change800×350 · 12 rows

Yearly Budget Variance600×380 · 7 rows

Small vertical400×280 · 6 rows

Edge CasesStress tests and unusual data distributions

All positive500×320 · 5 rows

All negative500×320 · 5 rows

Single item500×200 · 1 rows

Huge range600×320 · 6 rows

Near-zero values500×320 · 6 rows

Long labels600×400 · 5 rows