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 visualizations you can leverage now that you understand the mechanisms of how elements are added to the DOM and data is associated with them:

  • Selections are array-like data structures that include a reference to the elements with D3 methods and their hierarchy in the DOM. You can create a selection with .selectAll() or a single-item selection with .select()
  • The .data(), .enter() and .append() methods all work in unison to create elements and associate their corresponding data with the existing DOM
  • The d parameter inside functions used in a D3 context represents the datum associated with the element at hand
  • The .attr() and .style() methods allow you to customize the appearance of each element based on data.
  • The .on() method can bind an event listener on the elements in the selection.


Feel free to play around with your newfound knowledge in the code editor and complete the lesson when you’re ready!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?