Mix-Mode-Multiply

        

I recently saw the following tweet from Mike Bostock, creator of D3.js.

CSS mix-blend-mode: multiply is great for improving readability with overdraw (occlusion). Here’s a before/after with hierarchical edge bundling. pic.twitter.com/V4J3vDToZc

— Mike Bostock (@mbostock) May 23, 2018


I thought I’d try it out with my BNF interactions project to see how it might affect the intuitive feel of the graphics. Ideally, any emphasis drawn to the overlapping lines would highlight the drugs which have more interactions with the others.

It starts off below, with the top 100 drugs and their interactions plotted as lines between points on the edge of the circle.

I added one line of css which creates a colour change where lines overlap each other.

path {
  mix-blend-mode: multiply;
}

The lines darken at points where the lines converge. I’m not convinced it works at highlighting particular drugs themselves, given that lots of lines converge at the middle, however it does add a feeling of quantity around some of the names.

I’ve highlighted the ‘severe’, BNF-graded interactions. These are a particular set of drugs I’m interested to know more about, do particular drugs or classes have more numerous severe interactions associated with them? But the rest of the interactions, coloured in blue, distracts a little.

Lets remove everything else.

It is interesting to see the plot with the ‘mix-blend-mode: multiply’ option on. You can compare it by opening the ‘inspect’ panel on chrome and unticking the css option in the console, or as an image here. In my mind there is still some of that feeling of quantity given by the visual appearance of the line quantity already, but the colour change does still emphasise that again.

The interactive version is given below, you can try the full-sized version here.

Last Modified:
Next: 'Google Custom Search'
Prev: 'UK Local Elections 2017'