Add Axes to a Visualization translate test failed

Tell us what’s happening:
This code fails the test: The y-axis g element should have a transform attribute to translate the axis by (60, 0).

When I inspect element I see:

<g transform="translate(60, 0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">

This looks like it should pass to me. I have zoomed by browser back out to 100% and I have tried firefox too.

Your code so far


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title>Document</title>
</head>
<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>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36.

Link to the challenge:

1 Like

I managed to pass this challenge with the code above. I am not sure what changed. The y-axis translate test passes without any changes to the code in initially presented in the editor, so first I reran my code above with the translate line commented out. This passed. I uncommented .attr("transform", "translate(" + padding +", 0)") and everything passed and the graph rendered correctly.