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

Up until now we've just looked at bar charts. A handy chart, no doubt, but D3 offers a variety of charts you can work with. In this lesson we'll convert the bar chart into a basic scatter (or bubble) chart.

Instructor: Let's convert our column chart to a scatter plot.

The first change we're going to make is that we're going to return actual objects from our data set. We're going to have objects that have an x, y, and r property. You can see the x and y are somewhere between 0 and 100, and then r is somewhere between 0 and 30.

The next thing we need to do is to convert our x scale back to a linear scale, a simple mapping from an input domain to an output range. We'll go ahead and convert or rangeBands call back into a plain old range, using the width of our chart again. In this case we're mapping from 0 to 100 in the domain.

The next thing we need to do is, we're going to be using circles instead of rectangles. I've also created a new style for us, which I called Bubble since scatter plots are sometimes referred to as bubble charts.

The next thing you'll notice is the attributes we're going to set. Rather than setting the x and y and the width and the height like we did for our rectangles, we're going to be setting properties named cx, cy, and r. cx and cy stand for center-x and center-y, and then the r is the radius of the circle.

One thing that goes back to something we covered earlier but extends it a little bit is that we can extend our d3-max call here to pass in the data set as well as an accessor function. Since our data set is now actual objects and not numbers, we need to tell d3-max which property of that datum we're interested in. In this case, it's the y property.

The next thing we'll have to do, again, because we're not using just plain numbers here but rather objects. We need to create functions that pass the correct property into our scales rather than just...We can supply the scale if we're just going to pass the datum itself through that scale. But since we need to pull off properties in this case, we need to create these functions and then pass the properties that we're interested in to those scales.

Now you can see. We have a basic scatter plot. We've got some opacity in the styles so you can see the overlays. That's it.


Course

Use D3 (v3) to Build Interactive Charts with JavaScript

Scatter Plot

Share this video with your friends