SVG resize to containe

_.md

[ Launch: SVG resize to containe ] 5052807 by biovisualize
[ Launch Inlet ]
Gist #3200444

config.json

{"description":"SVG resize to containe","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"hidepanel":true}

inlet.js

var w = 543;
var h = 300;

var div = d3.select("#display").append('div').style({background: 'aliceblue', width: w + 'px', height: h + 'px'});

var svg = div.append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
	.attr("viewBox", "0, 0, " + 50 +", " + 50);
svg.selectAll('circle')
    .data([
      {x: 0, y: 0},
      {x: 10, y: 10},
      {x: 20, y: 20},
      {x: 30, y: 30},
      {x: 40, y: 40},
      {x: 50, y: 50}
    ])
	.enter().append("circle")
    .attr("cx", function(d, i){return d.x;})
    .attr("cy", function(d, i){return d.y;})
    .attr("r", 2)
    .attr("fill", "aliceblue")
    .attr("stroke", "dodgerblue");