Date_fiddle

by Maria Karanasou

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: 400px;
    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 parseDate = d3.timeFormat("%d/%m/%Y").parse;

var IDData = JSON.stringify([
  ["C2", "ID2", "Customer", "ID_Card", "2014-12-30 12:45:46 ", "2015-1-1 15:00:00", 500.0, 2],
  ["C2", "ID2", "Customer", "ID_Card", "2015-1-2 13:44:45", "2015-1-3 16:45:32", 700.0, 2],
  ["C2", "C3", "Customer", "Customer", "2015-1-1 14:23:32", "2015-1-3 16:58: 43", 500.0, 2],
  ["C2", "C3", "Customer", "Customer", "2015-1-2 13:23:32", "2015-1-4 13:00:00", 600.0, 2],
  ["C6", "C1", "Customer", "Customer", "2015-1-5 11:17:21", "2015-1-7 19:43:43", 500.0, 1],
  ["C5", "ID4", "Customer", "ID_Card", "2015-1-8 7:45:43", "2015-1-10 9:00:00", 500.0, 2],
  ["C1", "ID1", "Customer", "ID_Card", "2015-1-6 19:44:43", "2015-1-8 11:10:47", 500.0, 1],
  ["C1", "P1", "Customer", "Phone", "2015-1-9 9:43:32", "2015-1-10 12:16:48", 500.0, 1],
  ["C6", "P2", "Customer", "Phone", "2015-1-13 13:45:56", "2015-1-15 14:47:23", 500.0, 2],
  ["C6", "P2", "Customer", "Phone", "2015-1-16 14:23:35", "2015-1-18 11:15:45", 800.0, 2],
  
  ["C2", "C6", "Customer", "Customer", "2015-1-10 12:44:43", "2015-1-11 13:32:45", 500.0, 1],
  ["C4", "C3", "Customer", "Customer", "2015-1-10 10:45:54", "2015-1-11 3:45:53", 500.0, 3],
  ["C1", "C2", "Customer", "Customer", '2015-1-7 6:55:32', "2015-1-8 7:43:32", 500.0, 1],
  ["C4", "ID3", "Customer", "ID_Card", "2015-1-6 8:47:12", "2015-1-7 9:10:45", 500.0, 3],
  ["C3", "ID3", "Customer", "ID_Card", "2015-1-3 9:23:33", "2015-1-4 8:32:30", 500.0, 3],
  ["C1", "C5", "Customer", "Customer", "2015-1-5 4:32:34", "2015-1-6 3:23:32", 500.0, 1]
]);

function createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth) {
  var node_set = [];
  var links = [];
  var nodetype = d3.set();
  startnodes.forEach(function(src, i) {
    var tgt = endnodes[i];
    if (!node_set.find(function(d) {
        return d.id == src
      })) {
      node_set.push({
      ...