Episode 4: Sol LeWitt with D3

Starter viz: https://vizhub.com/curran/e47404b697c44440a90201c607aba594

Slides: https://docs.google.com/presentation/d/1QyuW9ssd0j5uHn89iwMD4vt5ZIYkA3bw8z-KCh1Xbv0/edit#slide=id.gc7bcaf24a2_0_19

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 :slight_smile:

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 :smiley:

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 :slightly_smiling_face:

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 :smiley:

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 :weary:

I feel like throwing my keyboard out of the window :face_with_symbols_over_mouth:

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! :sunglasses:

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.