Broken Hearted Puzzle Explainer


Aim of the puzzle:
This puzzle combines the use of previously taught D3 concepts ('transform', 'r', 'cx' , 'cy', and 'fill' attributes) to change SVG shapes.

Walk through of solution:
In the code that you start off with, there are 3 variables: square, movedCircle and littleCircle. Each variable has the correct attributes but some of the wrong values. In this puzzle, you’ll change the values of the incorrect attributes to make the shapes form a heart.

To complete the puzzle, you must complete four steps. First, rotate square by setting the value of its 'transform attribute to 'rotate(45 101 33)'. Second, set the 'cx' and 'cy' attributes of movedCircle to 68. Third, increase the radius of littleCircle to 48. And finally, set the 'fill' attribute of all 3 shapes to 'red'.

Sample code solution:
(Tap below to reveal)

square.attr('x',101).attr('y',33).attr('transform','rotate(45 101 33)').attr('fill','red');

Javascript Concepts: Variable
D3 Concepts: Attribute
Additional Code:

var square = svg.append('rect').attr('width',95).attr('height',96);
var movedCircle = svg.append('circle').attr('r',48);
var littleCircle = svg.append('circle').attr('cx',133).attr('cy',68);

listed #2