Microtext Line Charts: Sample Code

MicrotextLinesRandomI’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.

  1. How do you implement this?
  2. 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
    • etc.!

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.

See the Pen Microtext Line Chart by RBrath (@Rbrath) on CodePen.

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.

About richardbrath

Richard is a long time visualization designer and researcher. Professionally, I am one of the partners of Uncharted Software Inc. I have recently completed a PhD in data visualization at LSBU. The opinions on this blog are related to my personal interests in data visualization, particularly around research interests related to my PhD work- this blog is about exploratory aspects of data visualization not proven principles.
This entry was posted in Data Visualization, Line Chart, Microtext, Text Visualization. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s