2010-10-20 20:11:15 +02:00
|
|
|
/*
|
|
|
|
|
|
|
|
Copyright 2010, Google Inc.
|
|
|
|
All rights reserved.
|
|
|
|
|
|
|
|
Redistribution and use in source and binary forms, with or without
|
|
|
|
modification, are permitted provided that the following conditions are
|
|
|
|
met:
|
|
|
|
|
|
|
|
* Redistributions of source code must retain the above copyright
|
|
|
|
notice, this list of conditions and the following disclaimer.
|
|
|
|
* Redistributions in binary form must reproduce the above
|
|
|
|
copyright notice, this list of conditions and the following disclaimer
|
|
|
|
in the documentation and/or other materials provided with the
|
|
|
|
distribution.
|
|
|
|
* Neither the name of Google Inc. nor the names of its
|
|
|
|
contributors may be used to endorse or promote products derived from
|
|
|
|
this software without specific prior written permission.
|
|
|
|
|
|
|
|
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
|
|
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
|
|
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
|
|
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
|
|
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
|
|
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
|
|
|
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
|
|
|
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
|
|
|
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
|
|
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
|
|
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
2010-04-14 07:14:33 +02:00
|
|
|
function ScatterplotDialog(column) {
|
|
|
|
this._column = column;
|
2010-04-13 02:25:43 +02:00
|
|
|
this._plot_method = "lin";
|
2010-04-13 06:48:20 +02:00
|
|
|
this._createDialog();
|
2010-04-30 21:14:45 +02:00
|
|
|
this._active = true;
|
2010-04-10 10:28:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ScatterplotDialog.prototype._createDialog = function() {
|
|
|
|
var self = this;
|
2010-06-21 23:59:53 +02:00
|
|
|
var dialog = $(DOM.loadHTML("core", "scripts/dialogs/scatterplot-dialog.html"));
|
|
|
|
this._elmts = DOM.bind(dialog);
|
|
|
|
this._elmts.dialogHeader.text(
|
|
|
|
'Scatterplot Matrix' +
|
|
|
|
((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')"));
|
2010-05-07 02:02:32 +02:00
|
|
|
|
2010-06-21 23:59:53 +02:00
|
|
|
this._elmts.closeButton.click(function() { self._dismiss(); });
|
2010-05-07 02:02:32 +02:00
|
|
|
|
2010-05-07 01:20:51 +02:00
|
|
|
this._elmts.plotSelector.buttonset().change(function() {
|
|
|
|
self._plot_method = $(this).find("input:checked").val();
|
2010-04-13 02:25:43 +02:00
|
|
|
self._renderMatrix();
|
|
|
|
});
|
|
|
|
|
2010-05-07 01:20:51 +02:00
|
|
|
this._elmts.rotationSelector.buttonset().change(function() {
|
|
|
|
self._rotation = $(this).find("input:checked").val();
|
2010-04-17 05:00:38 +02:00
|
|
|
self._renderMatrix();
|
|
|
|
});
|
|
|
|
|
2010-05-07 01:20:51 +02:00
|
|
|
this._elmts.dotSelector.buttonset().change(function() {
|
|
|
|
var dot_size = $(this).find("input:checked").val();
|
|
|
|
if (dot_size == "small") {
|
|
|
|
self._dot_size = 0.4;
|
|
|
|
} else if (dot_size == "big") {
|
|
|
|
self._dot_size = 1.4;
|
|
|
|
} else {
|
|
|
|
self._dot_size = 0.8;
|
2010-04-13 02:25:43 +02:00
|
|
|
}
|
2010-05-07 01:20:51 +02:00
|
|
|
self._renderMatrix();
|
2010-04-13 02:25:43 +02:00
|
|
|
});
|
|
|
|
|
2010-06-21 23:59:53 +02:00
|
|
|
this._level = DialogSystem.showDialog(dialog);
|
2010-04-13 02:25:43 +02:00
|
|
|
this._renderMatrix();
|
2010-04-10 10:28:06 +02:00
|
|
|
};
|
|
|
|
|
2010-04-13 02:25:43 +02:00
|
|
|
ScatterplotDialog.prototype._renderMatrix = function() {
|
2010-04-10 10:28:06 +02:00
|
|
|
var self = this;
|
|
|
|
|
2010-04-13 02:25:43 +02:00
|
|
|
var container = this._elmts.tableContainer.html(
|
2010-04-15 08:20:56 +02:00
|
|
|
'<div style="margin: 1em; font-size: 130%; color: #888; background-color: white;">Processing... <img src="/images/small-spinner.gif"></div>'
|
2010-04-13 02:25:43 +02:00
|
|
|
);
|
|
|
|
|
2010-04-15 08:20:56 +02:00
|
|
|
if (theProject.columnModel.columns.length > 0) {
|
|
|
|
var params = {
|
|
|
|
project: theProject.id
|
2010-04-13 05:44:42 +02:00
|
|
|
};
|
2010-08-22 08:16:13 +02:00
|
|
|
$.getJSON("/command/core/get-columns-info?" + $.param(params),function(data) {
|
2010-05-05 02:26:26 +02:00
|
|
|
if (data === null || typeof data.length == 'undefined') {
|
2010-04-15 08:20:56 +02:00
|
|
|
container.html("Error calling 'get-columns-info'");
|
|
|
|
return;
|
|
|
|
}
|
2010-04-14 07:14:33 +02:00
|
|
|
|
2010-04-15 08:20:56 +02:00
|
|
|
var columns = [];
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
if (data[i].is_numeric) {
|
|
|
|
columns.push(data[i]);
|
|
|
|
}
|
2010-04-13 08:40:33 +02:00
|
|
|
}
|
2010-04-15 08:20:56 +02:00
|
|
|
|
|
|
|
if (typeof self._plot_size == 'undefined') {
|
|
|
|
self._plot_size = Math.max(Math.floor(500 / columns.length / 5) * 5,20);
|
2010-05-06 21:34:51 +02:00
|
|
|
self._dot_size = 0.8;
|
2010-04-15 08:20:56 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
var table = '<table class="scatterplot-matrix-table"><tbody>';
|
|
|
|
|
2010-04-30 21:14:45 +02:00
|
|
|
var createScatterplot = function(cx, cy) {
|
2010-04-15 08:20:56 +02:00
|
|
|
var title = cx + ' (x) vs. ' + cy + ' (y)';
|
|
|
|
var link = '<a href="javascript:{}" title="' + title + '" cx="' + cx + '" cy="' + cy + '">';
|
|
|
|
var plotter_params = {
|
|
|
|
'cx' : cx,
|
|
|
|
'cy' : cy,
|
2010-04-17 05:00:38 +02:00
|
|
|
'l' : self._plot_size,
|
2010-04-15 08:20:56 +02:00
|
|
|
'dot': self._dot_size,
|
2010-04-17 05:00:38 +02:00
|
|
|
'dim_x': self._plot_method,
|
|
|
|
'dim_y': self._plot_method,
|
|
|
|
'r': self._rotation
|
2010-04-15 08:20:56 +02:00
|
|
|
};
|
|
|
|
var params = {
|
|
|
|
project: theProject.id,
|
|
|
|
engine: JSON.stringify(ui.browsingEngine.getJSON()),
|
|
|
|
plotter: JSON.stringify(plotter_params)
|
|
|
|
};
|
2010-08-22 08:16:13 +02:00
|
|
|
var url = "/command/core/get-scatterplot?" + $.param(params);
|
2010-04-30 21:14:45 +02:00
|
|
|
|
2010-04-30 06:09:04 +02:00
|
|
|
var attrs = [
|
|
|
|
'width="' + self._plot_size + '"',
|
2010-04-30 21:14:45 +02:00
|
|
|
'height="' + self._plot_size + '"',
|
|
|
|
'src2="' + url + '"'
|
2010-04-30 06:09:04 +02:00
|
|
|
];
|
|
|
|
|
|
|
|
return link + '<img ' + attrs.join(' ') + ' /></a>';
|
2010-04-14 07:14:33 +02:00
|
|
|
};
|
|
|
|
|
2010-04-15 08:20:56 +02:00
|
|
|
for (var i = 0; i < columns.length; i++) {
|
|
|
|
table += '<tr>';
|
|
|
|
var div_class = "column_header";
|
|
|
|
if (columns[i].name == self._column) div_class += " current_column";
|
2010-05-05 02:26:26 +02:00
|
|
|
table += '<td class="' + div_class + '" colspan="' + (i + 1) + '">' + columns[i].name + '</td>';
|
2010-04-15 08:20:56 +02:00
|
|
|
for (var j = i + 1; j < columns.length; j++) {
|
|
|
|
var cx = columns[i].name;
|
|
|
|
var cy = columns[j].name;
|
|
|
|
|
|
|
|
var div_class = "scatterplot";
|
2010-04-30 06:09:04 +02:00
|
|
|
var current = cx == self._column || cy == self._column;
|
|
|
|
if (current) div_class += " current_column";
|
2010-04-30 21:14:45 +02:00
|
|
|
table += '<td><div class="' + div_class + '">' + createScatterplot(cx,cy) + '</div></td>';
|
2010-04-15 08:20:56 +02:00
|
|
|
}
|
|
|
|
table += '</tr>';
|
2010-04-14 07:14:33 +02:00
|
|
|
}
|
2010-04-15 08:20:56 +02:00
|
|
|
|
|
|
|
table += "</tbody></table>";
|
|
|
|
|
|
|
|
var width = container.width();
|
2010-04-30 06:09:04 +02:00
|
|
|
container.empty().css("width", width + "px").html(table);
|
2010-04-15 08:20:56 +02:00
|
|
|
|
|
|
|
container.find("a").click(function() {
|
|
|
|
var options = {
|
|
|
|
"name" : $(this).attr("title"),
|
2010-04-17 05:00:38 +02:00
|
|
|
"cx" : $(this).attr("cx"),
|
|
|
|
"cy" : $(this).attr("cy"),
|
2010-04-30 08:12:42 +02:00
|
|
|
"l" : 150,
|
2010-04-17 05:00:38 +02:00
|
|
|
"ex" : "value",
|
|
|
|
"ey" : "value",
|
2010-04-15 08:20:56 +02:00
|
|
|
"dot" : self._dot_size,
|
2010-04-17 05:00:38 +02:00
|
|
|
"dim_x" : self._plot_method,
|
|
|
|
"dim_y" : self._plot_method,
|
|
|
|
'r': self._rotation
|
2010-04-15 08:20:56 +02:00
|
|
|
};
|
|
|
|
ui.browsingEngine.addFacet("scatterplot", options);
|
2010-05-07 01:20:51 +02:00
|
|
|
self._dismiss();
|
2010-04-15 08:20:56 +02:00
|
|
|
});
|
2010-04-30 23:19:13 +02:00
|
|
|
|
2010-04-30 21:14:45 +02:00
|
|
|
var load_images = function(data) {
|
2010-04-30 23:19:13 +02:00
|
|
|
if (self._active) {
|
|
|
|
data.batch = 0;
|
|
|
|
var end = Math.min(data.index + data.batch_size,data.images.length);
|
|
|
|
for (; data.index < end; data.index++) {
|
|
|
|
load_image(data);
|
2010-04-30 06:09:04 +02:00
|
|
|
}
|
2010-04-15 08:20:56 +02:00
|
|
|
}
|
2010-04-30 21:14:45 +02:00
|
|
|
};
|
|
|
|
|
2010-04-30 23:19:13 +02:00
|
|
|
var load_image = function(data) {
|
|
|
|
var img = $(data.images[data.index]);
|
|
|
|
var src2 = img.attr("src2");
|
|
|
|
if (src2) {
|
|
|
|
img.attr("src", src2);
|
|
|
|
img.removeAttr("src2");
|
|
|
|
img.load(function() {
|
|
|
|
data.batch++;
|
|
|
|
if (data.batch == data.batch_size) {
|
|
|
|
load_images(data);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2010-04-30 21:14:45 +02:00
|
|
|
load_images({
|
|
|
|
index : 0,
|
2010-04-30 23:19:13 +02:00
|
|
|
batch_size: 4,
|
2010-04-30 21:14:45 +02:00
|
|
|
images : container.find(".scatterplot img")
|
2010-05-05 02:26:26 +02:00
|
|
|
});
|
2010-04-15 08:20:56 +02:00
|
|
|
});
|
2010-04-10 10:28:06 +02:00
|
|
|
} else {
|
|
|
|
container.html(
|
|
|
|
'<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">There are no columns in this dataset</div></div>'
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
ScatterplotDialog.prototype._dismiss = function() {
|
2010-04-30 21:14:45 +02:00
|
|
|
this._active = false;
|
2010-04-10 10:28:06 +02:00
|
|
|
DialogSystem.dismissUntil(this._level - 1);
|
|
|
|
};
|
|
|
|
|