On button click open a new window and draw a large

Question

This question has been answered before here: On button click open a new window and draw a circle with D3

But in the solution given by meetamit:
http://jsfiddle.net/aj3g5tqg/3/

createNewPage();
function drawChart(newWindowRoot){
    var sampleSVG = newWindowRoot;
    sampleSVG
        .append("button")
        .text("hi")
        .attr("width", 100)
        .attr("height", 100);
    sampleSVG.append('svg').append("circle")
        .style("stroke", "gray")
        .style("fill", "red")
        .attr("r", 200)
        .attr("cx", 100)
        .attr("cy", 100)
        .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);
    }
}

I am not able to expand the grid size to draw a large circle, say of radius 200. I tried changing the width attribute of 'd3.select(newWindow.document.body)' but that had no effect.
How to do that? Thanks in advance!

Answer 1

The svg element appended into the new window is not sized:

sampleSVG.append('svg')
    .attr('width', 500)
    .attr('height', 500) //<-- give the SVG some size
    .append("circle")
    .style("stroke", "gray")
    .style("fill", "red")
    .attr("r", 200)
    .attr("cx", 250)
    .attr("cy", 250)
    ...

Updated fiddle.