Work with Dynamic Data in D3
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
Hints
Hint 1
- As in the example, your callback function should target each datum,
d
is used for brevity and as convention for each datum
Hint 2
- All of the methods are chained together. Since
data()
andenter()
precede thetext()
method, the following method calls will be for each datum and executed separately
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 thetext()
method
Solutions
Solution 1 (Click to Show/Hide)
<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 variabledataset
-
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
Solution 2 (Click to Show/Hide)
<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 variabledataset
-
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