Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Scatter Plot

    Ben ClinkinbeardBen Clinkinbeard

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.