---
id: 587d7fab367417b2b2512bd9
title: Add Labels to Scatter Plot Circles
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
---
## 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, 'Your code should have 10 text
elements.');
- 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', 'The first label should have text of "34, 78", an x
value of 39, and a y
value of 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', 'The second label should have text of "109, 280", an x
value of 114, and a y
value of 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', 'The third label should have text of "310, 120", an x
value of 315, and a y
value of 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', 'The fourth label should have text of "79, 411", an x
value of 84, and a y
value of 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', 'The fifth label should have text of "420, 220", an x
value of 425, and a y
value of 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', 'The sixth label should have text of "233, 145", an x
value of 238, and a y
value of 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', 'The seventh label should have text of "333, 96", an x
value of 338, and a y
value of 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', 'The eighth label should have text of "222, 333", an x
value of 227, and a y
value of 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', 'The ninth label should have text of "78, 320", an x
value of 83, and a y
value of 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', 'The tenth label should have text of "21, 123", an x
value of 26, and a y
value of 377.');
```
## Challenge Seed
## Solution
```js
// solution required
```