Gain insights into D3.js fundamentals, explore DOM manipulation, data binding, and SVG. Learn about creating maps, graphs, and network visualizations to master data-driven documentation.

Introduction to Visualization Using D3.js.png

In this course, you will learn the fundamentals of D3.js (stands for Data-Driven Documents), which is a JavaScript library mainly used for visualization.

In the first half of the course, you will cover DOM (Document Object Model) manipulation, method chaining, data binding, and data loading.

In the second half, you’ll cover visualization concepts and dive deep into SVG which is used to draw different geometrical shapes. After that, you’ll work with various maps and graphs in order to display your data. Lastly, you’ll learn about network visualization with the help of nodes and links.

By the end of this course, you will have a new, powerful data visualization library at your disposal.

Introduction to Visualization Using D3.js

# Introduction
Let's dive into the last concept of interactivity, **tooltip**.
Tooltip is an important concept for interactivity in D3.js. We will listen to an event, and every time that event occurs, we will update the information of the tooltip and show it on the screen.

Let's take a look at the following example to understand the working of the tooltip.

# Example
Let's look at an example of a network and apply a tooltip to it.   


<!DOCTYPE html>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<body></body>


codemirror

# Explanation
Let’s dive into the following explanation to better understand how the above code works.
-  We have drawn the same network as we did in the Drawing a Network [lesson](https://www.educative.io/pageeditor/10370001/4609988201807872/5400750816493568).
- **Line 21-28**: We have made a `var tooltip` with the `text` `tooltip`, and we have made it hidden by using the `visibility` attribute.
- **Line 54-59**: We have made two event listeners, namely `mouseover` and `mouseout`. As we hover over the node, we change the `text` to the node's name and make it `visible` in the top left corner, which is generally the ideal position for the tooltip. As we leave the node, we hide the `tooltip` again using the `mouseout` event. 


Learn about the tooltip in D3.js along with an example.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Tooltip