Data Visualization with D3 - Change the Presentation of a Bar Chart

HTML-CSS
1

Tell us what’s happening:
I coded correctly even after checking the solution. It still comes with an error which I don’t understand. Appreciate the help!

Your code so far

<style>
  .bar {
    width: 25px;
    height: 100px;
    margin: 2px;
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      .style("height", (d) => (d  * 10+ "px"))
  </script>
</body>

Your browser information:

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

Challenge: Data Visualization with D3 - Change the Presentation of a Bar Chart

Link to the challenge:

1 Like
2

What error do you get?

4

image
image1918×888 142 KB

Here is the screenshot of my screen. The error is displayed on the bottom.

1 Like
5

Sometimes these tests act a bit wonky for browser-specific reasons. Have you tried using a different one?

1 Like
6

I will try doing that after office hours. If I still encounter errors, I will post here.

1 Like
7

also receiving the same error with the exact same code and can’t get it to pass the test,

8

I still don’t get it either :frowning:

9

I ended up resetting my computer, and uninstalling my extensions and that ended up working for me I hope it does for you I actually completed the rest of the course and saved that one for last then when I came back it worked so if that one doesn’t work just do the rest comeback make sure you turn the computer off and on and that might work see if it does for you and let me know if it does you got this! Don’t let nothing hold you back!

10
  • code
<style>
  .bar {
    width: 25px;
    height: 100px;
    /* Add your code below this line */

    margin: 2px;
    /* Add your code above this line */
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      .style("height", (d) => (d * 10 + "px")) // Change this line
  </script>
</body>
11

Had the same issue with chrome, tests passed with the same code on firefox

12

I think this is still a bug as even when I had it correct, it doesn’t detect the write answers - so I even copied the solution and that doesn’t work.

Chrome didn’t work but another browser did

13

for me it worked when I ran the code in freecodecamp app📱

14

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