gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
e5aabc38f5b81b0bab51a648b55e49bde531f4ee
freeCodeCamp/guide/english/certifications/data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3/index.md

5.3 KiB
Raw Blame History

title
title
Work with Dynamic Data in D3

Work with Dynamic Data in D3

:triangular_flag_on_post: Remember to use Read-Search-Ask if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:

Problem Explanation:

This challenge introduces using JavaScript callback functions as arguments to D3 methods. Since D3 is a JavaScript object, it has no problem following the same syntax rules

Relevant Links

:speech_balloon: Hint: 1

  • As in the example, your callback function should target each datum, d is used for brevity and as convention for each datum

try to solve the problem now

:speech_balloon: Hint: 2

  • All of the methods are chained together. Since data() and enter() precede the text() method, the following method calls will be for each datum and executed separately

try to solve the problem now

:speech_balloon: Hint: 3

  • As in the example, use an arrow function to target each d as a parameter and insert that parameter as a variable into the text() method

try to solve the problem now

Spoiler Alert!

Solution ahead!

:beginner: Basic Code Solution:

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

Code Explanation:

  • d3 is used to target the D3 object
  • select('body') targets the 'body' element of the HTML document
  • selectAll('h2') targets the existing 'h2' nodes that are children to the 'body' element
  • data(dataset) tells D3 that the data to be used is held within the variable dataset
  • enter() returns placeholder nodes for each datum that has no corresponding DOM element in the selection
  • append('h2') turns these placesholders in to 'h2' elements
  • text((d) => d + ' USD') uses JavaScripts callback functionality to insert each datum, d, as the text for each 'h2' node created previously and concatenates the required ' USD'

Relevant Links

:sunflower: Intermediate Code Solution:

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

Code Explanation:

  • d3 is used to target the D3 object
  • select('body') targets the 'body' element of the HTML document
  • selectAll('h2') targets the existing 'h2' nodes that are children to the 'body' element
  • data(dataset) tells D3 that the data to be used is held within the variable dataset
  • enter() returns placeholder nodes for each datum that has no corresponding DOM element in the selection
  • append('h2') turns these placesholders in to 'h2' elements
  • text((d) => ```${d} USD```) uses JavaScripts callback functionality to insert each datum, d, as the text for each 'h2' node created previously. It also makes use of JavaScript template literals to avoid string concatenation

Relevant Links

:clipboard: NOTES FOR CONTRIBUTIONS:

  • :warning: DO NOT add solutions that are similar to any existing solutions. If you think it is similar but better, then try to merge (or replace) the existing similar solution.
  • Add an explanation of your solution.
  • Categorize the solution in one of the following categories — Basic, Intermediate and Advanced. :traffic_light: