Introduction to D3
Lesson 1 of 1
  1. 1
    The name d3 comes from the three D’s in the term “Data-Driven Documents.” This JavaScript data-visualization library rose in popularity because of a few game-changing features:…
  2. 2
    D3 “injects” data visualizations onto a web page’s Document Object Model and associates data with a set of selected DOM elements. So before we go too far, let’s understand the first part of the pro…
  3. 3
    Now that you’ve selected the elements and understand a bit about selections, let’s insert and associate data per element. You accomplish this with one main method: .data(). The .data() method take…
  4. 4
    So once we’ve associated the data with the elements, how do we access the data and start manipulating our elements based on those values? You’ll need a function with a d param to access each datum …
  5. 5
    Now that you know how to access the datum associated with each element, it’s possible to start customizing the appearance of each element with two powerful methods: .attr() and .style(). + The .at…
  6. 6
    So far, our code has been associating data with existing elements inside our index.html file. What would happen if those elements weren’t already in there? We previously mentioned the idea of “…
  7. 7
    Before we wrap up, let’s take a second to analyze the chaining syntax that is a D3 signature. In the previous exercise, we referenced the following code: let dataset = [55,34,23,22,59]; d3.select…
  8. 8
    You’ve learned the basic d3 design pattern of: + Creating a selection + Associating data with that selection + Appending elements to the DOM + Modifying the elements based on the data Let’s tak…
  9. 9
    Congrats on completing your first d3 visualization! With these basic skills, you can start building more complex visualizations by using some of the D3 pre-packaged methods. There are plenty of vis…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo