Four to Five Puzzle Explainer

#1

Aim of this puzzle:
Use the append method .append() to create a new SVG shape.

Walk through of the solution:
The append method .append() is used to create an SVG shape. It takes one argument: the name of a shape.

In the code that you start off with, the dice has four circles. In this puzzle, you’ll edit the five variable so it creates a new circle and the dice changes from four to five.

To complete the puzzle, attach .append() to the end of svg. Set the argument of .append() to 'circle'. Lastly, give the circle a size by using .attr() to set the circle’s radius, 'r', to 10.

Sample code solution:
(Tap below to reveal)

var five = svg.append('circle').attr('r', 10)

JavaScript Concepts: Variable

D3 Concepts: Attribute, .append()

Additional Code:

svg.append('rect').attr('height', '100').attr('width', '100').attr('fill','white').attr('x', -50).attr('y', -50)
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', -30).attr('cy',-30);
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', 30).attr('cy',30);
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', -30).attr('cy',30);
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', 30).attr('cy',-30);
0 Likes

listed #2
0 Likes