Radio_buttons

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="400" height="350"></svg>
<button id="total_amt">
  filtered data
</button>
<button id="full_data">
  full data
</button>

<div id="map"></div>
<div id="legend">
  <h3>Filter</h3>
  <div class="input-group" id="filters">
    <label>
      <input type="radio" name="filter" value="all" checked="checked"> All</label>
    <br />
    <label>
      <input type="radio" name="filter" value="Agent"> type=Agent</label>
    <br />
    <label>
      <input type="radio" name="filter" value="Customer"> type=Customer</label>
    <br />
    <label>
      <input type="radio" name="filter" value="Phone"> type=Phone</label>
    <br />

    <label>
      <input type="radio" name="filter" value="ID_Card"> type=ID_Card</label>
    <br />
  </div>
</div>

JavaScript

var myBtn = document.getElementById("total_amt");
var fullBtn = document.getElementById("full_data");
var IDData = JSON.stringify([
  ["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264, "1374903"],
  ["node/1061", "node/21373542", "Agent", "Customer", "530848.0", 1, 3000, "529502"],
  ["node/10750", "node/59648369", "Agent", "Customer", "1454228.0", 1, 120, "1454118"],
  ["node/10750", "node/78569210", "Agent", "Customer", "1425251.0", 1, 234, "1421416"],
  ["node/10750", "node/96726118", "Agent", "Customer", "1376239.0", 1, 434, "1376152"],
  ["node/10946829", "node/11190", "Customer", "Agent", "1409620.0", 20, 3380, "1406665"],
  ["node/10946829", "node/57774036", "Customer", "Customer", "1460029.0", 3, 960, "1459731"],
  ["node/109947", "node/97911872", "Agent", "Customer", "1323025.0", 1, 600, "1315582"],
  ["node/11190", "node/10946829", "Agent", "Customer", "1552232.0", 1, 60, "1528755"],
  ["node/11190", "node/21373542", "Agent", "Customer", "1445487.0", 4, 1694, "1432479"],
  ["node/11190", "node/21530982", "Agent", "Customer", "1396526.0", 4, 5428, "1396517"],
  ["node/11190", "node/50917084", "Agent", "Customer", "568394.0", 1, 110, "568380"],
  ["node/11190", "node/9837102", "Agent", "Customer", "1485679.0", 1, 100, "1464486"],
  ["node/113120", "node/41382986", "Agent", "Customer", "1327541.0", 1, 115, "1327526"],
  ["node/11736", "node/109816283", "Agent", "Customer", "541087.0", 1, 300, "504903"],
  ["node/11852", "node/84188871", "Agent", "Customer", "1466956.0", 1, 220, "1465660"],
  ["node/13957774", "node/122260", "Customer", "Agent", "1311469.0", 1, 600, "1309915"],
  ["node/13957774", "node/3364", "Customer", "Agent", "1523266.0", 1, 705, "1523171"],
  ["node/13957774", "node/34496", "Customer", "Agent", "1415445.0", 1, 110, "1413649"],
  ["node/13957774", "node/38180995", "Customer", "Customer", "1309063.0", 1, 981, "1305686"],
  ["node/13957774", "node/50706", "Customer", "Agent", "1507302.0", 1, 100, "1507279"],
 ...