Database Reference
In-Depth Information
110
100
90
80
70
60
50
40
30
20
10
0
12 PM
12:15
12:30
12:45
01 PM
01:15
01:30
01:45
02 PM
02:15
02:30
02:45
03 PM
Tue 15
03 AM
06 AM
09 AM
12 PM
03 PM
06 PM
09 PM
Fig. 5.5
A focus+context interface with brushing and linking
Listing 5.5
Extending trend lines with brushing and focus+context
window.onload = function() {
// Step 1: Initialize the chart
trendline.initialize();
// Step 2: Fetch data using AJAX
...
//Step 3: Initialize the focus handlers
trendline.focus.append(
"path"
).datum(data).attr(
"clip-
path"
,
"url(#clip)"
).attr(
"d"
, trendline.area);
trendline.focus.append(
"g"
).attr(
"class"
,
"x axis"
).
attr(
"transform"
,
"translate(0,"
+ trendline.
height +
")"
) .call(trendline.xAxis);
trendline.focus.append(
"g"
).attr(
"class"
,
"y axis"
).
call(trendline.yAxis).append(
"text"
).attr(
"class"
,
"ylabel"
).attr(
"text-anchor"
,
"end"
).attr(
"y"
,
-40).attr(
"dy"
,
".75em"
).attr(
"transform"
,
"rotate
(-90)"
).text(
"Number of Tweets"
);
//Step 4: Context is initialized to series 2
trendline.context.append(
"path"
).datum(data).attr(
"d"
,
trendline.area2);
trendline.context.append(
"g"
).attr(
"class"
,
"x axis"
).
attr(
"transform"
,
"translate(0,"
+ trendline.
height2 +
")"
).call(trendline.xAxis2);
// Step 5: Select the brushed region and focus on it
trendline.context.append(
"g"
).attr(
"class"
,
"x brush"
).call(trendline.brush).selectAll(
"rect"
).
attr(
"y"
, -6).attr(
"height"
, trendline.height2 +
7);
}
Source: TwitterDataAnalytics/js/trendLine.js
