Graphics Reference
In-Depth Information
1. Determine the range.
2. Define a scale.
3. Use the scale when creating the visual attribute.
For example, for the nodes, you can use a JavaScript loop to calculate the
minimum and maximum values of the data to establish the range of the raw
data first, as shown here:
// 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);
}
You then set up a size scale and color scale, as shown here:
// set up a size scale and a color scale
var nodesize = d3.scale.sqrt()
.domain([minEmail,maxEmail])
.range([2,15]);
var nodecolor = d3.scale.linear()
.domain([minRecent,maxRecent])
.range(["yellow","red"]);
Here, D3 scales are defined using
d3.scale
, followed by the mapping
function. D3 provides some built-in mappings, such as square root (useful
for mapping data to sizes of things) and linear (useful for most other cases).
Then, you specify the domain and range, each as a list of values. Because
you have the
min
and
max
values, you use these in the list to identify the
domain. Then, in the range, you provide the values for the
min
and the
max
in the visualization. D3 will interpolate between the values provided. For
