2 Questions: Masks and Paths-Episode 3

Help
#1

Hello: I’ve been struggling to comprehend the concept of masks after (re)watching episode 3 of the data viz with d3 series. The tutorial went pretty quickly and I have not been able to follow it completely. I’ve been able to generate and manipulate patterns just fine. But when it comes to the mask elements I get lost even forking and trying to change the source code hasn’t worked for me yet. So in Curran’s example there are 4 layers on top of the blank svg window correct? The rectangle with the circle in it X 2 and the circle on top of a blank rectangle X 2 in each case one element creates a blank space for the pattern to present itself? Does z ordering factoring in with JS or does the white or black fill accomplish the effect?

Also, I’ve had issues with using paths in JS. As far as I can tell the syntax for this is xyz.setAttribute(‘d’,‘M123 455 …Z’); is this correct? It may very well be that there are larger problems with my code that are preventing this from working.

Thanks in advance for any pointers!

#2

I think I might have solved both problems at once- the issue was in my createElement syntax. I thought the thing at the very end was supposed to be the name of the variable, instead it appears to be the type of html element.

I had thought it should be like this:

const chevron = document.createElementNS(
‘http://www.w3.org/2000/svg’,
’chevron’
);

but really it should be like this:

const chevron = document.createElementNS(
‘http://www.w3.org/2000/svg’,
’path’
);

1 Like
#3

Nice that you solved it! Thanks for sharing the solution.

It seems you’re not using D3?

Indeed masks can be pretty tricky.