This video is available to students only

Drawing our chart

To set up our chart environment, we learn why we need two containers: wrapper and bounds.

When drawing a chart, there are two containers whose dimensions we need to define: the wrapper and the bounds.

Chart dimensions

The wrapper contains the entire chart: the data elements, the axes, the labels, etc. Every SVG element will be contained inside here.

The bounds contain all of our data elements: in this case, our line.

This distinction will help us separate the amount of space we need for extraneous elements (axes, labels), and let us focus on our main task: plotting our data. One reason this is so important to define up front is the inconsistent and unfamiliar way SVG elements are sized.


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.