D3 Driven - Employees Hierarchy Chart

Credits: David Bumbeishvili Source: https://bl.ocks.org/bumbeishvili/dbc0beff4baf64674b0f05b94cb4462e

by Sree K

HTML

<head>

  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Redesigned - Company Employees Hierarchy Chart </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>

      <style>
      .full-container {
  background-color: red;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}


/* ########################   DEPARTMENT INFO  ############################*/

.department-information {
  font-family: 'Roboto', sans-serif;
display:none;
  box-shadow: 0 0 5px #999999;
  position: absolute;
  max-width: 200px;
  top: 60px;
  left: 20px;
  padding: 10px;
  background-color: white;
}

.department-information .dept-name {
  color: #26a69a;
  font-weight: bold;
}

.department-information .dept-description {
  margin-top: 10px;
  color: #959b9a;
  font-size: 13px;
}

.department-information .dept-emp-count {
  margin-top: 10px;
  color: #959b9a;
  font-size: 13px;
}

/* ############################## SEARCHBOX ######################################### */

.user-search-box {
  overflow: hidden;
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  width: 0;
  background-color: white;
  border: 1px solid #c7dddb;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #bcbcc4;
  opacity: 0.5;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #bcbcc4;
 ...

JavaScript

var params = {
  selector: "#svgChart",
  dataLoadUrl: "https://raw.githubusercontent.com/bumbeishvili/Assets/master/Projects/D3/Organization%20Chart/redesignedChartLongData.json",
  chartWidth: window.innerWidth-40,
  chartHeight: window.innerHeight - 40,
  funcs: {
    showMySelf: null,
    search: null,
    closeSearchBox: null,
    clearResult: null,
    findInTree: null,
    reflectResults: null,
    departmentClick: null,
    back: null,
    toggleFullScreen: null,
    locate:null
  },
  data: null
}

d3.json(params.dataLoadUrl, function(data) {
  params.data = data;
  params.pristinaData = JSON.parse(JSON.stringify(data));

  drawOrganizationChart(params);
})

function drawOrganizationChart(params) {
  listen();

  params.funcs.showMySelf = showMySelf;
  params.funcs.expandAll = expandAll;
  params.funcs.search = searchUsers;
  params.funcs.closeSearchBox = closeSearchBox;
  params.funcs.findInTree = findInTree;
  params.funcs.clearResult = clearResult;
  params.funcs.reflectResults = reflectResults;
  params.funcs.departmentClick = departmentClick;
  params.funcs.back = back;
  params.funcs.toggleFullScreen = toggleFullScreen;
  params.funcs.locate=locate;

  var attrs = {
    EXPAND_SYMBOL: '\uf067',
    COLLAPSE_SYMBOL: '\uf068',
    selector: params.selector,
    root: params.data,
    width: params.chartWidth,
    height: params.chartHeight,
    index: 0,
    nodePadding: 9,
    collapseCircleRadius: 7,
    nodeHeight: 80,
    nodeWidth: 210,
    duration: 750,
    rootNodeTopMargin: 20,
    minMaxZoomProportions: [1, 1],
    linkLineSize: 180,
    collapsibleFontSize: '10px',
    userIcon: '\uf007',
    nodeStroke: "#ccc",
    nodeStrokeWidth: '1px'
  }

  var dynamic = {}
  dynamic.nodeImageWidth = attrs.nodeHeight * 100 / 140;
  dynamic.nodeImageHeight = attrs.nodeHeight - 2 * attrs.nodePadding;
  dynamic.nodeTextLeftMargin = attrs.nodePadding * 2 + dynamic.nodeImageWidth
  dynamic.rootNodeLeftMargin = attrs.width / 2;
 ...