Edit in JSFiddle 

jQuery(document).ready( function () {
    // SVG Size and Location
    var width = 500,
        height = 200,
        margin = {
            top : 30,
            bottom : 30,
            left : 50,
            right : 50
        };                
    
    // SVG DOM creation
    var mySvg = d3.select("body")
                  .append("svg")
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom);
    // root G creation
    var rootG = mySvg.append("g")
                     .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
                       
    // Max Data
    var xMax = 1000,
        yMax = 20;
        
    // Axis Size
    //   xHeight should be greater than margin.top so that X-Axis will appear
    //   yWidth should be greater thatn margin.right so that label of X-Axis will appear
    var axisMargin = { xHeight : 80, yWidth : 80 }; 
                       
    // D3 Scale creation
    //   use real data value array as a parameter of domain()
    //   use pixel value array as a parameter of range()
    //   if the Origin point of chart is located in the bottom,
    //   the range array needs to be changed accordingly,
    //   because the browser's Origin point is located in the top.
    var xScale = d3.scale.linear().domain([0, xMax]).range([0, width]),
        yScale = d3.scale.linear().domain([0, yMax]).range([height, 0]);
        
    // D3 X-Axis, Y-Axis creation
    //   note that typeof xAxis === "function" and typeof yAxis === "function",
    //   which means that svg.axis() returns function.
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom"),
        yAxis = d3.svg.axis().scale(yScale).orient("left");
        
    // X-Axis, Y-Axis DOM creation
    var gXAxis = rootG.append("g")
                      .attr("class", "axis")
                      .attr("transform", "translate(0," + (height) + ")")
                      .call(xAxis),
        gYAxis = rootG.append("g")
                      .attr("class", "axis")
                      .call(yAxis);

//// From here, 02. Add Points
    // Group of Point
    var pointG = rootG.append("g");
    
    // make new data
    function makeNewData() {
        var data = {
            id: randomString(),
            x: Math.random()*xMax,
            y: Math.random()*yMax
        };
        return data;
    }
    
    // draw a point(a circle here) to the chart
    function addPointToChart(data) {
        var r = 4;
        pointG.append("circle")
              .datum(data)
              .attr("cx", function (d) { return xScale(d.x); })
              .attr("cy", function (d) { return yScale(d.y); })
              .attr("r", r)
              .style("fill", randomColorString());
    }
    
    // get random String for id
    function randomString() {
        return Math.random().toString(36).slice(2);
    }

    // get random Color for fill-color
    function randomColorString() {
        return "#"+Math.floor(Math.random()*16777215).toString(16);
    }
    
    // Test Invoker for adding a point to chart
    $('#btnAdd1Point').click(function () {
        addPointToChart(makeNewData());
    });
});
<body>
    <div id='tester'>
        <button id='btnAdd1Point' type='button'>Add a Point</button>
    </div>
</body>
/* font inherited from svg */
svg {
    font: 12px sans-serif;
}


/* main line of axis */
.axis path {
    fill: none;
    stroke: darkgray;
    font: 10px;
}

/* tick line of axis */
.axis line {
    fill: none;
    stroke: #3355ff;		    
}

External resources loaded into this fiddle: