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() {
rectangles.transition()
.attr('width', 0)
.attr('height',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 (hidden code that runs before the puzzle’s code):

``````var parts = svg.append('g');

var color = ['red','orange','yellow','green','blue','indigo','violet','white','pink','lime','dodgerblue'];
var rand = 2.86*Math.random()+0.14;
var n = 100;
for(var i=0; i<n; i+=1) {
parts.append('circle').attr('fill','rgb('+(55-i/2)*3*((i+1)%2)+','+(55-i/2)*7*((i+1)%2)+','+(55-i/2)*4*((i+1)%2) +')').attr('r',(55-i/2)).attr('cx',window.innerWidth/2+50*Math.sin(i*rand)).attr('cy',window.innerHeight/2+50*Math.cos(i*rand));
}

var rate = 0.65;
var rows = 10;
var cols = 15;
var w = window.innerWidth/cols;
var h = window.innerHeight/rows;

for (var i=0; i<rows; i++) {
for (var j=0; j<cols; j++) {
if (Math.random()<rate){
parts.append('rect').attr('fill',pickRandom(['blue','darkblue','dodgerblue'])).attr('stroke','lightblue').attr('width',w-2).attr('height',h-2).attr('x',j*w).attr('y',i*h);
}
}
}

d3.selectAll('circle').on('click', ()=> {d3.selectAll('circle').transition().attr('r',0).duration(1000);} );
``````
1 Like

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,
Glen.

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

`'height '`
`'height'`

The attribute names are picky.

–Frankie

2 Likes

Not sure what I am missing
Any help would be greatly appreciated
Thankyou

[EDIT]
I FOUND MY MISTAKE
THANKS REALLY LOVING THE APP

1 Like

i dont understand why this doesnt work pls help me to get this work

The `selectAll()` is looking for `'circ'`, but it should be be looking for `'rect'`. The string used to select is the same string you would use in `.append()` to create the shape.

–Frankie

Can someone help me???

Hey there,

You have an `.attr()` setting the height to 0, now add one more that sets the width to 0, so there are 2 `.attr()`'s in total.

Hope this helps!
Ben

2 Likes

But now I have another problem

Still there???

You’re so close! Try changing `'weidht'` to `'width'` and the puzzle should complete.

Thanks a lot !!!
!!!

1 Like

If the height, width and radius =0, then the objects always disappear?

1 Like

Yup! The shape will still exist, but it won’t be visible on the screen.

2 Likes

Please can someone explain to me why the ‘.transition()’ have been used? Why can’t I just change the attribute?

How can we change the transition time ?

Is there any other Google program to teach coding more deeply ?

Can anyone tell where i am doing wrong?

Pls reply as fast anyone could pls!!!

Use `'rect'` not `'circle'`

Solution
var rectangles = d3.selectAll('rect’edit);
function hideRectangles(___) {
rectangles.transition().attr(‘r’, 0).attr(‘height’, 0).attr(‘width’, 0);
};
rectangles.on(‘click’, hideRectangles);