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

JavaScript
1

Tell us what’s happening:

i made the margin 2px, and also the call back function d=>(d*10)+‘px’. the 1,6 and 9 tests are passed but the rest is not passed, what’s is the problem ?

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

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?
  • What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
  • Are there any errors or messages in the console?

If this does not help you solve the problem, please reply with answers to these questions.

3

JS follows the order of operations so you don’t need to put the extra brackets here.