Color Wheel Puzzle explainer

Aim of the puzzle:
Use the attribute method .attr() to set the 'fill' of an SVG shape to give it color.

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 color of an SVG shape, set the first argument of .attr() to 'fill' and the second argument to a color.

In the code that you start off with, redCircle, yellowCircle, and blueCircle already have 'fill' attributes and color values. orangeCircle, greenCircle, and purpleCircle don’t have 'fill' attributes and so their color value defaults to black. In this puzzle, you’ll use the the attribute method and fill property to give orangeCircle, greenCircle, and purpleCircle the correct color values.

To complete the puzzle, add .attr() to the end of the circles where it’s missing. Add 'fill' as a first argument and a string of the corresponding color as the second argument. For example, greenCircle.attr('fill', 'green').

Sample code solution:
(Tap below to reveal)

orangeCircle.attr('fill', 'orange');

Javascript Concepts: String, Variable
D3 Concepts: Attribute
Additional Code (hidden code that runs before the puzzle’s code):

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


var blueCircle = svg.append('circle').attr('r', 20).attr('cx', 50).attr('cy', 0).attr('fill','blue');
var purpleCircle = svg.append('circle').attr('r', 16).attr('cx',25).attr('cy', 43);
var redCircle = svg.append('circle').attr('r', 20).attr('cx', -25).attr('cy', 43).attr('fill','red');
var orangeCircle = svg.append('circle').attr('r', 16).attr('cx', -50).attr('cy', 0);
var yellowCircle = svg.append('circle').attr('r', 20).attr('cx', -25).attr('cy', -43).attr('fill','yellow');
var greenCircle = svg.append('circle').attr('r',16).attr('cx', 25).attr('cy', -43);