Four to Five explainer

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 (hidden code that runs before the puzzle’s code):

var svg = canvas.append('g');

svg.attr('transform',`translate(${window.innerWidth/2},${window.innerHeight/2})`);

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

Again, this puzzle isn’t working Screenshot_20200120-170658|281x500

Hey there, your .attr() is inside your .append(), like this: svg.append('circle'.attr('r'. 25))

Change it so that they are chained together like this: svg.append('circle').attr('r'. 25)

Thanks Ben but it won’t let me do that. Once the brackets close, attr() disappears from the keyboard.

Try resetting the puzzle. If the .attr() is still disappearing from the keyboard, try submitting a bug report by tapping on the menu button in the top-right corner of the puzzle screen and selecting “Send Feedback”.