javascript – Como modificar un SVG para hacerlo responsive

estoy usando esta rueda para una promoción. He logrado modificar ciertas cosas del código para que despliegue lo que necesito en términos de datos y la “vista Desktop”.
Pero tengo un problema que no estoy pudiendo solucionar que es como hacer que el SVG que se carga sea mas pequeño para mobile.
Modificar simplemente las medidas del DIV no funciona o quizás es porque está en una plataforma para hacer landing pages y es mucho de Drag and Drop y modifica los estilos globales.
Pero sacando eso de la ecuación, como podria modificar el SVG para que en mobile tuviera unas dimensiones de 200px x 200px.

<div id="chart"></div>

<div id="question">
  <a id="btnResult"></a>
</div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    var padding = { top: 20, right: 20, bottom: 20, left: 20 },
        w = 500 - padding.left - padding.right,
        h = 500 - padding.top - padding.bottom,
        r = Math.min(w, h) / 2,
        rotation = 0,
        oldrotation = 0,
        picked = 100000,
        oldpick = (),
        color = d3.scale.category20b();//category20c()
    //randomNumbers = getRandomNumbers();

    var data = (
            { "label": "30% off", "value": 1, "question": "You win 30% off", ref: "https://www.google.com" },
            { "label": "35% off", "value": 1, "question": "You win 35% off", ref: "https://www.google.com" },
            { "label": "40% off", "value": 1, "question": "You win 40% off", ref: "https://www.google.com" },
            { "label": "30% off", "value": 1, "question": "You win 30% off", ref: "https://www.google.com" },
            { "label": "35% off", "value": 1, "question": "You win 35% off", ref: "https://www.google.com" },
            { "label": "40% off", "value": 1, "question": "You win 40% off", ref: "https://www.google.com" },
            { "label": "30% off", "value": 1, "question": "You win 30% off", ref: "https://www.google.com" },
            { "label": "35% off", "value": 1, "question": "You win 35% off", ref: "https://www.google.com" },
            { "label": "40% off", "value": 1, "question": "You win 40% off", ref: "https://www.google.com" },
            { "label": "30% off", "value": 1, "question": "You win 30% off", ref: "https://www.google.com" }
        );

    var svg = d3.select('#chart')

        .append("svg")
        .data((data))
        .attr("width", w + padding.left + padding.right)
        .attr("height", h + padding.top + padding.bottom);

    var container = svg.append("g").attr("class", "chartholder").attr("transform", "translate(" + (w / 2 + padding.left) + "," + (h / 2 + padding.top) + ")");

    var vis = container.append("g");

    var pie = d3.layout.pie().sort(null).value(function (d) { return 1; });

    // declare an arc generator function
    var arc = d3.svg.arc().outerRadius(r);

    // select paths, use arc generator to draw
    var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
        .append("g")
        .attr("class", "slice");

    arcs.append("path")
        .attr("fill", function (d, i) { return color(i); })
        .attr("d", function (d) { return arc(d); });

    // add the text
    arcs.append("text").attr("transform", function (d) {
        d.innerRadius = 0;
        d.outerRadius = r;
        d.angle = (d.startAngle + d.endAngle) / 2;

        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 20) + ")";

    })
        .attr("text-anchor", "end")
        .text(function (d, i) {
            return data(i).label;
        });

    container.on("click", spin);


    // function clickEnElCirculo() {
    //     setTimeout(function () { 
    //         var userResult = document.getElementById('h1')
    //         var btn = document.getElementById('btnResult')
    //         btn.style.display = "block"
    //         btn.innerHTML = userResult.innerHTML
    //         console.log(userResult.innerHTML)
    //         }, 6000);
    //         console.log("Click en el circulo")
    //     }

    function spin(d) {

        // clickEnElCirculo()
        container.on("click", null);

        //all slices have been seen, all done
        console.log("OldPick: " + oldpick.length, "Data length: " + data.length);

        if (oldpick.length == data.length) {

            console.log("done");
            container.on("click", null);
            return;
        }

        var ps = 360 / data.length,
            pieslice = Math.round(1440 / data.length),
            rng = Math.floor((Math.random() * 1440) + 360);

        rotation = (Math.round(rng / ps) * ps);
        picked = Math.round(data.length - (rotation % 360) / ps);
        picked = picked >= data.length ? (picked % data.length) : picked;

        if (oldpick.indexOf(picked) !== -1) {
            d3.select(this).call(spin);
            return;

        } else {
            oldpick.push(picked);
        }

        rotation += 90 - Math.round(ps / 2);

        vis.transition()
            .duration(5000)
            .attrTween("transform", rotTween)
            .each("end", function () {

                //mark question as seen
                d3.select(".slice:nth-child(" + (picked + 1) + ") path")
                    .attr("fill", "#98278f");

                //populate question
                d3.select("#question a")
                    .attr({"href": data(picked).ref, "style": "text-decoration: none; background-color: blue; color: #ffffff; padding: 0.5em 1em; border-radius: 10px;"})
                    .text(data(picked).question);

                oldrotation = rotation;
            });
    }

    //make arrow

    svg.append("g")
        .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h / 2) + padding.top) + ")")
        .append("path")
        .attr("d", "M-" + (r * .15) + ",0L0," + (r * .05) + "L0,-" + (r * .05) + "Z")
        .style({ "fill": "#efefef" });

    //draw spin circle
    container.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 60).style({ "fill": "#98278f", "cursor": "pointer" });

    //spin text
    container.append("text").attr("x", 0).attr("y", 10).attr("text-anchor", "middle").text("SPIN NOW").style({ "font-weight": "bold", "font-size": "20px", "fill": "white", "cursor": "pointer" });

    function rotTween(to) {
        var i = d3.interpolate(oldrotation % 360, rotation);
        return function (t) {
            return "rotate(" + i(t) + ")";
        };
    }

    function getRandomNumbers() {

        var array = new Uint16Array(1000);
        var scale = d3.scale.linear().range((360, 1440)).domain((0, 100000));

        if (window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function") {
            window.crypto.getRandomValues(array);
            console.log("works");
        } else {

            //no support for crypto, get crappy random numbers
            for (var i = 0; i < 1000; i++) {
                array(i) = Math.floor(Math.random() * 100000) + 1;
                            }
           }
         return array;
     }

</script>