D3.js transpose() Function

0 0 1 minute read

The transpose() function in D3.js is used to return the transpose of a 2D array. This function helps to visualize the data and making graphs and charts.

Syntax:

d3.transpose(Matrix);

Parameters: This function accept a single parameter as mentioned above and described below:

Matrix: This parameter holds a matrix as a 2d array

Return value: It returns an array or the matrix.

Below given are a few examples of transpose function.

Example 1: Without using zip function to form a matrix.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
  <title>D3.js transpose() Function</title> 
</head> 
<body> 
  <!--Fetching from CDN of D3.js-->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    console.log(d3.transpose([[1,2,3],[4,5,6]])) 
  </script> 
</body> 
</html>

Output:

Example 2: Using zip function to form a matrix.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
  <title>D3 transpose() Function</title> 
</head> 
<body> 
    
  <!--Fetching from CDN of D3.js-->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    console.log("Making matrix using zip function: ") 
    let m=d3.zip(["a","b","s"],["c","d","h"],["e","f","g"]); 
    console.log("Original Matrix: ",m) 
    console.log("Transpose matrix: ",d3.transpose(m)) 
  </script> 
</body> 
</html>

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Mozilla Firefox
Safari
Opera

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!