Use a Pre-Defined Scale to Place Elements Broken test

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
The code is good, the test is broken, cannot continue.

   **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 padding = 60;

   const xScale = d3.scaleLinear()
                    .domain([0, d3.max(dataset, (d) => d[0])])
                    .range([padding, w - padding]);

   const yScale = d3.scaleLinear()
                    .domain([0, d3.max(dataset, (d) => d[1])])
                    .range([h - padding, padding]);

   const svg = d3.select("body")
                 .append("svg")
                 .attr("width", w)
                 .attr("height", h);

   svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      // Add your code below this line
      .attr('cx', (d) => xScale(d[0]))
      .attr('cy', (d) => yScale(d[1]))
       .attr('r', 5)

      // Add your code above this line

   svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text((d) =>  (d[0] + ", "
+ d[1]))
      // Add your code below this line
       .attr('x', (d) => xScale(d[0]) + 10)
       .attr('y', (d) => yScale(d[1]))
   

      // 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/98.0.4758.102 Safari/537.36 OPR/84.0.4316.21

Challenge: Use a Pre-Defined Scale to Place Elements

Link to the challenge:

2

The answer here is at:
svg.selectAll(“text”)
.data(dataset)
.enter()
.append(“text”)
.text((d) => (d[0] + ", "

  • d[1]))
    // Add your code below this line
    .attr(‘x’, (d) => xScale(d[0]) + 10) <— it should be + 9.1 or 9.2
    .attr(‘y’, (d) => yScale(d[1]))
3

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