I would like to make a webpage that looks something like the following:

[![a infographic titled 'Mapping Dog Care Manuals' with subheadings such as 'Edibles' and 'Bowl and plate design' accompanied by coloured dots representing different manuals.](https://i.stack.imgur.com/TGnvg.png)](https://i.stack.imgur.com/TGnvg.png)

More specifically, I would like my webpage to be generated based on a dataset that has four columns, titled as follows: 

* Manuals (there are four unique elements in this category, and they determine the colour of the dots)
* Name (this category determines the words that appear on mouseover)
* CategoryLevel1 (this category positions together rows that have the same CategoryLevel1)
* CategoryLevel2 (this positions together CategoryLevel1 data).

Update: figured out a strategy: run nest function and create multiple svgs based on keys. Add squares representing entire dataset to svgs, then use opacity to hide the ones that are not relevant. 

Problem lies in this line: `.attr("opacity", function(d, i) {return d.CategoryLevel1 == nest[p].key ? 1 : 0})`. Although `nest[p].key` works perfectly fine earlier in the code (see console.log on line 106), it seems to behave differently when in a block for creating rectangles. Does anyone know how to make it behave?

```js
var doc = `Manual Name CategoryLevel1 CategoryLevel2
DOG "General Furry, Program and Subject Files" Average Quantity and Planning Edibles
TR Senate Committee on animal Standards Bowl and Plate Design Edibles
TR Published Canine Bowl and Plate Design Edibles
TR Canine case files Bowl and Plate Design Edibles
DOG Canine Files  Avoiding Neck Strain Edibles
DOG Canine Files  Drooling Edibles
DOG Canine Files  Drooling Edibles
DG ADVERTISING At home At home
DG PROMOTIONS At home At home
DG3 Publications At home At home
TR Public and Information Services At home At home
TR Petting Services Getting special treats At home
TR Petting Services Getting special treats At home
TR Petting Services Getting special treats At home
TR Petting Services Getting special treats At home
TR Petting Services Getting special treats At home
TR Petting Services Getting special treats At home
DG DEVELOPMENT Optimal time of day - walking Walks and outings
DG INCOME AND REVENUE Optimal time of day - walking Walks and outings
TR Fundraising Optimal time of day - walking Walks and outings
TR Fundraising Optimal time of day - walking Walks and outings
DG DEVELOPMENT Optimal time of day - walking Walks and outings
DG INCOME AND REVENUE Optimal time of day - walking Walks and outings
TR Wishbone Protective Measures Walks and outings
TR Wishbone Protective Measures Walks and outings
DG Wishbone Observant of Limps Etc Walks and outings
DOG Wishbone Observant of Limps Etc Walks and outings
TR Wishbone Observant of Limps Etc Walks and outings`;

const data = d3.tsvParse(doc, function(d) {
    return {
      Manual: d.Manual,
      Name: d.Name,
      CategoryLevel1: d.CategoryLevel1,
      CategoryLevel2: d.CategoryLevel2
    };
  });

    var nest = d3.nest()
      .key(function(d) {
        return d.CategoryLevel1;
      })
      .entries(data);

    var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0)

    var height = 100,
      width = 200;

    var color = d3.scaleOrdinal(["#edf8fb", "#b3cde3", "#8c96c6", "#88419d"]);

    var svg = d3.select("body").append("svg").attr("height", "100%").attr("width", "100%");

    var g = d3.select("svg").attr("height", "100%").attr("width", "100%");

    var svgs = d3.select("body")
      .selectAll("svg")
      .data(nest)
      .enter()
      .append('svg')
      .attr("width", width)
      .attr("height", height + 20);

    svgs.append("text")
      .attr('class', 'label')
      .data(nest)
      .attr('x', width / 2)
      .attr('y', height)
      .text(function(d) {
        return d.key;
      })
      .attr('text-anchor', 'middle')

    for (var p = 0; p < 9; p++) {

      nest.forEach(function(element) {

        console.log(nest[p].key);

        svgs.selectAll("rect")
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d) {
            return 50;
          })
          .attr("width", "5")
          .attr("x", function(d, i) {
            return i * 10;
          })
          .attr("y", 0)
          .attr("opacity", function(d, i) {
            return d.CategoryLevel1 == nest[p].key ? 1 : 0
          })
          .attr("fill", function(d) {
            return color(d.Manual)
          })

          .on("mouseover", function(d, i) {
            div.transition()
              .duration(200)
              .style("opacity", .9);
            div.html(d.Name)
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY - 50) + "px");
          })
          .on("mouseout", function(d) {
            div.transition()
              .duration(500)
              .style("opacity", 0);
          });

      });

    }
```

```css
.page {
  width: 90%;
  margin: auto;
}

.menu {
  height: 100px;
  background-color: #B2D6FF;
  /* Medium blue */
}

.sidebar {
  height: 50px;
  width: 15%;
  background-color: #F09A9D;
  float: inline-start;
  display: block;
  margin: 0.1%;
  /* Red */
}

.title {
  width: 100%;
  background-color: none;
  display: inline-block;
  float: inline-start;
  /* Yellow */
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: auto;
  height: auto;
  padding: 3px;
  font: 12px sans-serif;
  border: 0px;
  border-radius: 3px;
  pointer-events: none;
  background: lightgrey;
}
```

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Mapping Dog Care Manuals</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

</html>
```