This video is available to students only

Step 3: Draw canvas

The third step: drawing our canvas. We create our wrapper & bounds, then shift them to respect our margins.

Draw canvas#

Let's make some SVG elements! This step will look exactly like our line chart code. First, we find an existing DOM element (#wrapper), and append an <svg> element.

Then we use attr to set the size of the <svg> to our dimensions.width and dimensions.height. Note that these sizes are the size of the "outside" of our plot. Everything we draw next will be within this <svg>.

 

This page is a preview of Fullstack D3 Masterclass

No discussions yet