Introduction to D3
Lesson 1 of 1
  1. 1
    Why D3?
    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:…
    Start
  2. 2
    Selection
    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…
    Start
  3. 3
    Data-Element Relationship
    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…
    Start
  4. 4
    The d Parameter
    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 …
    Start
  5. 5
    Styling your data
    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…
    Start
  6. 6
    Enter and Append
    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 “…
    Start
  7. 7
    Chaining and Returning
    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…
    Start
  8. 8
    Interactivity with events
    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…
    Start
  9. 9
    Review
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

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