Database Reference
In-Depth Information
.attr(
"y"
,6)
.attr(
"dy"
,
".71em"
)
.style(
"text-anchor"
,
"end"
)
.text(
"# of Tweets"
);
// Step 2: Append the time series information for each word
var word = trendcomp.svg.selectAll(
".word"
)
.data(words)
.enter().append(
"g"
)
.attr(
"class"
,
"word"
);
word.append(
"path"
)
.attr(
"class"
,
"line"
)
.attr(
"d"
, function(d) { return trendcomp.line(d.
values); })
.style(
"stroke"
, function(d) { return trendcomp.color
(d.word); });
...
//Step 3: Add the legend to the chart
var legend = trendcomp.svg.selectAll(
".legend"
)
.data(trendcomp.color.domain().slice().reverse())
.enter().append(
"g"
)
.attr(
"class"
,
"legend"
)
.attr(
"transform"
, function(d, i) { return
"translate
(0,"
+i
*
20 +
")"
; });
...
}
Source: TwitterDataAnalytics/js/trendComparison.js
Listing 5.7
Creating sparklines to compare multiple time-series
GenerateSparkLines:function(data) {
//loop through the data and load sparkline for each word
for(key in data) {
$(
"#vizpanel"
).append(
this
.CreateTextElement(
key)).append(
this
.CreateSpanElement(key));
$(
"span[data='"
+key+
"']"
).sparkline(data[key]);
}
}
Source: TwitterDataAnalytics/js/sparkLine.js
5.2.2.1
Sparklines
Sparklines are simple and typically small graphics. They are a miniaturized version
of the full trend line designed to provide a quick overview of the variation in
a quantity over time. They are designed to be displayed along with the text
that describes them, so they are minimalistic. For example,
#nypd
is a sparkline for #nypd. Sparklines can be embedded in text as well as other
visualizations to summarize time-series information. Sparklines can be created
using the method
GenerateSparkLines
, which is summarized in Listing
5.7
.
Small multiples:
This refers to the concept of creating a series of mini charts
which can be used for quick comparison and summarization of information.
