Add Labels to Scatter Plot Circles

Curriculum Help
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:

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.

5

Good practice to use only one space following commas, semicolons, colons, exclamation points, periods, question marks, and quotation marks.

d=>`${d[0]}, ${d[1]}`

6

Perfect solution:
Understand the scenario visualize it. Its not properly placed when we plot so we have increase x attribute value by 5 so it will visualized properly.
// Add your code below this line

.text((d) => (d[0] + ", " + d[1]))
//The thing is the x attribute should be increase by 5 more.

.attr(“x”, ( d , i ) => d[0] + 5 )
.attr(“y”, ( d, i ) => h - d[1] )

// Add your code above this line

Programmer thinks … </>