This is a full walkthrough for the Treemap Diagram Data Visualization project.We import some data on the movies, create a hierarchy and visualize them with a treemap diagram where the area of the tile is proportional to the revenue.
Looking at what we need to create and talking through the structure of the task.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="<https://d3js.org/d3.v5.min.js>"></script>
<title>Treemap Diagram</title>
</head>
<body>
<svg id='canvas'>
</svg>
</body>
<script defer src='script.js'></script>
<script defer src='<https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js>'></script>
</html>
html, body{
min-height: 100%
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
svg{
background-color: whitesmoke;
}
#canvas{
min-width: 1000px;
min-height: 600px
}