Big Brown Bear explainer

Aim of the puzzle:
This puzzle combines the use of JavaScript concepts (for…of loops, arrays, and objects) and D3 concepts ('cx' , 'cy' , 'r' and 'fill' attributes) to modify shapes.

Specifically, you’ll use a for…of loop and data stored in an array of objects to set the attributes of multiple shapes.

Walk through of solution:
This puzzle imports dotList from additional code. dotList is an array of 23 objects. Each object has 4 properties: x, y, size, and color. In the code that you start off with, the for…of loop iterates through dotList and uses the properties of each object to set the 'cx'and 'fill' attributes of a circle. It also sets the 'cy' and 'r' attributes but doesn’t use data from dotList and instead uses a number. In this puzzle, you’ll change the values of the 'r' and 'cy' attributes to turn the circles into a bear.

To complete the puzzle, set the 'cy' attribute to dot.y and the 'r' attribute to dot.size. Now, each circle will have the correct size and position.

Sample code solution:

import { dotList } from 'grasshopper.animations';

for (let dot of dotList) {
    svg.append('circle').attr('fill',dot.color).attr('cx',dot.x).attr('cy',dot.y).attr('r',dot.size);
}

JavaScript Concepts: For…of loop, Variable, Import
D3 Concepts: Attribute, .append()
Additional Code (hidden code that runs before the puzzle’s code):

let dotList = [
    {x:155, y:235, size:100, color:'saddlebrown'}, // body
    {x:155, y:235, size:85, color:'sienna'}, 
    
    {x:105, y:40, size:30, color:'saddlebrown'}, // left ear
    {x:105, y:40, size:20, color:'sandybrown'},
    
    {x:205, y:40, size:30, color:'saddlebrown'}, // right ear
    {x:205, y:40, size:20, color:'sandybrown'},
    
    {x:155, y:100, size:70, color:'saddlebrown'}, // head
    
    {x:155, y:130, size:30, color:'sandybrown'}, // snout
    
    {x:146, y:146, size:10, color:'black'}, // smile
    {x:164, y:146, size:10, color:'black'},
    {x:145, y:142, size:10, color:'sandybrown'},
    {x:165, y:142, size:10, color:'sandybrown'},
    
    {x:155, y:124, size:20, color:'black'}, // nose
    
    {x:125, y:80, size:9, color:'black'}, // left eye
    {x:125, y:84, size:9, color:'saddlebrown'}, // left eyelid
    
    {x:185, y:80, size:9, color:'black'}, // right eye
    {x:185, y:84, size:9, color:'saddlebrown'}, // right eye
    
    
    {x:55, y:190, size:30, color:'saddlebrown'}, // left paw
    {x:55, y:190, size:20, color:'sandybrown'},
    {x:10,  y:170, size:10, color:'saddlebrown'},
    {x:27, y:148, size:10, color:'saddlebrown'},
    {x:55, y:140, size:10, color:'saddlebrown'},
    {x:82, y:150, size:10, color:'saddlebrown'},
    
    {x:255, y:190, size:30, color:'saddlebrown'}, // right paw
    {x:255, y:190, size:20, color:'sandybrown'},
    {x:228, y:150, size:10, color:'saddlebrown'},
    {x:255, y:140, size:10, color:'saddlebrown'},
    {x:283, y:148, size:10, color:'saddlebrown'},
    {x:300, y:170, size:10, color:'saddlebrown'},
];
2 Likes


What’s wrong i don’t know