D3 Learn Enter Exit Merge V2 D3 V4

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <title>Chandrakant Bharatkumar Thakkar</title>
    <style>
        .circle {
            fill: orange;
            stroke: #ccc;
            stroke-width: 2px;
        }

.line {
            fill: none;
            stroke: orange;
            stroke-width: 2px;
        }
    </style>
</head>

</svg>
        <input type="button" style="display:none;" value='Reset' onclick="resetCircle()" />
    </div>
    <a href="https://stackoverflow.com/users/7430694/chandrakant-thakkar" style="position: absolute;top: 87%;left: 77%;" target="_blank">
        <img src="https://stackoverflow.com/users/flair/7430694.png" width="208" height="58" alt="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
        </a>
    <script src="./jquery-latest.min.js"></script>
    <script src="./d3.v4.min.js"></script>
    <script src="./data.js"></script>
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");

const lineData = ["jan", "feb", "mar", "apr", "may", "jun"];

const margin = { top: 10, left: 50, bottom: 20, right: 10 };
        width = width - (margin.left + margin.right);
        height = height - (margin.top + margin.bottom);
        const xScale = d3.scalePoint().domain(lineData).range([0, width]);
        const yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]);

const mainG = svg.append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + (yScale(0) + margin.top) + ")")
            .call(d3.axisBottom(xScale));

svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .call(d3.axisLeft(yScale));

console.log("preparedDataOfLine:", linePoints);
        const curveType = "curveMonotoneX";
        const curve = curveType && typeof d3[curveType] === "function" ? d3[curveType] : d3["curveLinear"];
        const line = d3.line()
            .curve(curve)
            .x(d => xScale(d.x))
            .y(d => yScale(d.y));

const lines = mainG.selectAll(".line")
            .data(linePoints);

lines.enter()
            .append("path")
            .attr("class", "line")
            .datum(d => d)
            .attr("d", line);

const count = Math.round(Math.random() * 20);
        const bubblePosition = [];
        for (i = 0; i < count; i++) {
            let x = Math.round(Math.random() * width);
            x = x > width - 10 ? width - 10 : x;

let y = Math.round(Math.random() * height);
            y = y > (height - margin.bottom - 10) - 10 ? (height - margin.bottom - 10) - 10 : y;

bubblePosition.push({
                x: x,
                y: y
            })
        }

const circles = mainG
            .selectAll(".circle")
            .data(bubblePosition);

circles.enter()
            .append("circle")
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
            .attr("class", "circle")
            .attr("r", 10);

function resetCircle() {

d3.selectAll(".circle").nodes().forEach(d => {
                let x = Math.round(Math.random() * width);
                x = x > width - 10 ? width - 10 : x;

let y = Math.round(Math.random() * height);
                y = y > (height - margin.bottom - 10) - 10 ? (height - margin.bottom - 10) - 10 : y;
                d3.select(d).transition()
                    .duration(1000)
                    .attr("cx", x)
                    .attr("cy", y);
            });

const count = Math.round(Math.random() * 20);
            const bubblePosition = [];
            for (i = 0; i < count; i++) {
                let x = Math.round(Math.random() * width);
                x = x > width - 10 ? width - 10 : x;

let y = Math.round(Math.random() * height);
                y = y > (height - margin.bottom - 10) - 10 ? (height - margin.bottom - 10) - 10 : y;

bubblePosition.push({
                    x: x,
                    y: y
                });
            }

const circles = mainG
                .selectAll(".circle")
                .data(bubblePosition);

circles.exit().remove();

const newCircles = circles.enter()
                .append("circle")
                .attr("class", "circle")
                .attr("r", 10)
                .attr("cx", d => Math.random() * 700)
                .attr("cy", d => Math.random() * 400)
                .merge(circles)
                .transition()
                .duration(1000)
                .attr("cx", d => d.x)
                .attr("cy", d => d.y);

console.log("preparedDataOfLine:", linePoints);

const lines = mainG.selectAll(".line")
                .data(linePoints);

lines.exit().remove();

const newLines = lines.enter().append("path")
                .attr("class", "line")
                .merge(lines)
                .datum(d => d)
                .transition()
                .duration(1000)
                .attr("d", line);

}

setInterval(function () {
            resetCircle();
        }, 1000)
    </script>