Use a Pre-Defined Scale to Place Elements:D3

HTML-CSS
1

Tell us what’s happening:

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) => 10 + xScale(d[0]))
       .attr('y', (d) => yScale(d[1]));
       
       // Add your code above this line
  </script>
</body>

Can’t pass the challenge.
error in console:

The first label should have an x value of approximately 100 and a y value of approximately 368 after applying the scales.
The second label should have an x value of approximately 168 and a y value of approximately 181 after applying the scales.
The fifth label should have an x value of approximately 449 and a y value of approximately 237 after applying the scales.
The sixth label should have an x value of approximately 280 and a y value of approximately 306 after applying the scales.
The seventh label should have an x value of approximately 370 and a y value of approximately 351 after applying the scales.
The eighth label should have an x value of approximately 270 and a y value of approximately 132 after applying the scales.
The ninth label should have an x value of approximately 140 and a y value of approximately 144 after applying the scales.
The tenth label should have an x value of approximately 88 and a y value of approximately 326 after applying the scales.
2

The problem is here, you should put the +10 inside the parenthesis right after the d[0]
like this:
.attr(‘x’, (d) => xScale(d[0] + 10))

3

@AndrewFan0408 I too came up with the same solution as @seinfeld70. In my case it is because the instructions say to add 10 before passing d into xScale. As a beginner in Javascript , it looks like you’re adding 10 after d is passed into xScale. If this is not the case, could you explain how to read/ understand when ten is being added? Thanks