I’ve presented Microtext Line Charts a number of times. There is a lot of interest and a lot of questions. Questions are generally two flavors.
- How do you implement this?
- What happens if:
- there are more data points in the line
- the lines cross each other more frequently
- the lines have sharp corners rather than interpolated bends
- the text is a bit larger (or bit smaller)
- the text is differentiated using caps; or italics; or weight; or etc.
- the text has a halo, doesn’t use color, uses different sizes on different lines, etc.
- the text animates with each successive update
- you could put data values in the lines at a high point or a low point
- you could shift the text so that it is less likely to overlap
- the text is a narrative explanation instead of labels
Short answer to both questions: Here’s a link to an interactive example on CodePen. Try it out, copy it, make changes, run evaluations. It uses random fonts, colors and data. It has buttons to turn on/off the underlying lines and change text size. If you do use the technique, I appreciate acknowledgement (e.g. refer to this post, or cite this research paper).
For those asking how the code works, essentially D3 is a library that manipulates SVG. SVG has built-in text-on-path functionality. D3 makes lines for line charts. These lines can be used as paths. For SVG text, you can add text to a text path and then associate the text path with the line. From the SVG reference:
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a ‘path’ element. To specify that a block of text is to be rendered along the shape of a ‘path’, include the given text within a ‘textPath’ element which includes an ‘xlink:href’ attribute with an IRI reference to a ‘path’ element.
— W3 SVG Specification, Text On A Path
For those asking all the other questions, click the link to the sample code. Each time you refresh the page, the random data will be different – more points, fewer points, more volatility, less volatility, different colors. And you can modify the code from there.
For example, white halos around the text *could* be added by changing the stroke outline of the text (bad idea! – the stroke width will eat into the fill of the letterform reducing text legibility in an representation where legibility is already challenged by overlapping text); or better, the halo could be added by making a second copy of the text with a white fill and a fat white stroke under the other text.
Instead of one long string of microtext, individual pieces of microtext could be placed along the line, then nudged left or right (dx) to reduce collision. Similarly, text labels corresponding to the high point or low point for a line could be shifted to the high/low points on each line based on shifting its left right position.
And so on.