Data Visualization with D3 - Update the Height of an Element Dynamically

JavaScript
1

Tell us what’s happening:

Hello, can someone help me to solve this, I don’t know what am I doing wrong. Thank you

Your code so far

<style>
  .bar {
    width: 25px;
    height: 100px;
    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")
      // Add your code below this line
      .style("height", (div)=>{
        div=dataset;
      })


      // 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/131.0.0.0 Safari/537.36

Challenge Information:

Data Visualization with D3 - Update the Height of an Element Dynamically

2

remember that the callback need to return the value

3

Hi there!

You have an example:

.style("cssProperty", (d) => d)

Your code didn’t matches with the example.

4

Log out the callback parameter to better understand what it is.

.append() adds 9 divs because the dataset array has 9 elements.

The callback to .style() is passed the array elements. That is how you can add the values from the array as CSS values.

Here is another example you can look at.

<style>
  .light {
    width: 50px;
    height: 50px;
  }
</style>

<body>
  <script>
    const dataset = ["red", "yellow", "green"];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "light")
      .style("background-color", (data) => {
        console.log(data);
        return data;
      })
  </script>
</body>