Donut Hole Puzzle explainer

Aim of the puzzle:
Use the attribute method .attr() to set the radius attribute, 'r' , of an SVG circle.

Walk through of solution:
The attribute method .attr() is used to set or modify the attributes of SVG shapes. It takes two arguments: the name of the attribute to change, and the value for the attribute. To define the radius an SVG circle, set the first argument of .attr() to 'r' and the second argument to a number. The radius is the distance from the center of a circle to its edge.

In the code that you start off with, donutHole already has a value for 'r' but the value is small. We want a bigger donut hole! In this puzzle, you’ll change 'r' to make donutHole bigger.

To complete the puzzle, change the value of 'r' to 15.

Sample code solution:
(Tap below to reveal)

donutHole.attr('r', 15);

Javascript Concepts: Variable
D3 Concepts: Attribute
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})`);


var donut = svg.append('circle').attr('fill','saddlebrown').attr('cx', 0).attr('cy', 0).attr('r',70);
var frosting = svg.append('circle').attr('fill','pink').attr('cx', 0).attr('cy', 0).attr('r',62);
var donutHole = svg.append('circle').attr('fill','#13324A').attr('cx', 0).attr('cy', 0).attr('r', 15).attr('stroke', 'saddlebrown').attr('stroke-width', 6);

var sprinkle_1 = svg.append('rect').attr('fill','orange').attr('x',0).attr('y',0).attr('height', '18').attr('width', '5').attr('transform', 'rotate(45 -20 -40)')
var sprinkle_2 = svg.append('rect').attr('fill','yellow').attr('x',0).attr('y',0).attr('height', '5').attr('width', '17').attr('transform', 'rotate(5 160 -500)')
var sprinkle_3 = svg.append('rect').attr('fill','yellow').attr('x',0).attr('y',0).attr('height', '5').attr('width', '19').attr('transform', 'rotate(-35 55 0)')
var sprinkle_4= svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '20').attr('width', '5').attr('transform', 'rotate(45 70 -30)')
var sprinkle_5= svg.append('rect').attr('fill','orange').attr('x',0).attr('y',0).attr('height', '13').attr('width', '5').attr('transform', 'rotate(-15 -150 -90)')
var sprinkle_6 = svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '5').attr('width', '13').attr('transform', 'rotate(45 -50 0)')
var sprinkle_7= svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '10').attr('width', '5').attr('transform', 'rotate(-45 20 -45)')