--description--

The height of each bar can be set to the value of the data point in the array, similar to how the x value was set dynamically.

selection.attr('property', (d, i) => {});

Here d would be the data point value, and i would be the index of the data point in the array.

--instructions--

Change the callback function for the height attribute to return the data value times 3.

Note: Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.

--hints--

The first rect should have a height of 36.

assert.strictEqual(
  document.querySelectorAll('rect')[0]?.getAttribute('height'),
  '36'
);

The second rect should have a height of 93.

assert.strictEqual(
  document.querySelectorAll('rect')[1]?.getAttribute('height'),
  '93'
);

The third rect should have a height of 66.

assert.strictEqual(
  document.querySelectorAll('rect')[2]?.getAttribute('height'),
  '66'
);

The fourth rect should have a height of 51.

assert.strictEqual(
  document.querySelectorAll('rect')[3]?.getAttribute('height'),
  '51'
);

The fifth rect should have a height of 75.

assert.strictEqual(
  document.querySelectorAll('rect')[4]?.getAttribute('height'),
  '75'
);

The sixth rect should have a height of 54.

assert.strictEqual(
  document.querySelectorAll('rect')[5]?.getAttribute('height'),
  '54'
);

The seventh rect should have a height of 87.

assert.strictEqual(
  document.querySelectorAll('rect')[6]?.getAttribute('height'),
  '87'
);

The eighth rect should have a height of 42.

assert.strictEqual(
  document.querySelectorAll('rect')[7]?.getAttribute('height'),
  '42'
);

The ninth rect should have a height of 27.

assert.strictEqual(
  document.querySelectorAll('rect')[8]?.getAttribute('height'),
  '27'
);

--seed--

--seed-contents--

html

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3
      .select('body')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

    svg
      .selectAll('rect')
      .data(dataset)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 30)
      .attr('y', 0)
      .attr('width', 25)
      .attr('height', (d, i) => {
        // Add your code below this line


        
        
        // Add your code above this line
      });
  </script>
</body>

--solutions--