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

JavaScript
1

Tell us what’s happening:

i really don’t understand where is my issue, each div has different height

Your code so far

<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>

Your browser information:

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

Challenge Information:

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

2

It seems that you added some unnecessary () parentheses

3

same error using or not using parenthesis.

4

Please share your updated code.

5 
<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>```
6

Looks good to me and it passes the test for me.

Exactly what error message do you get?

You can try to reset the step and try it again.

7

All :neutral_face:
// Running tests:
// 1. The first div should have a height of 120 pixels and a margin of 2 pixels.
// 2. The second div should have a height of 310 pixels and a margin of 2 pixels.
// 3. The third div should have a height of 220 pixels and a margin of 2 pixels.
// 5. The fifth div should have a height of 250 pixels and a margin of 2 pixels.
// 7. The seventh div should have a height of 290 pixels and a margin of 2 pixels.
// 8. The eighth div should have a height of 140 pixels and a margin of 2 pixels.
// Tests completed

I’m starting to think it’s a bug.

8

It’s definitely something. The code is good though, here are some things you can try:

Click on the “Reset” step button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.