Started from the Top explainer


#1

The aim of this puzzle: Create a red circle that has a radius of 35 and place it at a random location at the top of the screen.

Walkthrough of the solution: Since we’ll probably want to reference our shape later on, we’ll create a new variable called balloon using the var key. After the equals sign of var balloon =, we need to create the SVG shape using svg.append(). To tell the code that the shape should be a circle, we put the string 'circle' inside of the append() parentheses. Next, we can set all of the attributes of the circle using .attr() calls. To make the circle red, set the 'fill' to 'red'. To make the radius 35, use .attr('r', 35). Since the circle should be at the top, we want the 'cy' value to be 35 which is the same as the radius. Finally, to make the horizontal location random, we pick a random position using pickRandom(position) and use that value as the 'cx' attribute.

Review cards:
If you’re looking to practice on a few previous cards to help you with Started from the Top, these 3 should help you. When you solve these, try to figure out what each part of the code does and when the order of the function calls matters.

  • Build a Snowman
  • In the Middle
  • Map of Places

Sample code solution:
(Tap below to reveal)

Since this is part of the final topic of the Animations II course and it is testing your knowledge, there is no sample solution code.

JavaScript Concepts: Identifiers, Member Expression, Variable Declaration

JavaScript Concepts: pickRandom()

D3 Concepts: .append(), .attr('fill',), .attr('r',), .attr('cx',), .attr('cy',)

Additional Code:

var position = [];
for (var i=35; i<=window.innerWidth-35; i+=5) {
    position.push(i);
}

svg.append('rect')
 .attr('fill','silver')
 .attr('y',165+35)
 .attr('width',window.innerWidth)
 .attr('height',window.innerHeight-200);

#2

I do not understand what to do here


#3

#4

I dont understand the topic ‘started from the top’ I tried to do it right but when I run the codes it keep saying I should name it balloon


#5

The name of your variable should be balloon. The beginning of your code will look like:

var balloon = svg.append('circle')...

–Frankie


#6

I really do not get the pickRandom() part it’s just confusing to me. ???


#7

My answer and it works,

var balloon = svg.append ( ‘circle’ ) .attr ( ‘fill’ , ‘red’ ) .attr ( ‘r’ , ‘35’ ) .attr ( ‘cy’ , ‘35’ ) .attr ( ‘cy’ , pickrandom (position));


#8

Hi. I’m stuck in Started from the top
They ask me to name balloon balloon. I conpleted the code for the balloon to move according to instructions. I’m not sure what to do now
Please help


I feel confused
#9

Check your spelling and capitalization. It should be all lowercase balloon.

–Frankie


#10

I’m really stuck here.

Could you tell me what to do?


#11

Could you take a screenshot of your code and post it here?

–Frankie


#12

Here you go


#13

you spelled balloon wrong.


#14

Any news?

I’m stuck and would really like to move on

Thanks


#15

Your variable name is missing an 'o'. The puzzle is checking for a variable called balloon, and it can’t find it. Change ballon to balloon.

–Frankie