Category: Visualization

There is no language I find quite so humbling as D3.js. Just when I think I understand it, I get stumped for a whole day trying to do something as simple as adding a colored background to a text element so the letters are readable against the rainbow-colored monstrosity sitting behind it. Well, if you found this post amongst the sea of woefully inadequate advice that I had to wade through, hopefully you have finally found your answer. In short, we are going to look at how to use D3.js to:

1. Add a rect element for each text element in a dataset.
2. Set the size of that rect element to match the corresponding text element.
3. Ensure the rect element sits behind the text element, not on top of it.

Note: for this explainer we are working with D3.js version 6.