diff --git a/seed/challenges/04-data-visualization/data-visualization-with-d3.json b/seed/challenges/04-data-visualization/data-visualization-with-d3.json index ae49cd25d5..6a63c44f57 100644 --- a/seed/challenges/04-data-visualization/data-visualization-with-d3.json +++ b/seed/challenges/04-data-visualization/data-visualization-with-d3.json @@ -168,12 +168,14 @@ } ], "description": [ - "The last couple challenges covered the tools used to display dynamic data. They introduced the data() and enter() methods. These functions take a data set, then for each item in the set, create a new element with that piece of data attached to it.", - "The last challenge created a new h2 for each item in the data array, but it displayed the same text (\"New Title\") for each heading. Fortunately, there is a way to access and display the actual data with callback functions.", - "The text() method can take a string or a callback function as an argument. Since the data from the dataset array is attached to each element, the callback function has access to it. The parameter used in the callback function (d in the example below) is for the individual data-point itself. This callback function would set the text in the selection to the data value:", + "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.", "
", - "Change the text() method so it does not place \"New Title\" in each heading. Instead, it displays the data from the array with a space and \"USD\". For example, the first heading should say \"12 USD\"." + "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\"." ], "challengeSeed": [ "",