Change Styles Based on Data

Tell us what’s happening:

Your 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
      d3.select("h2").style("color", (d) => {
        if(select("h2").text() < 20)
        {
          return "red";
        }
else 
{
  return "green";
}
      } )
      
      
      // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/change-styles-based-on-data

You don’t need to reselect the data. Just use .style etc.
But there is another mistake in the body of the callback, in the condition of the if statement. Hint: use the d argument.

Try this bro

.style(“color”, (d) => d >= 20? “green”:“red”)

2 Likes

he mean this

.style(“color”, (d) => d < 20? “red”:“green”);

2 Likes