Personal HTML project

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

1 Like

Oh, thanks a lot!!! :grin: