2

I'm trying to apply readable labels to a D3 Streamgraph that is rendered using completely dynamic data - various different datasets that are evolving over time from live data and the controls offered to manipulate what is shown too. All this works well - the problem is how to clearly label the streams - short of using a legend.

The great variation of hues and luminance needed makes choosing readable styling for labels that float over the graph extremely tricky, particularly with the limited SVG styling available cross platform and that the labels will inevitably overlap on the background sometimes too. For instance black coloured labels 'work' but it's hard to read sometimes over the top of darker colours (which we really need to ensure a good range)...

Anyone done anything similar/addressed same challenge? I'm currently pondering using a legend instead.

VividD
  • 10,456
  • 6
  • 64
  • 111
Michael Rawling
  • 21
  • 1
  • I spent a bunch of time trying to get labels to look right on a stream graph and I ended up with a legend and tooltips instead. No matter what percent I could get to look 'good' there was always 10 - 15% of charts that just ended up looking really bad or were unreadable when I tested across sets of random data. – Bill Jan 30 '13 at 23:04

1 Answers1

0

A couple of ideas may help:

Add a background rectangle around the text with opacity set to 0.7 (the color being the same as the data series). This helps make the text pop. For the border of the rectangle, use d3js rgb.darker or rbg.brighter.

var pathStroke = d3.rgb( item.color ).darker(1.4).toString()

For preventing overlapping labels, I can think of two solutions - both hard. Use d3js Force Layout or write your own layout code. We ended up writing our own layout code for tooltips in d3-traits. See tooltips.js and layout.js. 

d3.trait.layout.verticalAnchorLeftRight( foci, self.chartRect())

layout.js does have some general purpose and very flexible layout routines. It will layout rectangles within a bounding box avoiding overlap and determines if the labels need to be left or right justified. If the origins of the rects are toward the right edge of the bounding box, they are right justified.

Flint O'Brien
  • 526
  • 6
  • 8