---
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
videoUrl: ''
localeTitle: Cambiar estilos basados en datos
---
## Description
D3 es sobre visualización y presentación de datos. Es probable que desee cambiar el estilo de los elementos en función de los datos. Puede usar una función de devolución de llamada en el método style() para cambiar el estilo de los diferentes elementos. Por ejemplo, es posible que desee colorear un punto de datos en azul si tiene un valor inferior a 20 y, de lo contrario, en rojo. Puede usar una función de devolución de llamada en el método style() e incluir la lógica condicional. La función de devolución de llamada utiliza el parámetro d para representar el punto de datos: selection.style ("color", (d) => {
/ * Lógica que devuelve el color basado en una condición * /
});
El método style() no se limita a establecer el color , también se puede usar con otras propiedades CSS.
## Instructions
Agregue el método style() al código en el editor para establecer el color de los elementos h2 condicionalmente. Escriba la función de devolución de llamada de modo que si el valor de los datos es inferior a 20, devuelve "rojo"; de lo contrario, devuelve "verde". Nota
Puede utilizar la lógica if-else o el operador ternario.
## Tests
```yml
tests:
- text: El primer h2 debe tener un color rojo.
testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first h2 should have a color of red.");'
- text: El segundo h2 debe tener un color verde.
testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second h2 should have a color of green.");'
- text: El tercer h2 debe tener un color verde.
testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third h2 should have a color of green.");'
- text: El cuarto h2 debe tener un color rojo.
testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth h2 should have a color of red.");'
- text: El quinto h2 debe tener un color verde.
testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth h2 should have a color of green.");'
- text: El sexto h2 debe tener un color rojo.
testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth h2 should have a color of red.");'
- text: El séptimo h2 debe tener un color verde.
testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh h2 should have a color of green.");'
- text: El octavo h2 debe tener un color rojo.
testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth h2 should have a color of red.");'
- text: El noveno h2 debe tener un color rojo.
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
```