Scatter Plot

Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 5 years ago

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.

egghead
egghead
~ a minute 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 egghead.io

Be on-Topic

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

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