Work with Dynamic Data in D3 help

i do not understand what is happening

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((d) => d);
      
      // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3

You need to append USD, right?

.text((d) => d + ' USD' );

1 Like

yeah but whats d?dont i have to put the array dataset or something?

You’ve already done that, right before the .enter() method.

Ok. I think you need to look a little deeper into D3 on your own to better understand the library.

I’ll try to explain what this code does:

Here we’re selecting (targeting) all H2 elements inside the body element. Maybe there are 0 or 100, but we will deal this this later.

.select("body").selectAll("h2")

Next, we’re using the data method D3 the dataset to work with (an array).

  .data(dataset)

With the enter method we’re telling D3 to look for the dataset passed in the previous line and make as many placeholders as needed depending on the number of items in the dataset.

  .enter()

Here we’re appending, or replacing so to say, one H2 tag for each placeholder created previously…

  .append("h2")

…and then we’re setting the inner text for each H2 element, using an arrow function, using every value in the dataset.

  .text( (d) => d + " USD" );

The d is the argument for the function and represents each value in the dataset (12, 31, 22, 17…).

5 Likes

this helped me understand better,thanks!

2 Likes