Change Styles Based on Data

Back End Help
#1

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

#2

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.

#3

Try this bro

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

2 Likes
#4

he mean this

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

2 Likes