Visualize Data with a Bar Chart - user story 11

JavaScript
1

User Story #11: The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis. the test FAILS

As you see below I set the y attr to yScale(d[1]) and data-gdp attr to the GDP value:

svg.selectAll(“rect”)
.data(json.data)
.enter()
.append(“rect”)
.attr(“x”, d => xScale(d[2]))
.attr(“y”, d => yScale(d[1]))
.attr(“width”, barWidth)
.attr(“height”, d => yScaleReverse(d[1]) - padding)
.attr(“fill”, “orange”)
.attr(‘class’, ‘bar’)
.attr(‘data-date’, d => d[0])
.attr(‘data-gdp’, d => d[1] )

Am I missing something?

Here is the pen:

Link to the challenge:

2

Hi J.T,

When I reverse the range in the yScaleReverse function it pasts the test. However when I do that your graph looks totally different from the example.

It has something to do with the Y scales and how they’re setup.

  const w = 800;
  const h = 500;
  const padding = 60;
   
  const yScale = d3.scaleLinear()
                     .domain([d3.max(json.data, (d) => d[1]), 0])
                     .range([padding, h - padding]);

What the above scale does is it maps a data value of 18000 to pixel 60, and a data value of 0 to pixel 440.

  const yScaleReverse = d3.scaleLinear()
                     .domain([0, [d3.max(json.data, (d) => d[1])]])
                     .range([padding, h - padding]);

What this scale is doing is the opposite. This scale does is it maps a data value of 18000 to pixel 440, and a data value of 0 to pixel 60

I see both scales being used on the rectangles. The test is possibly reading two different numbers? I don’t know.