---
id: 587d7fa7367417b2b2512bc7
title: Change Styles Based on Data
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:
```js
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
## Solution
```js
// solution required
```