JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<head lang="en">
    
    <title></title>
</head>
<body>

</body>

JavaScript

createNewPage();
function drawChart(newWindowRoot){
    var sampleSVG = newWindowRoot;
    sampleSVG
        .append("button")
        .text("hi")
        .attr("width", 100)
        .attr("height", 100);

    sampleSVG.append('svg')
    		.attr('width', 500)
        .attr('height', 500)
    		.append("circle")
        .style("stroke", "gray")
        .style("fill", "red")
        .attr("r", 200)
        .attr("cx", 250)
        .attr("cy", 250)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});
}
function createNewPage(){

    var button = d3.select("body").append("button")
            .attr("class", "button")
            .attr("id", "myButton")
            .text("Visualize");

    document.getElementById("myButton").onclick = function () {

        var newWindow = window.open('');
        newWindowRoot = d3.select(newWindow.document.body)
            .attr("width","1060px")
            .attr("margin","50px auto");

        drawChart(newWindowRoot);

    }

}