---
id: 587d7fab367417b2b2512bd9
title: Add Labels to Scatter Plot Circles
challengeType: 6
forumTopicId: 301477
---
## Description
You can add text to create labels for the points in a scatter plot.
The goal is to display the comma-separated values for the first (x
) and second (y
) fields of each item in dataset
.
The text
nodes need x
and y
attributes to position it on the SVG canvas. In this challenge, the y
value (which determines height) can use the same value that the circle
uses for its cy
attribute. The x
value can be slightly larger than the cx
value of the circle
, so the label is visible. This will push the label to the right of the plotted point.
## Instructions
Label each point on the scatter plot using the text
elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is "34, 78". 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
.
## Tests
```yml
tests:
- text: Your code should have 10 text
elements.
testString: assert($('text').length == 10);
- text: The first label should have text of "34, 78", an x
value of 39, and a y
value of 422.
testString: assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422');
- text: The second label should have text of "109, 280", an x
value of 114, and a y
value of 220.
testString: assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220');
- text: The third label should have text of "310, 120", an x
value of 315, and a y
value of 380.
testString: assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380');
- text: The fourth label should have text of "79, 411", an x
value of 84, and a y
value of 89.
testString: assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89');
- text: The fifth label should have text of "420, 220", an x
value of 425, and a y
value of 280.
testString: assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280');
- text: The sixth label should have text of "233, 145", an x
value of 238, and a y
value of 355.
testString: assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355');
- text: The seventh label should have text of "333, 96", an x
value of 338, and a y
value of 404.
testString: assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404');
- text: The eighth label should have text of "222, 333", an x
value of 227, and a y
value of 167.
testString: assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167');
- text: The ninth label should have text of "78, 320", an x
value of 83, and a y
value of 180.
testString: assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180');
- text: The tenth label should have text of "21, 123", an x
value of 26, and a y
value of 377.
testString: assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377');
```
## Challenge Seed
## Solution