Data Visualization with D3 - Work with Dynamic Data in D3

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<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("12 USD");
      
   

      // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Data Visualization with D3 - Work with Dynamic Data in D3

Link to the challenge:

2

Hi there and welcome to our community!

It’s helpful if you can learn to describe what it is you’re struggling with so that we can better understand how to help you. Learning to describe issues is tricky but a vital skill in coding.

The data() and enter() methods allow you to work with data dynamically, so each of the h2 elements can be tied to items in the dataset.

The key part of this challenge description:

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.

Try putting that in your text() method to see what happens…
Then, create a callback function which also appends the text ‘USD’ onto each item.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.