Introduction to D3.js

Creating DOM Elements from Data 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 "Creating DOM Elements from Data 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 create a flower petal for each movie, color the petals by movie genre, and select the type of petal by parental rating.


Transcript from the "Creating DOM Elements from Data Exercise" Lesson

>> And for this exercise, what we're going to be doing is we want to create a flower petal for each movie. And then we want to, let's just same thing as before, we're gonna color the petals by the first movie genre. And but we're also going to select the type of flower petal based on the parental guidance reading.

And so this is where and we have our movies here. And then we have our path object here. So this is kind of our lookup from the parental guidance reading to our paths, strings and then we have the same color object with the mapping from our genres to colors.

And we want to be able to translate are petals, by a certain xy, so that we can put them in this grid. And I've kind of outsourced that calculation for you and you can just pass in the index to this function called calculate positions. And that will return an array of xy.

And you want to set the fill. And you want to set the define attribute. And so let's have your code be in here. And this is what your end result should look like. Who that looks really cool, doesn't it? And with the kinda fire flower petal looks really cool.

And then let's come back and we'll do once you have had a chance to kinda put your code in here, we will come back and do the exercise together.

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