Resizable D3 charts using bootstrap layout

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div style="padding: 0 15px 0 15px;">
    <div class="row">
        <div class="left col-sm-2">Left</div>
        <div class="center col-sm-8"></div>
        <div class="right col-sm-2">Right</div>
    </div>
</div>

CSS

body {   background-color: black; }
div.row {
    color: white;
}
div.left {
    background-color:grey;
}
div.center {
    background-color:white; 
}
div.right {
    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},{x:16,y:10}
    ];
    
    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.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 resize = function(width, height){
        var plotHeight = height - 100;
        var plotWidth = width - 100;
    
        // Set the scale ranges
        xScale.rangeRound([0, plotWidth]);
       ...