D3.js focus + context via brushing - d3.js

Question

I'm trying to learn d3.js focus + context via brushing using Twitter Data Analysis. I'm trying to generate the time series plot from the data given, but it's not coming up as it should. I have created fiddle. Could someone please take a look at it, and give me a suggestion on how I can fix this?
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("%Y-%m-%d %I:%M:%S").parse;
var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.count); });
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x2(d.date); })
.y0(height2)
.y1(function(d) { return y2(d.count); });
var svg = d3.select(".trend-graph").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("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("/TwitterProject/slides/results.csv", type, function(error, data){
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.count; }))])
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class","y axis")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class","area")
.attr("d", area2);
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(".area").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
function type(d) {
d.date = parseDate(d.date);
d.count = +d.count;
return d;
}
JSFiddle
Also, the y-axis is showing up wrong. I think the problem is somewhere counting the "counts" per minute, but I couldn't figure out how to fix this.
The plot is supposed to look like this.
EDIT:
Changes I made:
var bins = {};
x.domain(d3.extent(data.map(function(d) { return d.date; })));
//y.domain([0, d3.max(data.map(function(d) { return d.count; }))]).
y.domain([0, bins]).range([height, 0]);
x2.domain(x.domain());
y2.domain(y.domain()).range([height2, 0]);
function type(d) {
d.date = parseDate(d.date);
d.count = +d.count;
var key = d.date.toDateString();
bins[key] = bins[key] || 0;
bins[key] += d.count;
console.log(bins);
return d;
}

Answer 1

Your data has a resolution of one second, so you're going to get a very noisy graph (in fact exactly what you're getting). You probably want to do some binning, where you aggregate the data to make it less noisy.
In principle, the code looks like this (to aggregate by the minute):
function type(d) {
d.date = parseDate(d.date);
d.count = +d.count;
d.date.setSeconds(0);
var key = df(d.date);
bins[key] = bins[key] || 0;
bins[key] += d.count;
return d;
}
and then inside d3.csv:
var binData = d3.entries(bins);
binData.forEach(function(d) { d.key = parseDate(d.key); });
binData.sort(function(a,b) { return b.key - a.key; });
There's a bit of additional cruft because Date objects don't play nice as associative array keys. Now you have elements with key (date) and value in binData, which you can use to create the graph.
Complete demo here.