freeCodeCamp Challenge Guide: Add Labels to Scatter Plot Circles

Guide
1

Add Labels to Scatter Plot Circles

Problem Explanation

In this challenge, you are required to set the x attribute so it’s 5 units more than the value you used for the cx attribute on the circle. Set the y attribute the same way that’s used for the cy value on the circle, for the text element.

Hints

Hint 1

Target the svg.selectAll("text") codeblock.

Hint 2

Use d[0] and d[1] for the data to be displayed.

Hint 3

The format for display has to be x, y.

Note

There is a space between the comma and the y attribute.

Solutions

Solution 1 (Click to Show/Hide)

Since, you need to add the x any y attributes similar to those as they have been set for the circle, add this to the svg.selectAll("text") codeblock:

<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

       .attr("x", (d) => d[0] + 5)
       .attr("y", (d) => h - d[1])
       .text((d) => (d[0] + ", " + d[1]))

       // Add your code above this line
  </script>
</body>
14 Likes