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

In this lesson Ben shows you how to use `d3.max` to normalize your dataset visually within the specific bounds of a variable domain.

**Ben Clinkinbeard**: ...so now that we have our chart using scale here to actually size things properly and somewhat dynamically, I wanted to show one of the ways that D3 has a couple utilities that can actually make things more flexible. We're actually going to replace our static data set here with a set of random numbers, and I've included underscore for this purpose. 

I'm just going to use sort of the shortcut method for creating a random set of data. So we're going to return a random number somewhere between 0 and 50. You can see there that we have our data populated. I chose 15 items this time just to make the chart a little fuller. Basically all this range function is doing is creating an array of 15 items. I believe they range from 0 to 14 or 1 to 15, something like that, and then we're basically just using that as a shortcut to run this function 15 times and return the numbers. 

We now have our chart filled with random data, and we know that they're always going to fit on there because the maximum number that this can produce is 50 and we've got our upper limit of our domain set to 50. That's all well and good, but a lot of times you are not going to know the data domain beforehand. You need to be able to sort of adjust that on the fly. 

Just to show that, if you say had your data somewhere between 0 and 100, in this case a lot of those items are going to run off of the chart because our upper limit is set to 50. In order to make things easier, D3 actually has a couple of utility methods that we can use. In this case we're going to use the max method. We're going to pass in our dataset and you can now see that everything fits on our chart. 

Basically what this is doing is that D3.max when you pass in an array it looks through that array and finds the maximum value and returns that value. Basically what this is doing, you'll notice that one of these items is always pinned to the top here. It's going to do that regardless of what we make the upper limit, or the maximum value in our data, because we're using that maximum value as the top of our domain. 

More than likely you probably want a little bit of padding for your domain, you don't want everything to be pinned to the very top. If we actually do times 1.1, we'll say, you can then always get a little bit of padding at the top of your chart there. So even if we were to change some of this data to be as high as, as large as 100, we're always going to have that padding at the top. Change it to 400, 500, whatever you want. 

Course

Use D3 (v3) to Build Interactive Charts with JavaScript

d3.max

Share this video with your friends