Data visulalization with D3. Ternary operator is creating issue

JavaScript
1

What is wrong with the code i’ve added on the coding section, the one with ternary operator. I’ve tried it with if else and it works perfectly fine but i’m not being able to find mistake in this code. Please help

My code so far


<body>
<script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

  d3.select("body").selectAll("h2")
    .data(dataset)
    .enter()
    .append("h2")
    .text((d) => (d + " USD"))
    // Add your code below this line

    .style("color",(d)=>{
      (d>20)?('green'):('red');
    });

    // Add your code above this line
</script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Change Styles Based on Data

Link to the challenge:

2 
.style("color",(d)=>{
      (d>20)?('green'):('red');
 });

You’re not returning anything from the callback function, hence the color value is being set to undefined (default return value in Javascript).