Tree Map

Tree Map

by Serhii Matrunchyk

HTML

<div id="graph"></div>

CSS

body {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #000;
}
.sibling {
    fill: none;
    stroke: blue;
}
.border {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #aaa;
}
.node {
    stroke: red;
    fill:white;
}

JavaScript

const margin = {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
  };
const width = window.innerWidth;
const height = window.innerHeight;
const kx = d => d.x - 20;
const ky = d => d.y - 10;
const tx = d => d.x - 3;
const ty = d => d.y + 3;

//make an SVG
const svg = d3.select("#graph").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);


//My JSON note the 
//no_parent: true this ensures that the node will not be linked to its parent
//hidden: true ensures that the nodes is not visible.
const root = {
  name: "",
  id: 1,
  hidden: true,
  no_parent: true,
  children: [{
      name: "Q",
      id: 16,
      no_parent: true
    },
    {
      name: "",
      id: 2,
      no_parent: true,
      hidden: true,
      children: [{
        name: "J",
        id: 12,
      }, {
        name: "L",
        id: 13,
        no_parent: true
      }, {
        name: "C",
        id: 3
      }, {
        name: "",
        id: 4,
        hidden: true,
        no_parent: true,
        children: [{
          name: "D",
          id: 5,
        }, {
          name: "",
          id: 14,
          hidden: true,
          no_parent: true,
          children: [{
            name: "P",
            id: 15,
          }]
        }, {
          name: "E",
          id: 6,
        }]
      }, {
        name: "K",
        id: 11
      }, {
        name: "G",
        id: 7,
        children: [{
          name: "H",
          id: 8,
        }, {
          name: "I",
          id: 9,
        }]
      }]
    }, {
      name: "M",
      id: 10,
      no_parent: true,
      children: [

      ]
    }
  ]
}
const allNodes = flatten(root);
//This maps the siblings together mapping uses the ID using the blue line
const siblings = [{
  source: {
    id: 3,
    name: "C"
  },
  target: {
    id: 11,
    name: "K"
  }
}, {
  source: {
  ...