d3 viewBox

by parente

HTML

<div id="container"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

CSS

#container {
    margin: 20px;
}

JavaScript

$.post('/gh/gist/response.json/6289168/').done(function (data) {
    console.log(data);
    var width = 960,
        height = 500;
    var svg = d3.select('#container')
        .append('svg');
    svg.attr('width', "960")
        .attr('height', "500")
        .attr('viewBox', '0 0 960 500')
        .attr('preserveAspectRatio', 'xMidYMid');
    svg.append('path')
        .attr('d', data.path);

    var aspect = width / height;
    var resize = function () {
        var targetWidth = d3.select('#container').node().offsetWidth;
        //console.log(targetWidth, Math.round(targetWidth / aspect));
        svg.attr("width", targetWidth);
        svg.attr("height", Math.round(targetWidth / aspect));
    };
    d3.select(window).on("resize", resize);
    resize();
}).fail(function (xhr, text, err) {
    console.log(arguments);
});