Brendan Sudol
November 2014

Responsive D3.js

The only thing better than a nice, interactive D3 widget is one that’s mobile friendly. There are a variety of ways (using Javascript / CSS) to achieve this responsiveness. Here’s the way I do it when I’m making a visualization (no jQuery required):

function responsivefy(svg) {
    // get container + svg aspect ratio
    var container =,
        width = parseInt("width")),
        height = parseInt("height")),
        aspect = width / height;

    // add viewBox and preserveAspectRatio properties,
    // and call resize so that svg resizes on inital page load
    svg.attr("viewBox", "0 0 " + width + " " + height)
        .attr("perserveAspectRatio", "xMinYMid")

    // to register multiple listeners for same event type, 
    // you need to add namespace, i.e., ''
    // necessary if you call invoke this function for multiple svgs
    // api docs:"resize." + container.attr("id"), resize);

    // get width of container and resize svg to fit it
    function resize() {
        var targetWidth = parseInt("width"));
        svg.attr("width", targetWidth);
        svg.attr("height", Math.round(targetWidth / aspect));

You can call this function when you add your SVG element to the page:"#viz").append("svg")
    .attr("width", 960)
    .attr("height", 500)

And for completeness, here’s a working example with a randomly updating donut chart — try shrinking your browser window to see it adapt :)