Steps in drawing any chart
We solidify our foundation by splitting our chart-creating code into seven general steps.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:12] So one thing you'll notice as you start creating more and more charts is that there are some general steps that you're going to do in every single chart that you make. So I know we've spent through them a little bit in the last lesson.
[00:13 - 00:25] We're going to go through them each in more depth in this lesson, but let's just write them down and go through each of them to formalize them. So here we can see the seven steps.
[00:26 - 00:38] The first step is to access your data. So this is looking at your data structure and declaring how to access each of the values that we're going to need as we're creating our chart.
[00:39 - 00:51] The second step is to create those chart dimensions. So this is figuring out how big is that wrapper box and how big are the bounds, how big are those rectangles.
[00:52 - 01:01] The third step is to actually draw these two elements. So we're drawing the wrapper element, the SVG element, and the bounds group element.
[01:02 - 01:11] The fourth step is to create the scales. So if you remember, the scales are the mapping between the data domain and the physical domain.
[01:12 - 01:21] So in the last lesson, we were mapping temperature values to pixel values. The next step is then to draw your data.
[01:22 - 01:30] So this is the really fun step. This is when you're turning your data into these physical attributes, and then you get to look at them.
[01:31 - 01:45] The next step after that is drawing the peripherals. So these are axes, labels, legends, annotations, anything to help your user understand what these data elements are and what values they represent.
[01:46 - 02:01] And then the last step, which we're not going to get to in this lesson, but we will in a lesson coming up, is to set up interactions. So these are tool tips or anything as your user is interacting with your chart that helps them understand the underlying data.