D3.js cant get multilines while the brushing is working graph

Question

I've tried out some examples to get the multiline chart with brush and zoom working. But stuck at one part at the end. Only one line is being drawn. Can some one help? This is the link i followed http://bl.ocks.org/mbostock/1667367:

And here is my jsfiddle this link Fiddle

var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;

var parseDate = d3.time.format("%d-%b-%Y").parse;
var formatTime = d3.time.format("%e %B");

var x = d3.time.scale().range([0, width]);
var x2 = d3.time.scale().range([0, width]);

var y = d3.scale.linear().range([height, 0]);
var y2 = d3.scale.linear().range([height2, 0]);

var color = d3.scale.category10();

var div = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

var xAxis = d3.svg.axis().scale(x).orient("bottom");
var xAxis2 = d3.svg.axis().scale(x2).orient("bottom");

var yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush().x(x2).on("brush", brushed);

var val = [{"date":"15-Jul-2013","close":"1.50","sharp":"2.50","sortino":"3.66"},
       {"date":"20-Jul-2013","close":"2.50","sharp":"2.55","sortino":"3.72"},
       {"date":"31-Jul-2013","close":"3.50","sharp":"2.57","sortino":"3.75"},
       {"date":"01-Aug-2013","close":"3.30","sharp":"2.71","sortino":"3.97"},
       {"date":"02-Aug-2013","close":"4.50","sharp":"2.75","sortino":"4.01"},
       {"date":"05-Aug-2013","close":"3.60","sharp":"2.75","sortino":"4.00"},
       {"date":"06-Aug-2013","close":"1.30","sharp":"2.65","sortino":"3.87"},
       {"date":"09-Aug-2013","close":"2.20","sharp":"2.59","sortino":"3.81"},
       {"date":"10-Aug-2013","close":"2.70","sharp":"2.64","sortino":"3.87"},
       {"date":"21-Aug-2013","close":"2.50","sharp":"2.60","sortino":"3.82"},
       {"date":"26-Aug-2013","close":"3.20","sharp":"2.62","sortino":"3.84"},
       {"date":"24-Aug-2013","close":"4.10","sharp":"2.66","sortino":"3.89"},
       {"date":"28-Aug-2013","close":"2.50","sharp":"2.60","sortino":"3.82"}];

var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });

var line2 = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x2(d.date); })
.y(function(d) { return y2(d.temperature); });

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);

svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);

var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

var filter = ['close','sortino','sharp'];

d3.tsv("data.tsv", function(error, data) {
data = val;
 color.domain(d3.keys(data[0]).filter(function(key) { if(filter.indexOf(key)!=-1)return key; }));

data.forEach(function(d) {
//alert(d);
d.date = parseDate(d.date);
});

var today = new Date() ;
today.setDate(today.getDate() - 5);

//alert(today);
var xs =5;
window.cities = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
        //alert(valueOf(today));
        return {date: d.date, temperature: +d[name]};
  })
};
});

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature;         }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature;  }); })
]);

x2.domain(x.domain());
y2.domain(y.domain());




focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

focus.append("g")
.attr("class", "y axis")
.call(yAxis);

focus.append("path")
.data(cities)
.attr("clip-path", "url(#clip)")
.transition()
.duration(2000)
.ease('linear')
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });

context.append("path")
.data(cities)
.transition()
.duration(2000)
.ease('linear')
.attr("class", "line")
.attr("d", function(d) { return line2(d.values); })
.style("stroke", function(d) { return color(d.name); });

context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);

context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);


});
function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select("path").attr("d", line);
  focus.select(".x.axis").call(xAxis);
}