Add Axes to a Visualization - Where is left axis?

Tell us what’s happening:
Hello, all!

I passed this challenge but I cannot see the left axis on the display.
Is it correct? or bug?
Kindly refer the below picture & my code source.

image

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(${w + padding}, 0)`)**
**       .call(yAxis);**
    // Add your code above this line
  
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.81 Safari/537.36.

Link to the challenge:

Hi @meanyMina,

Currently you cannot see the y-axis on the page because it is placed outside the canvas (500 x 500). If you inspect the page, you will see that y-axis is placed at (560,0) which is out of canvas width.

In order to see the y-axis, use ${w-padding} in your code , which will place y-axis at (440,0) coordinate

Thank you so much! :slight_smile: