document.addEventListener("DOMContentLoaded", function () {
    svg = d3.select("svg")
        .attr("width", 2000)
        .attr("height", 2000);
    let w = parseFloat(svg.style('width'));
    let h = parseFloat(svg.style('height'));
    let r = d3.min([w, h]) * 0.1


    const getEntry = () => {
        return {
            "x": d3.randomUniform(w)(),
            "y": d3.randomUniform(h)(),
            "r": d3.randomUniform(r)(),
            "color": getRandColor()
        }
    }

    let data = [];
    for (let i = 0; i < 10; i++) {
        data.push(getEntry());
    }

    svg.selectAll(".dot").data(data)
        .enter()
        .append("circle")
        .attr("r", d => d.r)
        .attr("cx", d => d.x)
        .attr("cy", d => d.y)
        .style("fill", d => d.color)
        .attr("opacity", 1)
        .transition()
        .duration(2000)
        .ease(d3.easeLinear)
        .attr("r", d => d.r * 3)
        .attr("opacity", 0)
        .on("end",() => {
            svg.attr("style", `background :${getRandColor()}`);
        });

})

const getRandColor = () => {
    return `rgb(${d3.randomInt(255)()},${d3.randomInt(255)()},${d3.randomInt(255)()})`
}