From 9a153d697feb620b53e9fb58a905f34e641d5b56 Mon Sep 17 00:00:00 2001 From: Pol Martin Date: Thu, 10 Nov 2016 22:52:25 +0100 Subject: [PATCH] Update a section that was using deprecated code --- z03-data-binding.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/z03-data-binding.md b/z03-data-binding.md index a926a84..364271d 100644 --- a/z03-data-binding.md +++ b/z03-data-binding.md @@ -139,8 +139,8 @@ var maxCount = d3.max(sales, function(d, i) { var x = d3.scaleLinear() .range([0, 300]) .domain([0, maxCount]); -var y = d3.scaleOrdinal() - .rangeRoundBands([0, 75]) +var y = d3.scaleBand() + .range([0, 75]) .domain(sales.map(function(d, i) { return d.product; })); @@ -150,7 +150,7 @@ newRects.append('rect') .attr('y', function(d, i) { return y(d.product); }) - .attr('height', y.rangeBand()) + .attr('height', y.bandwidth()) .attr('width', function(d, i) { return x(d.count); }); @@ -159,18 +159,18 @@ newRects.append('rect')
- We're getting a little sneaky here! We're introducing an ordinal + We're getting a little sneaky here! We're introducing a band scale, one that's discrete instead of continuous.

- The d3.scaleOrdinal() helps us create buckets for each + The d3.scaleBand() helps us create buckets for each element. In this case, that's one per product.

- The domain is the 3 product names. The range is a little different, - rangeRoundBands is a helper function that sets the range, but - tells D3 to pick buckets that are whole pixel widths (no fractions). + The domain is the 3 product names. The range is a little different. + It sets a range, but tells D3 to pick buckets that are + whole pixel widths (no fractions).