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 <code>style()</code> 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 <code>style()</code> method and include the conditional logic. The callback function uses the <code>d</code> parameter to represent the data point:
<blockquote>selection.style("color", (d) => {<br> /* Logic that returns the color based on a condition */<br>});</blockquote>
The <code>style()</code> method is not limited to setting the <code>color</code> - it can be used with other CSS properties as well.
</section>
## Instructions
<sectionid='instructions'>
Add the <code>style()</code> method to the code in the editor to set the <code>color</code> of the <code>h2</code> elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green".
<strong>Note</strong><br>You can use if-else logic, or the ternary operator.
</section>
## Tests
<sectionid='tests'>
```yml
tests:
- text: The first <code>h2</code> should have a <code>color</code> of red.
