Data Visualization with D3 - Add Labels to Scatter Plot Circles

JavaScript
1

Tell us what’s happening:
The labels are visualized correctly, but I am not passing this test.

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").attr("x",(d, i) => d[0]+9).attr("y",(d, i) =>h-d[1]).text((d) => ((d[0])+", "+d[1]));
       // Add your code below this line



       // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Data Visualization with D3 - Add Labels to Scatter Plot Circles

Link to the challenge:

2

image
image1366×768 71.9 KB

my error message and scatter plot looks like this

3

The X value is not correct.

Set the x attribute so it’s 5 units more than the value you used for the cx attribute on the circle .

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.