Introduction to D3
Lesson 1 of 1
- 1The 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:…
- 2D3 “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…
- 3Now 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…
- 4So 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 …
- 5Now 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…
- 6So 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 “…
- 7Before 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…
- 8You’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…
- 9Congrats 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
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory