Accepted answer

You basically can have a code similar to the below one if I understood your need correctly :

var dataFileUrl = "url-to-your.json";          // assign the url to a variable
var canvas ="#map")                 // get a ref from the SVG element
                  .append("svg")               // you might want to define it only one time
                      .attr("width", 500)
                      .attr("height", 500)
                      .attr("id", "Threat");

var updateInterval = setInterval(function(){  
    d3.json(dataFileUrl , function (jsonData) { // AJAX call
        drawThreat(jsonData);                   // calls main function
},5000);                                        // every 5 * 1000ms 

function drawThreat (jsonData){ 
    canvas.selectAll('text.threat').remove();  // makes sure we don't have old icons
        .data(jsonData)                        // for each set in json
                .append('text')                // create a text and append it to svg canvas
                .attr("class", "threat")       // with class of threat
                .attr("x", function (d) {  return d[0]; })  // first element of each set
                .attr("y", function (d) {  return d[1]; })  // second element of each set


to reduce js codes I suggest adding styles and attributes using CSS:


You can also see it in action here :

Hope it helps you to get the point.

Related Query