Challenge: Add HTML Tags and Bind Data

Explore how to manipulate the DOM by adding HTML tags and binding data arrays to them using D3.js. This lesson helps you understand core concepts of data-driven document creation through practical coding tasks that reinforce your grasp of selections and data binding methods.

We'll cover the following...

Problem statement
Given Data
Expected Output
Coding exercise

Problem statement

In this challenge, we will test your knowledge of what we have covered so far.

The tasks in this challenge are as follows:

Create three new h1 tags inside the body tag in the HTML file.
Bind the given array of data with each h1 tag.
Show the data that is mapped with the HTML DOM elements on the output screen.

Note: You have to create three h1 tags using DOM manipulation.

Given Data

An array of data and an HTML page

var mydata=["London","New york","Paris"]

<head>
	<script src="https://d3js.org/d3.v6.min.js"></script>
	<script src="/index.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Expected Output

The expected output is the names of the cities in the output tab after binding them with li tags.

Output:

London

New York

Paris

1.Introduction

2.D3.js Fundamentals

3.Scales

4.Drawing Basic Shapes

5.Chart Fundamentals

6.Network Visualization, Hierarchical Data, and Interactivity

7.Conclusion

Challenge: Add HTML Tags and Bind Data

Problem statement

Given Data

Expected Output

Coding exercise