Oliver Eyton-Williams ee1e8abd87

feat(curriculum): restore seed + solution to Chinese (#40683 )

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>

2021-01-12 19:31:00 -07:00

2.8 KiB

Raw Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7fa7367417b2b2512bc7	Change Styles Based on Data	6	301479	change-styles-based-on-data

--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 it 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.

--hints--

The first h2 should have a color of red.

assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');

The second h2 should have a color of green.

assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');

The third h2 should have a color of green.

assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');

The fourth h2 should have a color of red.

assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');

The fifth h2 should have a color of green.

assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');

The sixth h2 should have a color of red.

assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');

The seventh h2 should have a color of green.

assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');

The eighth h2 should have a color of red.

assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');

The ninth h2 should have a color of red.

assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');

--seed--

--seed-contents--

<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>

--solutions--

<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"))
      .style("color", (d) => d < 20 ? "red" : "green")
  </script>
</body>

2.8 KiB Raw Blame History