--- id: 587d7fa9367417b2b2512bcf title: Dynamically Change the Height of Each Bar challengeType: 6 forumTopicId: 301486 dashedName: dynamically-change-the-height-of-each-bar --- # --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. ```js 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`. ```js assert($('rect').eq(0).attr('height') == '36'); ``` The second `rect` should have a `height` of `93`. ```js assert($('rect').eq(1).attr('height') == '93'); ``` The third `rect` should have a `height` of `66`. ```js assert($('rect').eq(2).attr('height') == '66'); ``` The fourth `rect` should have a `height` of `51`. ```js assert($('rect').eq(3).attr('height') == '51'); ``` The fifth `rect` should have a `height` of `75`. ```js assert($('rect').eq(4).attr('height') == '75'); ``` The sixth `rect` should have a `height` of `54`. ```js assert($('rect').eq(5).attr('height') == '54'); ``` The seventh `rect` should have a `height` of `87`. ```js assert($('rect').eq(6).attr('height') == '87'); ``` The eighth `rect` should have a `height` of `42`. ```js assert($('rect').eq(7).attr('height') == '42'); ``` The ninth `rect` should have a `height` of `27`. ```js assert($('rect').eq(8).attr('height') == '27'); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```