Makahiya explainer


The aim of this puzzle: Make the boxes disappear when you tap on them.
Walkthrough of the solution: In the first line you notice that the rectangles variable is selecting all of the circles. That should be changed to 'rect'. What the d3.selectAll() function does is find all of the shapes of a certain type and store them in a variable, so you can do things with them later. Inside of the function you can see it’s trying to change the 'r' attribute, but rectangles don’t have an 'r' attribute. Instead, it should set the 'width' and 'height' to zero. This way, the transition will show the rectangles shrinking away when the hideRectangles function is run. And how do you get that function to run? Look at the last line: hideRectangles will run when you 'click' .on() the rectangles.
Sample code solution:
(Tap below to reveal)

var rectangles = d3.selectAll('rect');
function hideRectangles() {
    .attr('width', 0)
rectangles.on('click', hideRectangles);

JavaScript Concepts: Code Block (function), Identifiers, Member Expression, Variable Declaration
D3 Concepts: .selectAll(), .transition(), .attr(‘width’,), .attr(‘height’,), .on(‘click’,)
Additional Code: There is hidden code that runs before the puzzle’s code that sets the size, color and location of the SVG shapes, and creates the function that causes the ‘flower’ to disappear entirely.


Hello there !

I’m stuck with this puzzle ! My answer wasn’t working so i get there to find the correct way, but it seems that even this solution doesn’t work with me… Can someone help me to figure it out or it’s a bug ?

Thank you,


There is an extra “space” at the end of the ‘height’ attribute:

'height '

The attribute names are picky.