New_fiddle

by Vishal Bhatt

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
  .links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }
  
  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  
  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  
  div.tooltip {
    position: absolute;
    background-color: white;
    max-width: 200px;
    height: auto;
    padding: 1px;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
  }

</style>
<svg id="Network_graph" width="800" height="700"></svg>


<label for="input ID">Depth</label>
<select id="select_ID" name="select_ID">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">5</option>
</select>
<button id="depth">
  filtered data
</button>

<button id="full_data">
  full data
</button>

<div id="map"></div>
<div id="legend">
  <h3>Filter</h3>
  <script>
    /*<div class="input-group" id="filters">*

  </script>

  <label>
    <input type="checkbox" name="checkb" value="Agent"> type=Agent</label>
  <br />
  <label>
    <input type="checkbox" name="checkb" value="Customer"> type=Customer</label>
  <br />
  <label>
    <input type="checkbox" name="checkb" value="Phone"> type=Phone</label>
  <br />
  <label>
    <input type="checkbox" name="checkb" value="ID_Card"> type=ID_Card</label>
  <br />

  <script>
    /*
      <input type=datetime id = "Start_Date" value="Start_Date">Start_Date
    <input type=datetime id ="End_Date" value = "End_Date">End_Date
    <button id = "date">
    Interval
    </button>
    */

  </script>

JavaScript

var myBtn = document.getElementById("depth");
var fullBtn = document.getElementById("full_data");

var IDData = JSON.stringify([
  ["2000000000264475252", "002478", "Customer", "ID_Card", "2016-01-05 05:18:30", "2016-01-05 06:11:04", 33.01599884033203, 3],
  ["1000000000036224319", "10000000085851", "Customer", "Agent", "2016-11-16 16:58:19", "2016-11-16 21:22:30", 149.05349731445312, 6],
  ["1000000000030334758", "2000000000298521121", "Customer", "Customer", "2016-06-30 08:56:30", "2016-07-01 05:48:54", 100, 5],
  ["1000000000030334758", "10000001912945", "Customer", "Agent", "2016-10-13 15:54:27", "2016-10-13 22:10:17", 100, 6],
  ["002478", "1000000000310282060", "ID_Card", "Customer", "2016-10-27 17:23:41", "2016-10-27 23:12:29", 298.70806884765625, 4],
  ["10000000727581", "1000000000310282060", "Agent", "Customer", "2016-10-27 17:23:41", "2016-10-27 23:12:29", 298.70806884765625, 5],
  ["9192415963", "1000000000310282060", "Phone", "Customer", "2016-10-27 17:23:41", "2016-10-27 23:12:29", 298.70806884765625, 5],
  ["10000000727581", "1000000000310282060", "Agent", "Customer", "2016-10-27 17:23:41", "2016-10-27 23:12:29", 298.70806884765625, 5],
  ["1000000000030334758", "2000000000298521121", "Customer", "Customer", "2016-06-30 08:56:30", "2016-07-01 05:48:54", 100, 5],
  ["1000000000030334758", "10000001912945", "Customer", "Agent", "2016-05-19 09:36:25", "2016-05-20 21:05:07", 90, 6],
  ["3000000000003358465", "002478", "Customer", "ID_Card", "2016-09-18 05:54:22", "2016-09-18 08:08:28", 28.069564819335938, 4],
  ["10000000000688", "2000000000085875682", "Agent", "Customer", "2016-09-30 08:08:08", "2016-09-30 11:42:14", 42.23735427856445, 6],
  ["9287478414", "2000000000298521121", "Phone", "Customer", "2016-06-30 08:56:30", "2016-07-01 05:48:54", 100, 5],
  ["10000000720648", "2000000000298521121", "Agent", "Customer", "2016-06-30 08:56:30", "2016-07-01 05:48:54", 100, 5],
  ["34118/TA", "1000000000313052681", "ID_Card", "Customer", "2016-01-05...