freeCodeCamp

3.8 KiB

Raw Blame History

id	title	challengeType
587d7fa7367417b2b2512bc7	Change Styles Based on Data	6

Description

D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the style() method to change the styling for different elements. For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the style() method and include the conditional logic. The callback function uses the d parameter to represent the data point:

selection.style("color", (d) => {
  /* Logic that returns the color based on a condition */
});

The style() method is not limited to setting the color - it can be used with other CSS properties as well.

Instructions

Add the style() method to the code in the editor to set the color of the h2 elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green". Note
You can use if-else logic, or the ternary operator.

Tests

tests:
  - text: The first <code>h2</code> should have a <code>color</code> of red.
    testString: assert($('h2').eq(0).css('color') == "rgb(255, 0, 0)", 'The first <code>h2</code> should have a <code>color</code> of red.');
  - text: The second <code>h2</code> should have a <code>color</code> of green.
    testString: assert($('h2').eq(1).css('color') == "rgb(0, 128, 0)", 'The second <code>h2</code> should have a <code>color</code> of green.');
  - text: The third <code>h2</code> should have a <code>color</code> of green.
    testString: assert($('h2').eq(2).css('color') == "rgb(0, 128, 0)", 'The third <code>h2</code> should have a <code>color</code> of green.');
  - text: The fourth <code>h2</code> should have a <code>color</code> of red.
    testString: assert($('h2').eq(3).css('color') == "rgb(255, 0, 0)", 'The fourth <code>h2</code> should have a <code>color</code> of red.');
  - text: The fifth <code>h2</code> should have a <code>color</code> of green.
    testString: assert($('h2').eq(4).css('color') == "rgb(0, 128, 0)", 'The fifth <code>h2</code> should have a <code>color</code> of green.');
  - text: The sixth <code>h2</code> should have a <code>color</code> of red.
    testString: assert($('h2').eq(5).css('color') == "rgb(255, 0, 0)", 'The sixth <code>h2</code> should have a <code>color</code> of red.');
  - text: The seventh <code>h2</code> should have a <code>color</code> of green.
    testString: assert($('h2').eq(6).css('color') == "rgb(0, 128, 0)", 'The seventh <code>h2</code> should have a <code>color</code> of green.');
  - text: The eighth <code>h2</code> should have a <code>color</code> of red.
    testString: assert($('h2').eq(7).css('color') == "rgb(255, 0, 0)", 'The eighth <code>h2</code> should have a <code>color</code> of red.');
  - text: The ninth <code>h2</code> should have a <code>color</code> of red.
    testString: assert($('h2').eq(8).css('color') == "rgb(255, 0, 0)", 'The ninth <code>h2</code> should have a <code>color</code> of red.');

Challenge Seed

<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



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

Solution

// solution required

3.8 KiB Raw Blame History