Hello @Grasshopper_Ben, I do not know if you are familiar with the svg tag in HTML but if it’s yes, can you please tell me why do we define a height and a width for the SVG shape if we define a radius? Is it so that if we are drawing something like a rectangle we do not necessarily need to write a height and a width?
Here is the code(I’ve put the important elements in bold): <svg height=“100” width=“100”>
<circle cx=“50” cy=“50” r=“40” stroke=“black” stroke-width=“3” fill=“red” />
Hey there, good question!
You can think of the <svg> element as a kind of canvas for your shapes. In all of our puzzles that use D3, we set up this element in additional code, like this:
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);
This uses D3 to select the HTML <body> element, append an <svg> element as a child, and set its height and width to 500 by 500 pixels.
Then in the user-facing code, we add our shapes to it like this:
svg.append('circle').
If the radius of the circle is larger than the <svg>, then the circle may appear clipped, or interfere with other elements that are siblings of the <svg>.
Hope this helps!
Ben
Oh, thanks a lot!!! 