Introduction to D3.js

Data Types & Visual Channels

Shirley Wu

Shirley Wu

Data Sketches
Introduction to D3.js

Check out a free preview of the full Introduction to D3.js course

The "Data Types & Visual Channels" Lesson is part of the full, Introduction to D3.js course featured in this preview video. Here's what you'd learn in this lesson:

Shirley explains that D3.js scale functions can be used to translate raw data into visual channels, and shares some examples of visual channels such as position, size, color, and shape. Examples of data types are also shared in this segment, namely quantitative, temporal, spacial, nominal, and ordinal data types.


Transcript from the "Data Types & Visual Channels" Lesson

>> So for this notebook, what we want to do is to be able to size each of our petals based on the movie's rating. So we might have noticed so far that we've only been mapping our categorical attributes. So our genres and parental guidance for our flower petals.

But there's also some quantitative data attributes that we want to map to our flower petals also. So let's try maybe scaling our petals by the IMDB ratings out of 10. And this is what our code looks like. So a lot of it is very similar to what the exercise we just did.

But the only difference is that in this transform, we have this scale. So we're changing a scale after the translate, and we're passing in and we're just scaling by the IMDB rating out of 10. You might notice that looks like it's not what we're hoping for, right? [LAUGH] I did this and I was like, actually this kind of looks really cool.

It's kind of like a weird funky artistic vibe, but that's not what we're going for with this visualization. And we certainly don't want each of our petals to be this big. And what's actually happening is that because the petals that we created are 100 pixels tall. If we're scaling, or in other words multiplying each of our flower petals by some number.

Some rating from zero to 10 That means that some of our biggest petals will be like 1000 pixels tall. And that's definitely not what we want, at least for this workshop. So, let's go about fixing this with D3 scales. And so here's kind of like a key concept number two, which is that we use D3 scales to translate our raw data into the visual channels.

That we use to render to the DOM. So let's take a look at some common data types. So, the ones that I've come across quite often is quantitative data attributes. So that could be the ones we talked about with the IMDB rating out of 10. It could be the number of IMDB votes, and a second one is temporal.

So that could be a movie's release date or DVD date. It could be spatial so that could be the city or the country that the movie was released in. And this is potentially like we can do a map with, and maps are something that we won't cover in this workshop.

But D3 has a lot of extended support and functionality for it. And on the other side we have categorical data types. So that could be nominal, like genres and these movie genres. Or ordinal, which means that it's categorical but with a certain implied order. So, the most common example is t shirt sizes of small, medium large.

In our example we have parental guidance ratings. Because there's an implied order going from G to PG to PG13 to R. And so another way that you can think of these two buckets of data types, is that one of these data types the quantitative, the temporal. Actually, spatial actually, I think I might have categorised that incorrectly.

Spatial should go under the categorical one I think. But the quantitative and temporal one, you can think of it as continuous. They're on kind of like a continuous scale of if it's quantitative and it's a rating out of 10. Then you can have a rating that's like 3.5 or 7.23, so that's continuous.

And then for these nominal or ordinal data types, like genres and parental guidance, these are discrete, distinct attributes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now