d3 Patterns

I’m a big fan of the d3 data visualization library to the point where I wrote a book about it. Today I came across and interesting problem with a visualization I’d created. I had a bunch of rows which I’d colored using a 10 color scale.

The users wanted to be able to click on a row and have it highlight. Typically I would have done this by changing the color of the row but I had kind of already used up my color space just building the rows. I needed some other way to highlight a row. I tried setting the border on the row but that looked ugly and became a tangled mess when adjacent rows were highlighted.

What I really wanted was to put some sort of a pattern on the row. As it turns out this is quite easy to do. SVG already provides a mechanism for applying patterns as fills. The one issue is that you can’t apply a pattern as an overlay to an existing fill you have to replace it completely.

First I created the pattern in d3

Here I create a new pattern element and put a rectangle in it. I rotate the whole pattern on a 45 degree angle to get a more interesting pattern. You may notice that the code references the variable d. I’m actually creating and applyingthis pattern inside of a click handler for the row. This allows me to create a new pattern for each row and color it correctly. The full code looks like

The finished product looks like

You can change the pattern to come up with more interesting effects