Blame view

datalets/datasetexplorer-datalet/js/buildtreemap.js 12.2 KB
ab77b03a   lucvic   Added datasetexpl...
1
2
3
4
  /**
   * Created by Utente on 17/07/2015.
   */
  
2217c83d   lucvic   Support for meta ...
5
  function build(root, meta, place_holder, select_listener, width, height) {
ab77b03a   lucvic   Added datasetexpl...
6
  
dd85f27a   lucvic   Dataset explorer:...
7
8
      var plwidth = width >= 0 ? width : $("#" + place_holder).width(),
          plheight = height >= 0 ? height : $("#" + place_holder).height();
ab77b03a   lucvic   Added datasetexpl...
9
10
  
      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])
ab77b03a   lucvic   Added datasetexpl...
18
19
20
21
22
23
24
25
26
27
28
29
          .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
30
31
      var svg = d3.select("#" + place_holder)
          .append("svg")
ab77b03a   lucvic   Added datasetexpl...
32
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
          .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...
61
62
63
64
65
66
67
68
69
70
71
72
73
      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...
74
              ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 5)
ab77b03a   lucvic   Added datasetexpl...
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
              : 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...
97
                          ? 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...
98
                          : d.color;
ab77b03a   lucvic   Added datasetexpl...
99
100
101
102
103
                  layout(c);
              });
          }
      }
  
7d89b743   lucvic   Spinner + Word wrap
104
      function display(d) {
ab77b03a   lucvic   Added datasetexpl...
105
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
          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)
b53fef03   Renato De Donato   treemap tooltip
132
133
              .attr("onmousemove", function(d) {
                  //var data = ["lvl", "name", "color", "description", "logoUrl", "datasets", "datasetUrl"];
fb7aea2c   Renato De Donato   tooltip, a new hope!
134
135
                  var data = ["", d.name, d.color, "", "", d.value, ""];
                  data[2] = ["#000000"];
12fe9d17   Renato De Donato   datasetexplorer
136
                  var id = d.name.split(':')[1];
b53fef03   Renato De Donato   treemap tooltip
137
138
139
                  if (d.depth == 1) {
                      // FIRST LVL
                      data[0] = "first";
12fe9d17   Renato De Donato   datasetexplorer
140
141
                      data[1] = meta[id]['title'];
                      data[3] = meta[id]['description'];
fb7aea2c   Renato De Donato   tooltip, a new hope!
142
                      data[4] = ((ODE.THEME_IMAGES_URL == undefined) ? parent.ODE.THEME_IMAGES_URL : ODE.THEME_IMAGES_URL) + "/logos/"+id+".png";//meta[id]['logo_url'];
12fe9d17   Renato De Donato   datasetexplorer
143
                      //data[5] = d.value;
b53fef03   Renato De Donato   treemap tooltip
144
145
146
                  } else if (d._children && !d._children[0]._children) {
                      // LAST LVL
                      data[0] = "last";
fb7aea2c   Renato De Donato   tooltip, a new hope!
147
                      //data[6] = "datasert url";
b53fef03   Renato De Donato   treemap tooltip
148
149
150
                  } else {
                      // MIDDLE LVL
                      data[0] = "middle";
b53fef03   Renato De Donato   treemap tooltip
151
                  }
b53fef03   Renato De Donato   treemap tooltip
152
153
154
                  return "showTooltip(event, '" + data + "')";
              })
              .attr("onmouseout", function() {return "hideTooltip()";})
ab77b03a   lucvic   Added datasetexpl...
155
156
157
  
          g.append("text")
              .attr("dy", ".75em")
7d89b743   lucvic   Spinner + Word wrap
158
              .call(text);
ab77b03a   lucvic   Added datasetexpl...
159
160
161
162
163
164
  
          function transition(d) {
              if (transitioning || !d) return;
              transitioning = true;
  
              if (dataletContainer) {
ab77b03a   lucvic   Added datasetexpl...
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
                  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
181
              svg.selectAll(".depth").sort(function(a, b) { return b.depth - a.depth; });
ab77b03a   lucvic   Added datasetexpl...
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
  
              // 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
200
              if (select_listener) {
0d080e7d   lucvic   CKAN and OPENDATA...
201
                  var url = d._children[0].name;
fa810463   lucvic   Fixed CKAN url ge...
202
                  var ret = "Data provider not supported yet."
0d080e7d   lucvic   CKAN and OPENDATA...
203
204
205
206
207
208
209
210
  
                  // 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...
211
                      ret = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
0d080e7d   lucvic   CKAN and OPENDATA...
212
213
214
215
216
217
218
219
                  }
  
                  // 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...
220
                      ret = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
0d080e7d   lucvic   CKAN and OPENDATA...
221
222
                  }
  
fa810463   lucvic   Fixed CKAN url ge...
223
                  select_listener(ret);
7d89b743   lucvic   Spinner + Word wrap
224
225
              }
  
ab77b03a   lucvic   Added datasetexpl...
226
227
              var dataurl = d._children[0].name;
              var pageurl = dataurl.replace(/\/download\/.*/, '');
ab77b03a   lucvic   Added datasetexpl...
228
229
              dataletContainer = svg
                  .append("foreignObject")
276d756a   lucvic   Fixed: Dataset pr...
230
231
                  .attr("width", root.dx)
                  .attr("height", root.dy - root.y)
a31f0660   root   sevc-controllet i...
232
233
                  .append("xhtml:body")
                  .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>');
ab77b03a   lucvic   Added datasetexpl...
234
235
236
237
238
          }
  
          return g;
      }
  
ab77b03a   lucvic   Added datasetexpl...
239
      function text(text) {
7d89b743   lucvic   Spinner + Word wrap
240
241
242
243
244
245
          text
              .attr("x", function(d) { return x(d.x) + 6; })
              .attr("y", function(d) { return y(d.y) + 6; });
          text.call(wrap);
      }
  
2217c83d   lucvic   Support for meta ...
246
      function checkProviderName(name) {
2217c83d   lucvic   Support for meta ...
247
          if (name.substr(0, 2) == 'p:') {
2217c83d   lucvic   Support for meta ...
248
249
250
              var pid = name.substr(2);
              name = meta[pid].title;
          }
2217c83d   lucvic   Support for meta ...
251
252
253
          return name;
      }
  
7d89b743   lucvic   Spinner + Word wrap
254
255
256
257
258
259
260
      function wrap(d) {
          var wwidth = width;
          var hheight = height;
  
          d.each(function(){
              var text = d3.select(this),
                  d = text[0][0].__data__,
2217c83d   lucvic   Support for meta ...
261
                  name = checkProviderName(d.name.trim());
53621764   lucvic   Text layout fix
262
                  words = name.search(/\s+/) >= 0 ? name.split(/\s+/).reverse() : [name],
7d89b743   lucvic   Spinner + Word wrap
263
264
265
266
                  word = words.pop(),
                  line = [word],
                  lineNumber = 0,
                  lineHeight = 1.1, // ems
8f4623a8   lucvic   Updated datasetex...
267
268
                  //x = parseFloat(text.attr("x")),
                  //y = parseFloat(text.attr("y")),
7d89b743   lucvic   Spinner + Word wrap
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
                  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
285
286
                      .attr("dy", lineNumber++ * lineHeight + dy + "em")
                      .text(word);
7d89b743   lucvic   Spinner + Word wrap
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
              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...
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
      }
  
      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;
      }
b53fef03   Renato De Donato   treemap tooltip
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
  
  };
  
  function showTooltip(e, data) {
      var data = data.split(",");
  
      treemap_tooltip.name = data[1];
      treemap_tooltip.color = data[2];
      treemap_tooltip.description = data[3];
      treemap_tooltip.logoUrl = data[4];
      treemap_tooltip.datasets = data[5];
      treemap_tooltip.datasetUrl = data[6];
  
      treemap_tooltip.showTooltip(e, data[0]);
  }
  
  function hideTooltip() {
      treemap_tooltip.hideTooltip();
  }