Check out a free preview of the full Building Custom Data Visualizations course:
The "Turning Designs into Code" Lesson is part of the full, Building Custom Data Visualizations course featured in this preview video. Here's what you'd learn in this lesson:

Shirley explains the two parts to turning designs into code, which are drawing the geometric shapes, then translation from the data into their various channels.

Get Unlimited Access Now

Transcript from the "Turning Designs into Code" Lesson

[00:00:00]
>> Shirley Wu: Let's talk a little bit about turning our designs into code. Again, I do not want to go through and implement every single part of the D3 library. But instead, I'm hoping to just kind of talk about when you have a design, how can you break that down into different parts to code.

[00:00:24] So, turning design into code, break it down. So think about what do you need to draw each of the marks, what do you need to calculate each of the channels? And so when I think about it, oftentimes to draw each of the marks that comes down to SVG or Canvas in the browser.

[00:00:44] And to calculate the channels, oftentimes I'll use D3 scales or any of the shapes that they have, or the layouts that they have. Or sometimes like, D3 doesn't have that. And I'll go like, Google search for maybe another node package that has a layout I want, or I'll just straight up, sit down and calculate with math.

[00:01:08] [LAUGH] So that's kind of how I think it through. And a little bit on SVG elements. The ones I use the most commonly, are rectangles, circles, text and paths. And I don't think we'll go into too much detail into this class about each of these. But this is kind of what I keep in mind when I think about converting from design to code.

[00:01:41] For each of the things that we drew, how does this convert to each of these elements? Or how do any of the things that we drew out, and what does that, what is that made out of in terms of the SVG? So I can see that this hanky is going to be an SVG path element, and most likely this radial is going to be a path elements too.

[00:02:10] But these production company bars, these are gonna be rectangles, etc. And I'll sit down and break it down to just, what does it take to draw these shapes?