Use a Pre-Defined Scale to Place Elements Solution appears to be correct, will not pass?

JavaScript
1

Tell us what’s happening:
I’ve been working through the D3 challenges without too much pain but this one is puzzling me I went so far as to look up solution on github which I usually try not to do until AFTER I solve the solution to see any differences for optimization reasons…

My code looks identical to me… could it be a browser rendering issue, that hasn’t been an issue before. Am I just missing something?

It passes all the circles and element 3 and 4 of label positions, The text positions of 1,2 and 5-10 inclusive fail though… Any thoughts?

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", (d) => 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/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements/

2

FCC tests could fail on other browsers besides Chrome. So if you are not using you might see that behavior.

3

Using chrome… maybe I need to update

4

Figured it out:

This was my original code I put in the passed most but not all tests:

.attr(“x”, (d) => xScale(d[0]) + 10)

This is what it should have been:

.attr(“x”, (d) => xScale(d[0] + 10))

Inside the inner elipse for the scaling and padding to be right thats why the two near middle passed but the others didn’t.

My chrome version was out of date by a few versions though the 3 little dots weren’t colorred usually are when its out of date.

1 Like