3.9 KiB
3.9 KiB
id | title | required | challengeType | |||
---|---|---|---|---|---|---|
587d7fa7367417b2b2512bc7 | Change Styles Based on Data |
|
6 |
Description
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) => {The
/* Logic that returns the color based on a condition */
});
style()
method is not limited to setting the color
- it can be used with other CSS properties as well.
Instructions
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".
NoteYou 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