Add Labels to Scatter Plot Circles

Add Labels to Scatter Plot Circles
0

#1

I’m stuck with this question, I dont know whats wrong with the code. Please help me

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 svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", (d, i) => d[0])
       .attr("cy", (d, i) => h - d[1])
       .attr("r", 5);
    
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       // Add your code below this line
       
               .text((d) => (d[0] + "," + d[1]))
               .attr("x", (d) => (d[0] + 5))
               .attr("y", (d) => (h - d[1]));   
       // Add your code above this line
  </script>
</body>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles


#2

Try adding a space after the comma.

       .text((d) => (d[0] + ", " + d[1])) 

#3

Thank you, it works… I didnt actually expect missing that space will have that problem even though it says in that question. I wonder why that space is needed:thinking:


#4

I think it is needed just because it is the expected format:

The first label should have text of “34, 78”, an x value of 39, and a y value of 422.

There it has the space.