Resizable D3 charts in table layout

by Ryan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="outer">
    <div class="left">Left</div>
    <div class="center"></div>
    <div class="right">Right</div>
</div>

CSS

body {   background-color: black; }
div.outer {
    display:table;
    width:100%;
    color: white;
}
div.left {
    background-color:grey;
    display:table-cell;
    width:50px;
    min-width:50px;
}
div.center {
    background-color:white; 
    display:table-cell;
    width:auto;
    min-width:250px;
}
div.right {
    background-color:grey;
    display:table-cell;
    width:50px;
    min-width:50px;
}

.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.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]);
       ...