Data Visualization with D3 - Add Axes to a Visualization: Does the order of axis matter?

JavaScript
#1

Tell us what’s happening:
I could not pass the tests at first, because I typed everything at the top:

    // Add your code below this line
    const yAxis = d3.axisLeft(yScale);

    svg.append("g")
       .attr("transform", "translate(" + padding + ",0)" )
       .call(yAxis);
    // Add your code above this line

    svg.append("g")
       .attr("transform", "translate(0," + (h - padding) + ")")
       .call(xAxis);

    // Add your code below this line

    // Add your code above this line

And got an error:

// running tests
The y-axis g element should have a transform attribute to translate the axis by (60, 0).
// tests completed

I then noticed another place for my code at the bottom, and placed the exact same code for adding the yAxis there. And now it works!

But why adding yAxis before xAxis resulted into error? The rendered result looks exactly the same! Is calling yAxis before xAxis invalid code?

Your code so far

<body>
  <script>
    const dataset = [
                  [ 34,     78 ],
                  [ 109,   280 ],
                  [ 310,   120 ],
                  [ 79,   411 ],
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,    333 ],
                  [ 78,    320 ],
                  [ 21,   123 ]
                ];

    const w = 500;
    const h = 500;
    const padding = 60;

    const xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[0])])
                     .range([padding, w - padding]);

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

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", (d) => xScale(d[0]))
       .attr("cy",(d) => yScale(d[1]))
       .attr("r", (d) => 5);

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) =>  (d[0] + "," + d[1]))
       .attr("x", (d) => xScale(d[0] + 10))
       .attr("y", (d) => yScale(d[1]))

    const xAxis = d3.axisBottom(xScale);
    // Add your code below this line
    const yAxis = d3.axisLeft(yScale);


    // Add your code above this line

    svg.append("g")
       .attr("transform", "translate(0," + (h - padding) + ")")
       .call(xAxis);

    // Add your code below this line
   
    svg.append("g")
    .attr("transform", "translate(" + padding + ",0)" )
    .call(yAxis);

    // Add your code above this line

  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Challenge: Data Visualization with D3 - Add Axes to a Visualization

Link to the challenge:

#2

These are tests based on the actual text of the code and not the functionality of the code. The line of the test that actually checks the validity is

assert(
  $('g')
    .eq(10)
    .attr('transform')
    .match(/translate\(60\s*?,\s*?0\)/g)
);

and the .eq(10) is grabbing the tenth g in your SVG, but since there’s only 2 it presumably grabs the last one (or maybe there are 10, regardless it’s grabbing the last). So if the x-axis is last, the test fails. If you fill in the blanks, the y-axis is last.

Functionally, the order is irrelevant and either will produce the correct visualization.