Data Visualisation with D3 journal Part: 5

Visualize Data with a Treemap Diagram

This kind of visualisation generally used to show hierarchical data with parent -child relationships. In our case, I used it show three kinds of data:

1. Video Game Sales. Top game sales grouped by platform.
2. Movies Sales. Top grossing movies grouped by genre.
3. KickStarter pledges. Top most pledged kickstarter campaigns.

Each category or group has been represented with different colour and within that section ‘area’ occupied by a certain category represents its value.

Implementation Steps:

1. Add three anchor tags on the top to switch between video games, movies and kickstart pledges.
2. Call API according to the current mode.

var urls = ["https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json"
," https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json","https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json"];
var currentSelectedSet = 0; // 0 - videogames , 1 - movies , 2 - kickstarter
function reloadDataWithCurrentMode()  {
  
    reqDataSet = new XMLHttpRequest();
  reqDataSet.open(
    "GET",
    urls[currentSelectedSet],
    true
  );
reqDataSet.send();
  reqDataSet.onload = function() {
    loadDataSetInTreeForm(reqDataSet.responseText);
  };
}

3. Once we have the appropriate data, we will parse data using d3.hierarchy and then create tree map using it.

// Create Tree map
  
  var root = d3.hierarchy(data)
      .eachBefore(function(d) {
        d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; 
      })
      .sum(function(d){
        return d.value;
      })
      .sort(function(a, b) { return b.value - a.value; });
  
    var treemap = d3.treemap()
    .size([w, h])
    .paddingInner(1);
  
    treemap(root);

4. Now we have to add cells in tree map using the tree map we created in the last step. While setting the data, we will use only leaf nodes. In the next step we will add corresponding ‘rect’ for each cell and fill with the colour depending on the category of cell.

// Add Cells
  
    var cell = svg.selectAll("g")
    .data(root.leaves())
    .enter().append("g")
    .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
var rectBox = cell.append("rect")
      .attr("id", function(d) { return d.data.id; })      
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("class","tile")
      .attr("fill", function(d,i) {
        return color(d.data.category);
      });

5. At the bottom we need to create a legend where user can see the category of each colour. I added rects and also appended text in front of each. First I had to extract unique categories from leaf nodes and then add UI elements.

var legendsvg;
const w = 1000;
const h = 1000;
const padding = 70;
function getUniqueCategories(allArray)  {
  
  var returnArray = [];
  allArray.forEach(function(value){
      
    if(returnArray.indexOf(value.data.category) === -1) {
      returnArray.push(value.data.category);
    }
  });
  
  return returnArray;
}
function addLegendInBottom(categories)  {
 
  const numberOfRectPerCoumn = 5;
  const heightPerRow = 55;
  const legendHeight = heightPerRow * numberOfRectPerCoumn;
  
  legendsvg = d3
        .select("#main")
        .append("svg")
        .attr("class", "svglegend")
        .attr("width", w)
        .attr("height", legendHeight)
        .attr("x", padding)
        .attr("y", h)
        .attr("id", "legend");
  
  
  legendsvg.selectAll("rect")
       .data(categories)
       .enter()
       .append("rect") 
       .attr("class","legend-item")
       .attr("x", function(d,i){
        const xOffset = parseInt(i/numberOfRectPerCoumn);
        return (xOffset * 200);
        })
       .attr("y", function(d,i){    
          return (i%numberOfRectPerCoumn) * 51;
        })
       .attr("width", 50)
       .attr("height", 50)
       .attr("fill",function(d,i){
          return color(d);
        });
  
  // Add labels here
  
      legendsvg.selectAll("text")
       .data(categories)
       .enter()
       .append("text")
       .attr("x",function(d,i){
        const xOffset = parseInt(i/numberOfRectPerCoumn);
        return (xOffset * 200)+55;
        })
       .attr("y",function(d,i){    
          return ((i%numberOfRectPerCoumn) * 51) + 28;
        })
       .text((d)=>d);
}
var uniqueCategories = getUniqueCategories(root.leaves());
addLegendInBottom(uniqueCategories);

It was the last the last project of data visualisation certification. I have completed it and here is my certification.