# Use D3 rangeBands

When building a chart such as a bar chart in d3, you’ll want an evenly divided space on your x axis. You could divide the space up with your own manual calculations, accounting for space available, bar width, and inner and outer padding. Or, you could have d3 do the calculation for you via a `rangeBand`

.

## Scale

One of the great features of D3 is the ability it gives you to easily adapt your chart to the space available to you. This is accomplished with scales. There are a couple different scales built into D3. Some for comparative numbers, such as `d3.scale.linear`

and `d3.scale.log`

; some for discrete data sets, such as `d3.scale.ordinal`

.

**A scale maps visual space to data space.**

The visual space of a scale is the `range`

. The data space is the `domain`

. The internals of the scale will map it all for you.

## Manual Space Management

Previous to realizing some of the things that d3 scales can do for you, I did a lot of space management myself. Here’s an example:

Let’s say we have a data domain of all the letters in the alphabet. Let’s say we’re building a bar chart. We’ll put the letters on the x-axis, running horizontally along our chart. We want to space out each letter’s bar evenly across the visual space or range.

If we did our own math, it might look like this:

```
barOuterPad = 20
barPad = 10
widthForBars = elementWidth - (barOuterPad * 2)
barWidth = widthForBars / data.length - barPad + (barPad / numBars)
barsG = svg.append('g')
.attr('transform', "translate(#{barOuterPad}, 0)")
barsG.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('x', (d, i) -> (barWidth * i) + (i * barPad))
.attr('width', barWidth)
# attrs ...
```

In the code above, we have bar padding setup. `barOuterPad`

is the padding on only the far left and right of the entire chart. `barPad`

is the space between each of the bars.

The `barWidth`

calculation is especially fun. It splits the `widthForBars`

space evenly over the number of bars. Then it subtracts the `barPad`

for the space of that bar that won’t be able to be used. Then, finally, we remember that there will be 1 fewer empty pad areas between bars than there will be actual bars. So, we take that extra `barPad`

space and give a bit of it back to every bar. Whew.

When we go to place bars, we create a new group, `barG`

, transformed in to take account of `barOuterPad`

. Then, for each bar in we make sure it’s offset into the chart based on what number of bar it is in the set.

There is an easier way.

## d3.scale.ordinal.rangeBands

There is one particular function of `d3.scale.ordinal`

that is particularly useful. That is `rangeBands`

. It will evenly divide a space up for you into bands across the range.

Here’s a great graphic from the d3 wiki on `ordinal.rangeBands`

:

It looks like it knows how to take care of everything in our scenario. It handles outer padding. It handles between-bar padding. Let’s use it:

```
barOuterPad = .2
barPad = .1
x = d3.scale.ordinal()
.domain(data.map((d) -> d.letter))
.rangeRoundBands([0, elementWidth], barPad, barOuterPad)
svg.append('rect')
.data(data)
.enter().append('rect')
.attr('x', (d) -> x(d.letter))
.attr('width', x.rangeBand())
# attrs...
```

Note that our `barOuterPad`

and `barPad`

are now fractions. This is because d3 expects a number, usually between 0 and 1, that is described as a proportion of the eventual width of the bands.

`x`

becomes our scale function, mapping the domain, which is all letters (`d.letter`

), to the range. The range is specified as bands using `rangeRoundBands`

. This is different than `rangeBands`

in that all spaces are guaranteed to be integers, avoiding antialiasing on screen. The signature is as follows:

`ordinal.rangeBands(interval[, padding[, outerPadding]])`

We avoid having to use a new `barG`

group to make our math easier.

When we set the `x`

attribute on our bar, it’s x offset is determined by passing the singular datum’s letter to the `x`

scale function. And the width is simply the width of all bands, known by calling `x.rangeBand()`

.

So much better. And so much more concise.

What do you think? Does this work for you? What is the even-better way of doing this that I have yet to realize?