D3.js Template

HTML

<div id="filters">
  <h4>Filters</h4>
  <form id="form-filters">
    <label>
      <input type="checkbox" id="cbShowDevices" checked>
      Devices
    </label>

    &nbsp;&nbsp;

    <label>
      <input type="checkbox" id="cbShowParts" checked>
      Parts
    </label>
    
    &nbsp;&nbsp;
    
    <input type="submit" value="Apply Filter(s)" />
  </form>
</div>

<div id="svg-placeholder"></div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

svg {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.link {
  stroke: gray;
  opacity: 0.9;
  stroke-width: 1.5px;
}

.node circle {
  stroke: #fff;
  opacity: 0.9;
  stroke-width: 1.5px;
}

text {
  font: 8px helvetica;
  opacity: 0.9;
  pointer-events: none;
}

JavaScript

var dataSet = [
	{"name": "Giheung Facility", "type": "plant", "devices": [
  	{"name": "123456789012345", "type": "mobile device", "make": "Samsung", "model": "Galaxy Note 5", "IMEI": "123456789012345", "parts": [
    	{"name": "NAND chip", "type": "part"},
      {"name": "camera", "type": "part"},
      {"name": "speaker", "type": "part"}
    ]},
    {"name": "123456789012347", "type": "mobile device", "make": "Samsung", "model": "Galaxy Note 5", "IMEI": "123456789012347", "parts": [
    	{"name": "microphone", "type": "part"},
      {"name": "actuator", "type": "part"},
      {"name": "transistor", "type": "part"}
    ]}
  ]},
  {"name": "Shanghai Facility", "type": "plant", "devices": [
  	{"name": "223456789012345", "type": "mobile device", "make": "Apple", "model": "iPhone 7", "IMEI": "223456789012345", "parts": [
    	{"name": "Secure Enclave", "type": "part"},
      {"name": "liquid damage indicator", "type": "part"}
    ]},
    {"name": "323456789012345", "type": "mobile device", "make": "Apple", "model": "iPhone 7", "IMEI": "323456789012345", "parts": [
    	{"name": "LCD", "type": "part"},
      {"name": "digitizer", "type": "part"}
    ]}
  ]},
  {"name": "New Tapei Facility", "type": "plant", "devices": [
  	{"name": "423456789012346", "type": "mobile device", "make": "Apple", "model": "iPhone 7", "IMEI": "423456789012346", "parts": [
    	{"name": "toggle switch", "type": "part"},
      {"name": "home button", "type": "part"}
    ]}
  ]},
];

var form_filters = document.getElementById("form-filters");

form_filters.addEventListener("submit", function(evt) {
    evt.preventDefault();
    filter_onchange();
});

var nodes = [];
var links = [];
var edges = [];
var current_filters = {
	"show_devices": true,
  "show_parts": true
}

for (var key in dataSet) {
	var plant = dataSet[key];
  if (plant) {
  	plant.isFilteredOut = false;
  	nodes.push(plant);
    
    // handle devices for each plant
  	for (var mdkey in plant["devices"]) {
    	var device =...