Graphics Reference
In-Depth Information
node.append("title")
.text(function(d) { return d.name + "\n # email: " +
d.numEmail; });
The text in the
title
object is set to a function that returns a string
containing the node name and also the number of e-mails. The
\n
is a
newline character that puts the number of e-mails on a second line in the
tooltip.
Adding Explanations
Adding explanations to D3 visualizations is easy. The entire capabilities
of HTML are available. You can add an HTML heading and paragraph to
explainwhattheviewerisseeing(forexample,colorsandsizes)andperhaps
an interesting observation or two. Following is an example of how to do this:
<body>
<h1> A graph of emails </h1>
<p> Nodes show idividual people sending emails. Size
is proportional to
the number of emails sent, color is related to recency
(most recent
senders are yellow, older are red). Note how the lower
right is a
group of senders that are fairly thin links and fairly
old. Point
at any node for details.</p>
Figure 8-12
shows the page with the explanations.
