J.T
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:
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.