Introduction to D3.js

attr & style Exercise

Shirley Wu

Shirley Wu

Data Sketches
Introduction to D3.js

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

The "attr & style Exercise" 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:

Students are instructed to add colors to the petals created in a previous segment by modifying the attributes and styles of the SVG.


Transcript from the "attr & style Exercise" Lesson

>> Let's do an exercise, so the very first thing that we want to do for our flower petals now that we have them is let's try coloring our petals by our movie genres. So, what we want to do is we want to, here's the cell that you're going to be working in.

And then, what we want to do is we have, right here, we already have created five path elements. And I've kind of already bound the, define the attribute for each of these paths and we're using the petal path that we created in the previous notebook. Hopefully, you're seeing your own petal path being drawn here, and what we want to do is we want to select all these paths, we want to bind our movie data.

So our movies data is right here, that's what it looks like, you can kind of open it up and take a look. And we want to set film attribute on this paths based on each of the movies genre. And so, I also have this object for lookup for the top four genres and then this other.

So if your movies genre isn't in here in these top four, then I have this color for all the other genres. And also, you might have noticed that for each of these movies, oftentimes, the genre is an array of multiple genres. And so, just for the sake of our exercise, let's just use the very first genre that appears and then use that to kind of map our fill.

And if you're interested, you can also play around with the colors, but let's do this exercise in this cell. And I think this lookup is called color object, I think. Sorry. I think it's called color object, is what this lookup is called then, it's called colors, I'm sorry, yeah, so this lookup is called colors.

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