# 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>

``````
11 Likes