← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/d3/examples/rollup/rollup.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/d3/examples/rollup/rollup.html
1
 
<!DOCTYPE html>
2
 
<meta charset="utf-8">
3
 
<title>PivotGraph (Rollup) Layout</title>
4
 
<style>
5
 
 
6
 
body {
7
 
  font-family: sans-serif;
8
 
  font-size: 10px;
9
 
}
10
 
 
11
 
path {
12
 
  fill: none;
13
 
  stroke: #ccc;
14
 
}
15
 
 
16
 
circle {
17
 
  fill: #fff;
18
 
  stroke: steelblue;
19
 
}
20
 
 
21
 
</style>
22
 
<body>
23
 
<script src="../../d3.v2.js"></script>
24
 
<script>
25
 
 
26
 
var social = {
27
 
  nodes: [
28
 
    {gender: "M", group: 1},
29
 
    {gender: "F", group: 2},
30
 
    {gender: "M", group: 1},
31
 
    {gender: "M", group: 2},
32
 
    {gender: "F", group: 2},
33
 
    {gender: "M", group: 1},
34
 
    {gender: "F", group: 1},
35
 
    {gender: "M", group: 2},
36
 
    {gender: "F", group: 2},
37
 
    {gender: "F", group: 2}
38
 
  ],
39
 
  links: [
40
 
    {source: 0, target: 1},
41
 
    {source: 1, target: 2},
42
 
    {source: 2, target: 3},
43
 
    {source: 2, target: 4},
44
 
    {source: 2, target: 5},
45
 
    {source: 2, target: 6},
46
 
    {source: 2, target: 7},
47
 
    {source: 5, target: 6},
48
 
    {source: 6, target: 7},
49
 
    {source: 5, target: 8},
50
 
    {source: 8, target: 6},
51
 
    {source: 6, target: 9}
52
 
  ]
53
 
};
54
 
 
55
 
var width = 100,
56
 
    height = 100,
57
 
    margin = 30;
58
 
 
59
 
var x = d3.scale.ordinal()
60
 
    .domain(social.nodes.map(fx))
61
 
    .range([0, width]);
62
 
 
63
 
var y = d3.scale.ordinal()
64
 
    .domain(social.nodes.map(fy))
65
 
    .range([0, height]);
66
 
 
67
 
function fx(d) { return d.gender; }
68
 
function fy(d) { return d.group; }
69
 
 
70
 
var vis = d3.select("body").append("svg")
71
 
    .attr("width", width + 2 * margin)
72
 
    .attr("height", height + 2 * margin)
73
 
  .append("g")
74
 
    .attr("transform", "translate(" + [margin, margin] + ")");
75
 
 
76
 
var layout = rollup()
77
 
    .x(function(d) { return x(fx(d)); })
78
 
    .y(function(d) { return y(fy(d)); });
79
 
 
80
 
var g = layout(social);
81
 
 
82
 
vis.selectAll("path")
83
 
    .data(g.links)
84
 
  .enter().append("path")
85
 
    .style("stroke-width", function(d) { return d.value * 1.5; })
86
 
    .attr("d", function(d) {
87
 
      var tx = d.target.x,
88
 
          sx = d.source.x,
89
 
          ty = d.target.y,
90
 
          sy = d.source.y,
91
 
          dx = tx - sx,
92
 
          dy = ty - sy,
93
 
          dr = 2 * Math.sqrt(dx * dx + dy * dy);
94
 
      return "M" + sx + "," + sy + "A" + dr + "," + dr + " 0 0,1 " + tx + "," + ty;
95
 
    });
96
 
 
97
 
vis.selectAll("circle")
98
 
    .data(g.nodes)
99
 
  .enter().append("circle")
100
 
    .attr("r", function(d) { return Math.sqrt(d.nodes.length * 20); })
101
 
    .attr("cx", function(d) { return d.x; })
102
 
    .attr("cy", function(d) { return d.y; });
103
 
 
104
 
vis.selectAll("text.x")
105
 
    .data(x.domain())
106
 
  .enter().append("text")
107
 
    .attr("class", "x")
108
 
    .attr("x", x)
109
 
    .attr("y", -10)
110
 
    .attr("text-anchor", "middle")
111
 
    .text(String);
112
 
 
113
 
vis.selectAll("text.y")
114
 
    .data(y.domain())
115
 
  .enter().append("text")
116
 
    .attr("class", "y")
117
 
    .attr("x", -10)
118
 
    .attr("dy", ".3em")
119
 
    .attr("y", y)
120
 
    .attr("text-anchor", "end")
121
 
    .text(String);
122
 
 
123
 
function rollup() {
124
 
  var directed = true,
125
 
      x_ = rollupX,
126
 
      y_ = rollupY,
127
 
      nodes_ = rollupNodes,
128
 
      links_ = rollupLinks,
129
 
      linkValue = rollupLinkValue,
130
 
      linkSource = rollupLinkSource,
131
 
      linkTarget = rollupLinkTarget;
132
 
 
133
 
  function rollup(d, i) {
134
 
    var nodes = nodes_.call(this, d, i),
135
 
        links = links_.call(this, d, i),
136
 
        n = nodes.length,
137
 
        m = links.length,
138
 
        i = -1,
139
 
        x = [],
140
 
        y = [],
141
 
        rnindex = 0,
142
 
        rnodes = {},
143
 
        rlinks = {};
144
 
 
145
 
    // Compute rollup nodes.
146
 
    while (++i < n) {
147
 
      (d = nodes[i]).index = i;
148
 
      x[i] = x_.call(this, d, i);
149
 
      y[i] = y_.call(this, d, i);
150
 
      var nodeId = id(i),
151
 
          rn = rnodes[nodeId];
152
 
      if (!rn) {
153
 
        rn = rnodes[nodeId] = {
154
 
          index: rnindex++,
155
 
          x: x[i],
156
 
          y: y[i],
157
 
          nodes: []
158
 
        };
159
 
      }
160
 
      rn.nodes.push(d);
161
 
    }
162
 
 
163
 
    // Compute rollup links.
164
 
    i = -1; while (++i < m) {
165
 
      var value = linkValue.call(this, d = links[i], i),
166
 
          source = linkSource.call(this, d, i),
167
 
          target = linkTarget.call(this, d, i),
168
 
          rsource = rnodes[id(typeof source === "number" ? source : source.index)],
169
 
          rtarget = rnodes[id(typeof target === "number" ? target : target.index)],
170
 
          linkId = !directed && rsource.index > rtarget.index
171
 
              ? rtarget.index + "," + rsource.index
172
 
              : rsource.index + "," + rtarget.index,
173
 
          rl = rlinks[linkId];
174
 
      if (!rl) {
175
 
        rl = rlinks[linkId] = {
176
 
          source: rsource,
177
 
          target: rtarget,
178
 
          value: 0,
179
 
          links: []
180
 
        };
181
 
      }
182
 
      rl.links.push(links[i]);
183
 
      rl.value += value;
184
 
    }
185
 
 
186
 
    return {
187
 
      nodes: d3.values(rnodes),
188
 
      links: d3.values(rlinks)
189
 
    };
190
 
 
191
 
    function id(i) {
192
 
      return x[i] + "," + y[i];
193
 
    }
194
 
  }
195
 
 
196
 
  rollup.x = function(x) {
197
 
    if (!arguments.length) return x_;
198
 
    x_ = x;
199
 
    return rollup;
200
 
  };
201
 
 
202
 
  rollup.y = function(x) {
203
 
    if (!arguments.length) return y_;
204
 
    y_ = x;
205
 
    return rollup;
206
 
  };
207
 
 
208
 
  rollup.nodes = function(x) {
209
 
    if (!arguments.length) return nodes_;
210
 
    nodes_ = x;
211
 
    return rollup;
212
 
  };
213
 
 
214
 
  rollup.links = function(x) {
215
 
    if (!arguments.length) return links_;
216
 
    links_ = x;
217
 
    return rollup;
218
 
  };
219
 
 
220
 
  rollup.linkSource = function(x) {
221
 
    if (!arguments.length) return linkSource;
222
 
    linkSource = x;
223
 
    return rollup;
224
 
  };
225
 
 
226
 
  rollup.linkTarget = function(x) {
227
 
    if (!arguments.length) return linkTarget;
228
 
    linkTarget = x;
229
 
    return rollup;
230
 
  };
231
 
 
232
 
  rollup.linkValue = function(x) {
233
 
    if (!arguments.length) return linkValue;
234
 
    linkValue = x;
235
 
    return rollup;
236
 
  };
237
 
 
238
 
  rollup.directed = function(x) {
239
 
    if (!arguments.length) return directed;
240
 
    directed = x;
241
 
    return rollup;
242
 
  };
243
 
 
244
 
  return rollup;
245
 
 
246
 
  function rollupX(d) { return d.x; }
247
 
  function rollupY(d) { return d.y; }
248
 
  function rollupNodes(d) { return d.nodes; }
249
 
  function rollupLinks(d) { return d.links; }
250
 
  function rollupLinkValue(d) { return 1; }
251
 
  function rollupLinkSource(d) { return d.source; }
252
 
  function rollupLinkTarget(d) { return d.target; }
253
 
}
254
 
 
255
 
</script>