D3 - Is There Any Possibilities Of Adding Brush Event To Difference Chart?

This is the chart I'm trying out. I want to add the brush event and zoom-in and zoom-out like we have in this chart. Here's the code which I'm still trying to plot a brush event. T

Solution 1:

Here is the FIDDLE. And here is the key code piece:

function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.select("#clip-below>path").attr("d", area.y0(height));
    focus.select("#clip-above>path").attr("d", area.y0(0));
    focus.select(".area.above").attr("d", area.y0(function(d) { return y(d["San Francisco"]); }));
    focus.select(".area.below").attr("d", area);    
    focus.select("path.line").attr("d", line(data));
    focus.select(".x.axis").call(xAxis);
}