Add Labels to Scatter Plot Circles - works fine, shows error

JavaScript
#1

Tell us what’s happening:
looks like it works to me…

Your code so far


<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("label",  d=>d[0] +", "+ d[1] )
       .attr("x" , (d, i) => d[0]+5 ) 
       .attr("y",(d, i) => h - d[1])
       
       // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:

#2

You should also include the error you get…

#3

dataVision-screenshot
dataVision-screenshot1440×900 256 KB

Heres a screenshot showing my output from the console, along with the failed test results, showing the same values.

#4

the labels don’t appear, so you are missing something - I am trying to find out what, but it was a while I did this and I need a moment to remember what it was

oh, right - remember how you did it in this challenge: https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-labels-to-d3-elements hint: you didn’t use attr()

and the result is a thing like <text x="238" y="355">233, 145</text>

#5

I was also having trouble. I used .text instead of .attr and I deleted “label” as the first parameter.

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