The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

rangeBands

rangeBands

5:30
Expanding on the concepts of dynamic scaling in D3, in this lesson Ben discusses the use of `rangeBands` to horizontally scale your D3 charts.
Watch this lesson now
Avatar
egghead.io

Expanding on the concepts of dynamic scaling in D3, in this lesson Ben discusses the use of rangeBands to horizontally scale your D3 charts.

Avatar
Nick

If you need to have duplicate values in your dataset, you should set your xScale domain to a range from 0 to your dataset length, and use rangeRoundBands instead of rangeBands. When doing that, anywhere you used xScale and passed 'd', you'll need to pass the index instead.

http://stackoverflow.com/questions/17841437/wrong-usage-of-d3-scale-with-same-values-in-data

g.selectAll('rect')
  .data(scope.data)
  .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('x', function(d, i) {
      return xScale(i);
    }).attr('y', function(d) {
      return height - yScale(d);
    }).attr('width', xScale.rangeBand())
    .attr('height', function(d) {
      return yScale(d);
    }).attr('fill', 'red');
Avatar
Ben

That is a good point. The code shown in the video is just meant to introduce the concept of rangeBands. In a real world scenario it is very unlikely you'd have duplicate values in your dataset (and you almost certainly wouldn't be using plain numbers), so you're unlikely to run into that issue.

In reply to Nick
Avatar
je553

What is the best way to achieve the same outcome using the newer version with d3.scaleBand() (rather than d3.scaleOrdinal() and .rangeBand()) ?

Avatar
NewsWhip

this should work just fine:

var xScale = d3.scaleBand()
.domain(dataset)
.range([0, w]);

In reply to je553
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?