--- id: 587d7fa7367417b2b2512bc7 title: Change Styles Based on Data required: - src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js' challengeType: 6 --- ## Description
D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the style() method to change the styling for different elements. For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the style() method and include the conditional logic. The callback function uses the d parameter to represent the data point:
selection.style("color", (d) => {
  /* Logic that returns the color based on a condition */
});
The style() method is not limited to setting the color - it can be used with other CSS properties as well.
## Instructions
Add the style() method to the code in the editor to set the color of the h2 elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green". Note
You can use if-else logic, or the ternary operator.
## Tests
```yml tests: - text: The first h2 should have a color of red. testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first h2 should have a color of red.");' - text: The second h2 should have a color of green. testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second h2 should have a color of green.");' - text: The third h2 should have a color of green. testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third h2 should have a color of green.");' - text: The fourth h2 should have a color of red. testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth h2 should have a color of red.");' - text: The fifth h2 should have a color of green. testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth h2 should have a color of green.");' - text: The sixth h2 should have a color of red. testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth h2 should have a color of red.");' - text: The seventh h2 should have a color of green. testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh h2 should have a color of green.");' - text: The eighth h2 should have a color of red. testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth h2 should have a color of red.");' - text: The ninth h2 should have a color of red. testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth h2 should have a color of red.");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```