freeCodeCamp/curriculum/challenges/en/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.en.md

id, title, required, challengeType

id	title	required	challengeType
587d7fab367417b2b2512bd9	Add Labels to Scatter Plot Circles	src https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js	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

- text: Your code should have 10 <code>text</code> elements.
  testString: 'assert($(''text'').length == 10, ''Your code should have 10 <code>text</code> elements.'');'
- text: 'The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> 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 <code>x</code> value of 39, and a <code>y</code> value of 422.'');'
- text: 'The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> 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 <code>x</code> value of 114, and a <code>y</code> value of 220.'');'
- text: 'The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> 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 <code>x</code> value of 315, and a <code>y</code> value of 380.'');'
- text: 'The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> 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 <code>x</code> value of 84, and a <code>y</code> value of 89.'');'
- text: 'The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> 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 <code>x</code> value of 425, and a <code>y</code> value of 280.'');'
- text: 'The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> 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 <code>x</code> value of 238, and a <code>y</code> value of 355.'');'
- text: 'The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> 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 <code>x</code> value of 338, and a <code>y</code> value of 404.'');'
- text: 'The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> 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 <code>x</code> value of 227, and a <code>y</code> value of 167.'');'
- text: 'The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> 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 <code>x</code> value of 83, and a <code>y</code> value of 180.'');'
- text: 'The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> 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 <code>x</code> value of 26, and a <code>y</code> value of 377.'');'

Challenge Seed

<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
       
       
       
       // Add your code above this line
  </script>
</body>

Solution

// solution required