Get Started With D3

Basics of SVG

Scaling Basics

d3.max

rangeBands

Color Scales

Quantitative Scales

Margins

Scatter Plot

Debugging with Dev Tools

Basic D3 chart interactivity

Basic Transitions with D3

Creating Axes with D3

Cleaner D3 code with selection.call()

Line and Area Charts with D3

Responsive D3 charts with the viewBox attribute

Use D3 (v3) to Build Interactive Charts with JavaScript

D3 debugging is fully supported within Chrome Dev Tools. This is extremely useful!

Man 1: [00:00] One of the nicest things about the fact that D3 uses web standards and SVG to draw the charts is how debuggable it is in something like Dev Tools. Here, if we inspect our scatter plot, we can actually use the Dev Tools Inspector to navigate our visualization.

[00:22] If we click on that, we then see the tag in the markup of the document. Then, of course, you can access the most recently selected item in the console with the "$0expression. What that gives us is, again, that element. 

[00:40] One other thing to note is that D3 very handily provides this "__data__" object and attaches it to that DOM element. We can actually see the data object that is being represented by this DOM element.

[01:00] The other nice thing is that we now have a reference to this element. We can then go and actually tweak the styles of it. We can say, "Fill is red. Stroke is, I don't know, green."

[01:15] Not that you're going to use this for a lot of things, but you can use it to go in and tweak layout and appearance. Rather than having to go edit your code every time, rerun the visualization, you can just tweak it here, get the values you want, and then move back to your code.

[01:36] If you wanted to change the appearance of all of your items, you just change the style for the class that has been applied to all of the elements. You can inspect the data, inspect the appearance, change the appearance, change the data, everything that you need to debug those things in the browser.


Course

Use D3 (v3) to Build Interactive Charts with JavaScript

Debugging with Dev Tools

Share this video with your friends