Debug D3 v4 with Dev Tools

Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.

[00:00] Since d3 visualizations are created using standard web technologies, you can use things like dev tools in Chrome to debug them quite easily.

[00:09] The first thing I want to look at is if we inspect one of these elements in here, we've got the special $0variable, which points to the dom element that we selected. Now, if we say $0and then look up this data property, we can actually see the data that's being rendered by that circle.

[00:33] That's something that d3 does when you create these elements. It puts the associated data object in that property so that you can inspect it just like this.

[00:42] Now, you can't change a property in that object and expect the visualization to update because there's not any sort of two-way binding. But it can be helpful to see what values are being used to render.

[00:58] Now, you can modify one of those attributes directly if you would like to. Assuming you have d3 globally available, you could say$0and then set an attribute directly like that. When we run that, we get a bigger circle here because we're directly setting that radius attribute.

[01:20] You can see that all of these circles have this CSS class named ball applied to it. We could, of course, change properties here and update our entire visualization there to see how different styles may affect things.

[01:36] You could also, of course, just modify a single element if you wanted to see, maybe, you were trying to figure out what different rollover styles or things like that may be available. You could do it directly on an element like that.

[01:52] You could even do something like filter down to just the elements in a certain part of the chart. If we were to say d3.selectAll("circle") that's going to give us all of the circles and then we can actually filter it down. Our filter function here is going to receive the data objects.

[02:07] We'll filter anything with an x property less than 30 and then spit out those notes. Now, we can see that we actually do have those dom elements there.

[02:18] If you were to remove that nodes call there, you could actually go and set different styles on here or do whatever to these things. You could set a stroke style to be red. There you go. You've styled all of those elements.

[02:33] You can see how there's different ways to play around with the elements in the browser. Sometimes, that can be a quicker feedback loop than actually editing your code, reloading the browser, and that sort of thing.

~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today