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

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);