Freecodecamp: [Beta] Suggested Description Changes—Work with Dynamic Data in D3 Challenge

[honmanyau]

Challenge work-with-dynamic-data-in-d3 has an issue.
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.1 Safari/603.1.30.

Part of the trigger for raising this issue is the incorrect use of "couple", instead of "couple of", in the D3 challenge in question (id: 587d7fa7367417b2b2512bc5). Another instance can be found in the challenge Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset (id: 587d7fac367417b2b2512bdc).

If I'm not mistaken, the use of simple past when describing a fact, such as in the sentence "The last couple of challenges covered the tools...", is also incorrect.

I think the description in the title challenge could use a rework—there are many ideas being explained but, in my opiniong, the current text is potentially confusing, particularly to non-native speakers. For example, the sentence "since the data from the dataset array is attached to each element, the callback function has access to it" appears to be misleading because, if I'm not mistaken, each h2 element only has access to an item in dataset that the element is mapped to.

I am more than happy to suggest a reworked description, but am not entirely sure how to go about it; not least because these changes can be subjective and I'm not entirely confident that I will be able to explain those concepts clearly with my lack of coding experience.

Many apologies in advance for any inconvenience caused—I have't had to report any issues or used GitHub beyond basic version control up until now. :(

[raisedadead]

Hi @honmanyau Thanks for the suggestion.
/cc @freeCodeCamp/moderators anyone expert on D3 to guide?

[QuincyLarson]

@hkuz what are your thoughts on this usage change?

[HKuz]

@honmanyau - thanks for your suggestions! To avoid ambiguity, I think we can change the instances of "The last couple challenges covered" to "The last two challenges cover ...".

I wasn't sure where you were referencing for your other comment, but that sentence should be clarified as you suggest. Perhaps we could say "since one item from the dataset array is attached to each element..." or something similar. If you can create a re-write of the segment so it's clear for non-native English speakers in any other way, that would be ideal. You can post it as a comment here and we can comment or change it as needed. Thanks so much!

[honmanyau]

@HKuz—many apologies for the delayed response and appended is my attempted edit. It is worth noting that I tried to avoid using passive voice as much as possible and included an example that I feel is important. I understand that they may be stylistically different to the text currently in the D3 section, so please feel free to edit any of it, not least because something that is clear to me may not necessarily be clear to others. :)

I hope that helps!

---

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 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. When you provide a callback function with d as a parameter to the text() method, it means that d will take a value of 12 for the first h2 element, 31 for the second h2 element, 22 for the third h2 element, and so on.

---

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

[HKuz]

Thanks so much for doing this @honmanyau - that text looks good! (I made a couple very minor formatting tweaks).

Contributors, this challenge text (located here) needs to be updated per the above comment. Check out the Contributor's Guide to get set up and feel free to ask questions in the Contributor's chat room. Thank you! 👍 :1st_place_medal: 💯

[honmanyau]

Absolutely no problem, @HKuz! :)

[dakshshah96]

Made the change here: #15539

[akash-karwande]

try this,
.text((d) => d + " " + "USD")