Resizable D3 svg

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="wrapper">
    <div id="center"></div>
</div>
<div id="left">left</div>
<div id="right">right</div>

CSS

body { margin:0; padding:0; min-width:500px; color:white; background-color:black;}

#wrapper{
    float: left;
    width: 100%;
}
#center{
    margin: 0 50px 0 50px;
    background-color: white;
}
#left{
    float: left;
    width: 50px;
    margin-left: -100%;
    background-color: grey;
}
#right{
    float: left;
    width: 50px;
    margin-left: -50px;
    background-color: grey;
}

.axis {
	shape-rendering: crispEdges;
	font: 10px sans-serif;
}
.axis path {
	fill: none;
    stroke: #ccc;
}
.y.axis line,
.y.axis path {
	fill: none;
	stroke: #ccc;
}
.x.axis line {
	stroke: #ccc;
	shape-rendering: crispEdges;
}
.x.axis .tick {
	stroke-opacity: .5;
}
path.line {
	fill: none;
	stroke: #444;
	stroke-width: 1px;
}
.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
}

JavaScript

$(function() {
    
    var data = [
            {x:1,y:10},{x:2,y:9},{x:3,y:7},{x:4,y:5},{x:5,y:5}, 
            {x:6,y:6},{x:7,y:7},{x:8,y:8},{x:9,y:9},{x:10,y:10},
            {x:11,y:3},{x:12,y:4},{x:13,y:4},{x:14,y:3},{x:15,y:2}
    ];
    
    var container = d3.select("#center").append("div");
    
    var xScale = d3.scale.linear();
    var yScale = d3.scale.linear();
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
    var yAxis = d3.svg.axis().scale(yScale).orient("right");
    
    // Adding the brush filter
    var brush = d3.svg.brush().x(xScale);
    
    // The line plot on the timeline
    var line = d3.svg.line()
        .x(function(d) { return xScale(d.x); })
        .y(function(d) { return yScale(d.y); });
    
    // Draw the chart
    xScale.domain(d3.extent(data, function(d){ return d.x; }));
    yScale.domain(d3.extent(data, function(d){ return d.y; }));
    
    var svg = container.selectAll("svg").data([data]);
    var svgEnter = svg.enter().append("svg");
    
    // Append a clip path that will hide any data points outside of the xExtent and yExtent
    svgEnter
        .attr("viewBox", "0 0 600 200")
        .attr("preserveAspectRatio", "xMinYMin");

    svgEnter.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect");
    
    // Build the chart (on data enter)
    var gEnter = svgEnter.append("g");
    
    // Append the X Axis
    gEnter.append("g")
        .attr("class", "x axis");
    
    // Append the line
    gEnter.append("path")
        .attr("class", "line")
        .attr("clip-path", "url(#clip)");
    
    // Append the Y Axis
    gEnter.append("g")
        .attr("class", "y axis");
    
    // Append the filter brush
    gEnter.append("g")
        .attr("class", "x brush")
       .call(brush)
        .selectAll("rect")
            .attr("y", -6);
    
    var height = 200;
    var width = 600;
    var plotHeight = height - 100;
    var plotWidth = width - 100;
    
    // Set the...