Data Visualization with D3 - Change Styles Based on Data

JavaScript
1

Tell us what’s happening:

Change Styles Based on Data:
Hello everyone, can someone help with this problem?

Your code so far

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

    d3.select('body')
      .data(dataset)
      .enter()
      .append('h2')
      .style("color", (d) => {
        if (d < 20){
          return 'green'
        }
        else {
          return 'red'
        }
      })
  </script>
</body>

Your browser information:

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

Challenge Information:

Data Visualization with D3 - Change Styles Based on Data

Екранна снимка 2025-09-12 160909
Екранна снимка 2025-09-12 1609091917×970 128 KB

2

Hi @Donita202 and welcome to our community!

Check that you are following this instruction exactly:

Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green.

1 Like
3

Thank you so much for the help.

1 Like