Starter viz: https://vizhub.com/curran/e47404b697c44440a90201c607aba594
Exercise options:
- Make the background rectangles match
- Reproduce any Sol LeWitt piece with D3
- Create art in the spirit of Sol LeWitt with D3
1 Like
US Flag Sol LeWitt Style with d3
2 Likes
Sorry for being late to the party. Iām trying to catch up with the top of this amazing course. Just a question and a little caveat about episode 4 for those who try to code live 
Question: how did @curran perform multiline JS comments in VizHub? It seems to me that this time we are not in Vim mode. Itās extremely useful adding // to multiple JS lines with mouse selection.
Caveat for dummies (like me): When we moved from pure svg to d3, I spent half an hour figuring out why masks were not working properly anymore. Turned out I was creating masks before the code that creates vertical and horizontal black rectangles. If you do that, the method selectAll('rect') changes also the rectangles you declared previously for the masks, breaking the viz. The classes and the group element approaches showed later fix also this kind of problem. Hope saving someone elseās time 
PS: isnāt episode 7 on air this Saturday?
Cheers!
1 Like
Hello @floatingpurr!
The multiline JS comments on a selection is done with CTRL + /
The full list of available shortcuts is here: https://codemirror.net/demo/sublime.html
Oh yeah, selectAll('rect') will indeed select all rects, which can be confusing. There are lots of footguns like this as things get more complex with D3. Whenever new cases appear, new measures must be taken. For example when you have different categories of the same type of element, you need to start using either groups or classes to distinguish between them. When data be comes dynamic you need more code to deal with updating and exiting elements. Itās a journey for sure, but I hope you stick with it! The payoff of the abilities youāll gain, to be able to build whatever you can envision in your mindās eye, will be worth it.
April 17 was cancelled, but weāre still on for April 24.
Thanks, as usual! Hope to complete episodes 5 and 6 before the next lesson!
Hi everyone,
Working my way through the past episodes and hoping to catch up soon 
Here is my attempt to reproduce a Sol LeWitt piece using D3:
There is a lot of code duplication so quite some scope to re-factor and clean it.
However, I have a question related to the code. I order to create the squares on the second row, I had to use the transform attribute on the rect elements. But when I did this, I also had to apply similish (but not same) transformation on the mask as well. This can be seen on lines 61 and 84 of the index.js file.
In the current code, I manually tweaked the transformation parameters so that the end result looks as intended but would be very interested to know how masking in general works when transformations are applied to svg elements. @curran any thoughts?
@kaustavSen Great work and great question!
I had to fork yours and play with it a bit to understand what is going on. It appears as though when you apply a transform to an individual element, like a <rect>, and that element has a mask, then the mask that is applied to it also gets the same transform. Thatās why it worked when you applied the inverse transform to the mask.
Hereās an idea I tried that simplifies things: apply the mask to a parent <g> element that contains the rectangles, then apply the rotation to the rectangles. When you do it this way, the mask does not get the same transformation.
Hereās the working example:
Thanks a lot, @curran! This is really helpful. I think I grok this now. So, as a rule of thumb if we have individual elements, says <rect> to which transformations are applied, itās always a good idea to apply a mask to a parent <g> element rather than directly to the <rect> elements. This now makes sense as well!
Just another newbie āVizHubā related question - I really liked how you inserted the VizHub code as a separate container in your response. I tried to figure out how you did this in the editor but couldnāt find an option to do soā¦ Are there any docs which I can refer to on how to do this or is this using some Markdown feature?
@kaustavSen Excellent! Indeed, applying a mask to a parent <g> will work well, and make sure the stuff inside the <g> will be transformed independently of the mask.
The embed snippet feature is under the āshareā button (arrow).
You can select the lines to highlight, and it gives you an embed code that works in this forum and anywhere else iFrames are allowed.
There is no documentation page for this feature at the moment, but creating such a page is an excellent idea! I hope to build out more robust documentation for VizHub feature going forward, but for now I think this forum is the best place to find things like this in the mean time.
Great - this is really helpful! Thanks again
1 Like
I decided to use all the symbols to complete this exercise. I made quick progress then got stuck, with the allocation of the mask id to the different rectangles and shapes i.e. I wasnāt able to iterate through them to allocate a alternate fill for odd an even for mask 1 and 2 (see here):
So I then broke it out into odd and even masks. The result is here:
Although, I think this is too hacky and there is a more efficient way to do this and refactor the code as there seems to be lots of duplication. Would be interested in any advice.
Amazing! Iām thrilled that you took on the challenge. It is a tricky puzzle indeed.
Hereās my take on how it can be solved:
Next challenge: add animation such that the shapes rotate!
1 Like
Thanks for responding Curran.
Ah I see now, the āselectionā was the key that I was missing. I still donāt fully understand it yet.
Iāve tried and Iāve tried, but I just canāt comment out every line at once with ctrl + shift + /
Iām losing my mind here. I wish I could do it with a mouse lol 
I feel like throwing my keyboard out of the window 
I finally figured it out. It wasnāt working because Iām using a foreign keyboard. Luckily thereās a slash (/) on the num pad.
I thought this info could be useful to some who are struggling with the same issue. I hope you get to read this before you have destroyed your keyboard! 
Now itās time to chill.
OK, getting there. Still confusing the masks but after this I feel a bit more comfortable. I am sharing what I have done so far but I will continue with more examples:
Very nice! Thank you for sharing. I like how the color changes the whole feel of it.