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

Raw Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7fa7367417b2b2512bc5	Work with Dynamic Data in D3	6	301498	work-with-dynamic-data-in-d3

--description--

The last two challenges cover the basics of displaying data dynamically with D3 using the data() and enter() methods. These methods take a data set and, together with the append() method, create a new DOM element for each entry in the data set.

In the previous challenge, you created a new h2 element for each item in the dataset array, but they all contained the same text, "New Title". This is because you have not made use of the data that is bound to each of the h2 elements.

The D3 text() method can take a string or a callback function as an argument:

selection.text((d) => d)

In the example above, the parameter d refers to a single entry in the dataset that a selection is bound to.

Using the current example as context, the first h2 element is bound to 12, the second h2 element is bound to 31, the third h2 element is bound to 22, and so on.

--instructions--

Change the text() method so that each h2 element displays the corresponding value from the dataset array with a single space and "USD". For example, the first heading should be "12 USD".

--hints--

The first h2 should have the text "12 USD".

assert($('h2').eq(0).text() == '12 USD');

The second h2 should have the text "31 USD".

assert($('h2').eq(1).text() == '31 USD');

The third h2 should have the text "22 USD".

assert($('h2').eq(2).text() == '22 USD');

The fourth h2 should have the text "17 USD".

assert($('h2').eq(3).text() == '17 USD');

The fifth h2 should have the text "25 USD".

assert($('h2').eq(4).text() == '25 USD');

The sixth h2 should have the text "18 USD".

assert($('h2').eq(5).text() == '18 USD');

The seventh h2 should have the text "29 USD".

assert($('h2').eq(6).text() == '29 USD');

The eighth h2 should have the text "14 USD".

assert($('h2').eq(7).text() == '14 USD');

The ninth h2 should have the text "9 USD".

assert($('h2').eq(8).text() == '9 USD');

--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")
      // Add your code below this line

      .text("New Title");

      // 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`);

  </script>
</body>

2.7 KiB Raw Blame History