---
id: 587d7fa7367417b2b2512bc7
title: Alterar estilos com base nos dados
challengeType: 6
forumTopicId: 301479
dashedName: change-styles-based-on-data
---
# --description--
O D3 tem a ver com a visualização e a apresentação dos dados. Você provavelmente vai querer alterar o estilo de elementos com base nos dados. Você pode usar uma função de callback no método `style()` para mudar a estilização para elementos diferentes.
Por exemplo, pode ser que você queira colorir um ponto dos dados em azul se ele tiver um valor inferior a 20, ou em vermelho se for igual ou superior. Você pode usar uma função de callback no método `style()` e incluir uma lógica condicional. A função de callback usa o parâmetro `d` para representar o ponto de dados:
```js
selection.style("color", (d) => {
});
```
O método `style()` não é limitado a definir `color` - ele também pode ser usado com outras propriedades do CSS.
# --instructions--
Adicione o método `style()` ao código no editor para definir `color` para os elementos `h2` de modo condicional. Escreva a função de callback de modo que, se o valor do dado for inferior a 20, ela retornará "red" (vermelho). Do contrário, retornará "green" (verde).
**Observação:** você pode usar a lógica de if-else ou o operador ternário.
# --hints--
O primeiro `h2` deve ter `color` definido como "red".
```js
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
```
O segundo `h2` deve ter `color` definido como "green".
```js
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
```
O terceiro `h2` deve ter `color` definido como "green".
```js
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
```
O quarto `h2` deve ter `color` definido como "red".
```js
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
```
O quinto `h2` deve ter `color` definido como "green".
```js
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
```
O quinto `h2` deve ter `color` definido como "red".
```js
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
```
O sétimo `h2` deve ter `color` definido como "green".
```js
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
```
O oitavo `h2` deve ter `color` definido como "red".
```js
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
```
O nono `h2` deve ter `color` definido como "red".
```js
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
```