Blame view

datalets/datasetexplorer-datalet/js/buildtreemap.js 10.5 KB
ab77b03a   lucvic   Added datasetexpl...
1
2
3
4
  /**
   * Created by Utente on 17/07/2015.
   */
  
7d89b743   lucvic   Spinner + Word wrap
5
  function build(root, place_holder, select_listener) {
ab77b03a   lucvic   Added datasetexpl...
6
7
8
9
10
  
      var plwidth = $("#" + place_holder).width(),
          plheight = $("#" + place_holder).height();
  
      var margin = {top: 20, right: 0, bottom: 0, left: 0},
ab77b03a   lucvic   Added datasetexpl...
11
12
13
14
15
16
17
          width  = plwidth,
          height =  plheight - margin.top - margin.bottom,
          formatNumber = d3.format(",d"),
          transitioning;
  
      var x = d3.scale.linear()
          .domain([0, width])
7d89b743   lucvic   Spinner + Word wrap
18
          .domain([0, width])
ab77b03a   lucvic   Added datasetexpl...
19
20
21
22
23
24
25
26
27
28
29
30
          .range([0, width]);
  
      var y = d3.scale.linear()
          .domain([0, height])
          .range([0, height]);
  
      var treemap = d3.layout.treemap()
          .children(function(d, depth) { return depth ? null : d._children; })
          .sort(function(a, b) { return a.value - b.value; })
          .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
          .round(false);
  
7d89b743   lucvic   Spinner + Word wrap
31
32
      var svg = d3.select("#" + place_holder)
          .append("svg")
ab77b03a   lucvic   Added datasetexpl...
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.bottom + margin.top)
          .style("margin-left", -margin.left + "px")
          .style("margin.right", -margin.right + "px")
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .style("shape-rendering", "crispEdges");
  
      var grandparent = svg.append("g")
          .attr("class", "grandparent");
  
      var dataletContainer = null;
  
      grandparent.append("rect")
          .attr("y", -margin.top)
          .attr("width", width)
          .attr("height", margin.top);
  
      grandparent.append("text")
          .attr("x", 6)
          .attr("y", 6 - margin.top)
          .attr("dy", ".75em");
  
      //d3.json
      initialize(root);
      accumulate(root);
      layout(root);
      display(root);
  
ab77b03a   lucvic   Added datasetexpl...
62
63
64
65
66
67
68
69
70
71
72
73
74
      function initialize(root) {
          root.x = root.y = 0;
          root.dx = width;
          root.dy = height;
          root.depth = 0;
      }
  
      // Aggregate the values for internal nodes. This is normally done by the
      // treemap layout, but not here because of our custom implementation.
      // We also take a snapshot of the original children (_children) to avoid
      // the children being overwritten when when layout is computed.
      function accumulate(d) {
          return (d._children = d.children)
4f261647   lucvic   Updated datasetex...
75
              ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 5)
ab77b03a   lucvic   Added datasetexpl...
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
              : d.value;
      }
  
      // Compute the treemap layout recursively such that each group of siblings
      // uses the same size (1×1) rather than the dimensions of the parent cell.
      // This optimizes the layout for the current zoom state. Note that a wrapper
      // object is created for the parent node for each group of siblings so that
      // the parent’s dimensions are not discarded as we recurse. Since each group
      // of sibling was laid out in 1×1, we must rescale to fit using absolute
      // coordinates. This lets us use a viewport to zoom.
      function layout(d) {
          if (d._children) {
              treemap.nodes({_children: d._children});
              var i = 0;
              d._children.forEach(function(c) {
                  c.x = d.x + c.x * d.dx;
                  c.y = d.y + c.y * d.dy;
                  c.dx *= d.dx;
                  c.dy *= d.dy;
                  c.parent = d;
                  c.depth = d.depth + 1;
                  c.color = c.depth < 2
4f261647   lucvic   Updated datasetex...
98
                          ? d3.scale.ordinal().domain(d3.range(d._children.length)).range(["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"])(i++)
276d756a   lucvic   Fixed: Dataset pr...
99
                          : d.color;
ab77b03a   lucvic   Added datasetexpl...
100
101
102
103
104
                  layout(c);
              });
          }
      }
  
7d89b743   lucvic   Spinner + Word wrap
105
      function display(d) {
ab77b03a   lucvic   Added datasetexpl...
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
          grandparent
              .datum(d.parent)
              .on("click", transition)
              .select("text")
              .text(name(d));
  
          var g1 = svg.insert("g", ".grandparent")
              .datum(d)
              .attr("class", "depth");
  
          var g = g1.selectAll("g")
              .data(d._children)
              .enter().append("g");
  
          g.filter(function(d) { return d._children; })
              .classed("children", true)
              .on("click", transition);
  
          g.selectAll(".child")
              .data(function(d) { return d._children || [d]; })
              .enter().append("rect")
              .attr("class", "child")
              .call(rect);
  
          g.append("rect")
              .attr("class", "parent")
              .call(rect)
              .append("title")
4f261647   lucvic   Updated datasetex...
134
              .text(function(d) { return d.name;  /*formatNumber(d.value);*/ });
ab77b03a   lucvic   Added datasetexpl...
135
136
137
  
          g.append("text")
              .attr("dy", ".75em")
7d89b743   lucvic   Spinner + Word wrap
138
              .call(text);
ab77b03a   lucvic   Added datasetexpl...
139
140
141
142
143
144
  
          function transition(d) {
              if (transitioning || !d) return;
              transitioning = true;
  
              if (dataletContainer) {
ab77b03a   lucvic   Added datasetexpl...
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
                  dataletContainer.remove();
                  dataletContainer = null;
              }
  
              var g2 = display(d),
                  t1 = g1.transition().duration(750),
                  t2 = g2.transition().duration(750);
  
              // Update the domain only after entering new elements.
              x.domain([d.x, d.x + d.dx]);
              y.domain([d.y, d.y + d.dy]);
  
              // Enable anti-aliasing during the transition.
              svg.style("shape-rendering", null);
  
              // Draw child nodes on top of parent nodes.
7d89b743   lucvic   Spinner + Word wrap
161
              svg.selectAll(".depth").sort(function(a, b) { return b.depth - a.depth; });
ab77b03a   lucvic   Added datasetexpl...
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
  
              // Fade-in entering text.
              g2.selectAll("text").style("fill-opacity", 0);
  
              // Transition to the new view.
              t1.selectAll("text").call(text).style("fill-opacity", 0);
              t2.selectAll("text").call(text).style("fill-opacity", 1);
              t1.selectAll("rect").call(rect);
              t2.selectAll("rect").call(rect);
  
              // Remove the old node when the transition is finished.
              t1.remove().each("end", function() {
                  svg.style("shape-rendering", "crispEdges");
                  transitioning = false;
              });
          }
  
          if (!d._children[0]._children) {
7d89b743   lucvic   Spinner + Word wrap
180
              if (select_listener) {
0d080e7d   lucvic   CKAN and OPENDATA...
181
                  var url = d._children[0].name;
fa810463   lucvic   Fixed CKAN url ge...
182
                  var ret = "Data provider not supported yet."
0d080e7d   lucvic   CKAN and OPENDATA...
183
184
185
186
187
188
189
190
  
                  // Check if CKAN
                  var strDatasetPos = url.indexOf('/dataset/');
                  var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
                  if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
                      var urlSegment1 = url.substring(0, strDatasetPos);
                      var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
                      var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
fa810463   lucvic   Fixed CKAN url ge...
191
                      ret = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
0d080e7d   lucvic   CKAN and OPENDATA...
192
193
194
195
196
197
198
199
                  }
  
                  // Check if OPENDATASOFT
                  var strExploreDatasetPos = url.indexOf('/explore/dataset/');
                  if (strExploreDatasetPos >= 0) {
                      var urlSegment1 = url.substring(0, strExploreDatasetPos);
                      var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
                      var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
fa810463   lucvic   Fixed CKAN url ge...
200
                      ret = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
0d080e7d   lucvic   CKAN and OPENDATA...
201
202
                  }
  
fa810463   lucvic   Fixed CKAN url ge...
203
                  select_listener(ret);
7d89b743   lucvic   Spinner + Word wrap
204
205
              }
  
ab77b03a   lucvic   Added datasetexpl...
206
207
              var dataurl = d._children[0].name;
              var pageurl = dataurl.replace(/\/download\/.*/, '');
ab77b03a   lucvic   Added datasetexpl...
208
209
              dataletContainer = svg
                  .append("foreignObject")
276d756a   lucvic   Fixed: Dataset pr...
210
211
                  .attr("width", root.dx)
                  .attr("height", root.dy - root.y)
a31f0660   root   sevc-controllet i...
212
213
                  .append("xhtml:body")
                  .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>');
ab77b03a   lucvic   Added datasetexpl...
214
215
216
217
218
          }
  
          return g;
      }
  
ab77b03a   lucvic   Added datasetexpl...
219
      function text(text) {
7d89b743   lucvic   Spinner + Word wrap
220
221
222
223
224
225
226
227
228
229
230
231
232
          text
              .attr("x", function(d) { return x(d.x) + 6; })
              .attr("y", function(d) { return y(d.y) + 6; });
          text.call(wrap);
      }
  
      function wrap(d) {
          var wwidth = width;
          var hheight = height;
  
          d.each(function(){
              var text = d3.select(this),
                  d = text[0][0].__data__,
53621764   lucvic   Text layout fix
233
234
                  name = d.name.trim(),
                  words = name.search(/\s+/) >= 0 ? name.split(/\s+/).reverse() : [name],
7d89b743   lucvic   Spinner + Word wrap
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
                  word = words.pop(),
                  line = [word],
                  lineNumber = 0,
                  lineHeight = 1.1, // ems
                  x = parseFloat(text.attr("x")),
                  y = parseFloat(text.attr("y")),
                  dy = parseFloat(text.attr("dy"));
                  text.selectAll("tspan").remove();
  
              var fx = d3.scale.linear()
                  .domain([d.parent.x, d.parent.x + d.parent.dx])
                  .range([0, wwidth]);
  
              var fy = d3.scale.linear()
                  .domain([d.parent.y, d.parent.y + d.parent.dy])
                  .range([0, hheight]);
  
              var tspan = text
                      .text(null)
                      .append("tspan")
                      .attr("x", fx(d.x) + 6)
                      .attr("y", fy(d.y) + 6)
53621764   lucvic   Text layout fix
257
258
                      .attr("dy", lineNumber++ * lineHeight + dy + "em")
                      .text(word);
7d89b743   lucvic   Spinner + Word wrap
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
              var width = fx(d.x + d.dx) - fx(d.x) - 12;
              var height = fy(d.y + d.dy) - fy(d.y) - 6;
  
              while (word = words.pop()) {
                  line.push(word);
                  tspan.text(line.join(" "));
                  if (tspan.node().getComputedTextLength() > width) {
                      line.pop();
                      tspan.text(line.join(" "));
  
                      line = [word];
  
                      tspan = text
                          .append("tspan")
                          .attr("x", fx(d.x) + 6)
                          .attr("y", fy(d.y) + 6)
                          .attr("dy", lineNumber++ * lineHeight + dy + "em")
                          .text(word);
  
                      if (text.node().offsetHeight > height) {
                          tspan.remove();
                          break;
                      }
                  }
              }
          });
ab77b03a   lucvic   Added datasetexpl...
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
      }
  
      function rect(rect) {
          rect.attr("x", function(d) { return x(d.x); })
              .attr("y", function(d) { return y(d.y); })
              .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
              .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
              .style("fill", function(d, i) { return d.color; })
              ;
      }
  
      function name(d) {
          return d.parent
              ? name(d.parent) + "." + d.name
              : d.name;
      }
  };