Adding data incrementally

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

//No CSS for this example 

    var randomSeed = 10; // this can be changed to generate different data sets
    function getRandomNumber() {
        var x = Math.sin(randomSeed++) * 10000;
        return x - Math.floor(x);
    }

    var nextNodeId = 0;
    var chart = null;

    function addData() {
        // limit the maximum number of nodes added.
        if (nextNodeId > 500)
            return;

        //let's make some DNA
        var colors = { "T": "#67B486", "A": "#F7CE40", "G": "#FF3D6D", "C": "#46D0F7" };
        var first = ["T", "A", "G", "C"][Math.floor(getRandomNumber() * 4)];
        var second = { "T": "A", "A": "T", "C": "G", "G": "C" }[first];

        var data = {
            nodes: [
                { id: nextNodeId, loaded: true, style: { label: first, fillColor: colors[first] } },
                { id: nextNodeId + 1, loaded: true, style: { label: second, fillColor: colors[second] } }
            ], links: [
                { id: nextNodeId, from: nextNodeId + 1, to: nextNodeId }
            ]
        };

        if (nextNodeId > 0) {
            data.links.push({ id: nextNodeId + "A", from: nextNodeId - 2, to: nextNodeId });
            data.links.push({ id: nextNodeId + "B", from: nextNodeId - 1, to: nextNodeId + 1 });
        }
        chart.addData(data);
        nextNodeId += 2;
    }

    chart = new NetChart({
        style: { node: { display: "text" } },
        container: document.getElementById("demo"),
        area: { height: null },
        interaction: {
            zooming: {
                autoZoomExtent: [0.01, 2],
                zoomExtent: [0.01, 2]
            }
        }
    });

    var intervalHandle = setInterval(addData, 400);


    function disposeDemo() {
        window.clearInterval(intervalHandle);
        disposeDemo = null;
        intervalHandle = null;
    }

//No separate data for this example