Graphics Reference
In-Depth Information
available in the Supplementary Materials on this topic's companion
website). Note that the data is now in a separate file, simply referenced in its
own script object.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<h1> A graph of emails </h1>
<p> Nodes show individual 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 clusters
are visually
distinct. Point at any node for details.</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="familyEmail.js"></script>
<script>
// calculate min/max values
var minEmail = 0, maxEmail = 0,
minRecent = 0, maxRecent = 0;
for (var i = 0; i < graph.nodes.length; i++) {
var minEmail = Math.min(minEmail,
graph.nodes[i].numEmail);
var maxEmail = Math.max(maxEmail,
graph.nodes[i].numEmail);
var minRecent = Math.min(minRecent,
graph.nodes[i].recency);
var maxRecent = Math.max(maxRecent,
graph.nodes[i].recency);
}
// set up a size scale and a color scale
var nodesize = d3.scale.sqrt()
.domain([minEmail,maxEmail])
.range([2,15]);
