I want to be able to create a dynamic threat map to display the cyber attacks. I'm able to create the map and display all the co-ordinates directly but how do I achieve it dynamically ?

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="datamaps.world.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<div id="container" style="position: relative; width: 100%; height:100%;"></div>
<script>

  var cyber = new Datamap({
    scope: 'world',
    element: document.getElementById('container'),
    projection: 'mercator',
    fills: {
        defaultFill: '#000000',
        HIGH: '#3288BD',
        LOW: '#D53E4F'
  },
 arcConfig: {
  strokeColor: '#DD1C77',
  strokeWidth: 1,
  arcSharpness: 2,
  animationSpeed: 2000
}
  });


  var latLong = [{'origin': {'latitude': -33.462500000000006, 'longitude': -70.6682}, 'destination': {'latitude': 30.0771, 'longitude': 31.285899999999998}}, {'origin': {'latitude': 41.12710000000001, 'longitude': -73.4416}, 'destination': {'latitude': 30.293599999999998, 'longitude': 120.16140000000001}}]

  cyber.arc( latLong, {strokeWidth: 1})


</script>

1. How to dynamically fetch from file containing the json data
2. Which service to use for dynamic plotting the arcs on the map
3. Should I use socket.io for real time programming in order to enter the data into the database simultaneously ?

I'm trying to achieve something like this : https://threatmap.checkpoint.com/ThreatPortal/livemap.html

Any help appreciated. Thank you!