better selection procedure for the scatterplot facet
(the scatterfacet itself still doesn't work though) git-svn-id: http://google-refine.googlecode.com/svn/trunk@474 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
Stefano Mazzocchi
parent
3bae823010
commit
ad1b920e0e
@ -1,7 +1,8 @@
|
||||
function ScatterplotDialog() {
|
||||
function ScatterplotDialog(column) {
|
||||
this._column = column;
|
||||
this._plot_method = "lin";
|
||||
this._plot_size = 20;
|
||||
this._dot_size = 0.1;
|
||||
this._plot_size = Math.max(Math.floor("500" / theProject.columnModel.columns.length / 5) * 5,"20");
|
||||
this._dot_size = 0.3;
|
||||
this._createDialog();
|
||||
}
|
||||
|
||||
@ -10,7 +11,7 @@ ScatterplotDialog.prototype._createDialog = function() {
|
||||
var frame = DialogSystem.createDialog();
|
||||
frame.width("1100px");
|
||||
|
||||
var header = $('<div></div>').addClass("dialog-header").text('Scatterplot Matrix').appendTo(frame);
|
||||
var header = $('<div></div>').addClass("dialog-header").text('Scatterplot Matrix' + ((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')")).appendTo(frame);
|
||||
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
|
||||
var footer = $(
|
||||
'<div class="dialog-footer">' +
|
||||
@ -29,8 +30,8 @@ ScatterplotDialog.prototype._createDialog = function() {
|
||||
'<option selected="true">linear</option>' +
|
||||
'<option>log-log</option>' +
|
||||
'</select></span>' +
|
||||
'<span class="clustering-dialog-controls">Plot Size: <input bind="plotSize" type="test" size="2" value="20"> px</span>' +
|
||||
'<span class="clustering-dialog-controls">Dot Size: <input bind="dotSize" type="test" size="2" value="0.1"> px</span>' +
|
||||
'<span class="clustering-dialog-controls">Plot Size: <input bind="plotSize" type="test" size="2" value="' + this._plot_size + '"> px</span>' +
|
||||
'<span class="clustering-dialog-controls">Dot Size: <input bind="dotSize" type="test" size="2" value="' + this._dot_size + '"> px</span>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
@ -90,32 +91,16 @@ ScatterplotDialog.prototype._renderMatrix = function() {
|
||||
);
|
||||
|
||||
if (columns.length > 0) {
|
||||
var table = $('<table></table>').addClass("scatterplot-matrix-table")[0];
|
||||
|
||||
var createScatterplot = function(i, j) {
|
||||
var cx = columns[i].name;
|
||||
var cy = columns[j].name;
|
||||
|
||||
var name = cx + ' (x) vs. ' + cy + ' (y)';
|
||||
var link = $('<a href="javascript:{}"></a>')
|
||||
.attr("title", name)
|
||||
.click(function() {
|
||||
var options = {
|
||||
"name" : name,
|
||||
"x_columnName" : cx,
|
||||
"y_columnName" : cy,
|
||||
"x_expression" : "value",
|
||||
"y_expression" : "value",
|
||||
};
|
||||
ui.browsingEngine.addFacet("scatterplot", options);
|
||||
//self._dismiss();
|
||||
});
|
||||
var table = '<table class="scatterplot-matrix-table"><tbody>';
|
||||
|
||||
var createScatterplot = function(cx, cy) {
|
||||
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,
|
||||
'w' : self._plot_size,
|
||||
'h' : self._plot_size,
|
||||
'w' : self._plot_size * 3,
|
||||
'h' : self._plot_size * 3,
|
||||
'dot': self._dot_size,
|
||||
'dim': self._plot_method
|
||||
};
|
||||
@ -125,33 +110,52 @@ ScatterplotDialog.prototype._renderMatrix = function() {
|
||||
plotter: JSON.stringify(plotter_params)
|
||||
};
|
||||
var url = "/command/get-scatterplot?" + $.param(params);
|
||||
var plot = $('<img src="' + url + '" />')
|
||||
.addClass("scatterplot")
|
||||
.attr("width", self._plot_size)
|
||||
.attr("height", self._plot_size)
|
||||
.appendTo(link);
|
||||
|
||||
return link;
|
||||
return link + '<img src="' + url + '" width="' + self._plot_size + '" height="' + self._plot_size + '" /></a>';
|
||||
};
|
||||
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
var tr = table.insertRow(table.rows.length);
|
||||
var counter = 0;
|
||||
var tdColumnName = $(tr.insertCell(counter++));
|
||||
tdColumnName
|
||||
.text(columns[i].name)
|
||||
.css("text-align", "right")
|
||||
.css("padding", "0em 0.5em")
|
||||
.attr("colspan", i + 1);
|
||||
table += '<tr>';
|
||||
var div_class = "column_header";
|
||||
if (columns[i].name == this._column) div_class += " current_column";
|
||||
table += '<td class="' + div_class + '" colspan="' + (i + 1) + '">' + columns[i].name + '</td>'
|
||||
for (var j = i + 1; j < columns.length; j++) {
|
||||
$(tr.insertCell(counter++)).append(createScatterplot(i,j));
|
||||
}
|
||||
var cx = columns[i].name;
|
||||
var cy = columns[j].name;
|
||||
|
||||
var div_class = "scatterplot";
|
||||
if (cx == this._column || cy == this._column) div_class += " current_column";
|
||||
table += '<td><div class="' + div_class + '">' + createScatterplot(cx,cy) + '</div></td>';
|
||||
}
|
||||
table += '</tr>';
|
||||
}
|
||||
|
||||
var width = container.width();
|
||||
container.empty().css("width", width + "px").append(table);
|
||||
table += "</tbody></table>";
|
||||
|
||||
var width = container.width();
|
||||
container.empty().css("width", width + "px").append($(table));
|
||||
|
||||
container.find("a").click(function() {
|
||||
var options = {
|
||||
"name" : $(this).attr("title"),
|
||||
"x_columnName" : $(this).attr("cx"),
|
||||
"y_columnName" : $(this).attr("cy"),
|
||||
"x_expression" : "value",
|
||||
"y_expression" : "value",
|
||||
"dot" : self._dot_size,
|
||||
"dim" : self._plot_method
|
||||
};
|
||||
console.log(options);
|
||||
ui.browsingEngine.addFacet("scatterplot", options);
|
||||
//self._dismiss();
|
||||
});
|
||||
|
||||
container.find(".scatterplot").hover(
|
||||
function() {
|
||||
$(this).find('img').addClass("hover");
|
||||
} , function() {
|
||||
$(this).find('img').removeClass("hover");
|
||||
}
|
||||
);
|
||||
} else {
|
||||
container.html(
|
||||
'<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">There are no columns in this dataset</div></div>'
|
||||
|
||||
@ -37,6 +37,8 @@ ScatterplotFacet.prototype.getJSON = function() {
|
||||
y_columnName : this._config.y_columnName,
|
||||
x_expression: this._config.x_expression,
|
||||
y_expression: this._config.y_expression,
|
||||
dot: this._config.dot,
|
||||
dim: this._config.dim,
|
||||
};
|
||||
|
||||
return o;
|
||||
|
||||
@ -62,12 +62,6 @@ MenuBar.prototype._initializeUI = function() {
|
||||
click: function() { alert("Not implemented yet."); }
|
||||
}
|
||||
]);
|
||||
this._createTopLevelMenuItem("Scatterplots", [
|
||||
{
|
||||
label: "Show scatterplot matrix ...",
|
||||
click: function() { self._showScatterplotMatrix(); }
|
||||
}
|
||||
]);
|
||||
|
||||
this._wireAllMenuItemsInactive();
|
||||
};
|
||||
@ -223,7 +217,3 @@ MenuBar.prototype._doAutoSchemaAlignment = function() {
|
||||
MenuBar.prototype._doEditSchemaAlignment = function(reset) {
|
||||
new SchemaAlignmentDialog(reset ? null : theProject.protograph, function(newProtograph) {});
|
||||
};
|
||||
|
||||
MenuBar.prototype._showScatterplotMatrix = function() {
|
||||
new ScatterplotDialog();
|
||||
};
|
||||
|
||||
@ -193,6 +193,13 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
|
||||
]
|
||||
},
|
||||
{},
|
||||
{
|
||||
label: "Scatterplot Facet",
|
||||
click: function() {
|
||||
new ScatterplotDialog(self._column.name);
|
||||
}
|
||||
},
|
||||
{},
|
||||
{
|
||||
label: "Text Search",
|
||||
click: function() {
|
||||
|
||||
@ -7,6 +7,8 @@ function ScatterplotWidget(elmt, options) {
|
||||
'cy' : options.y_columnName,
|
||||
'xe' : options.x_expression,
|
||||
'ye' : options.y_expression,
|
||||
'dot': options.dot,
|
||||
'dim': options.dim
|
||||
};
|
||||
|
||||
this._range = null;
|
||||
|
||||
@ -17,6 +17,24 @@ table.scatterplot-matrix-table > tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table.scatterplot-matrix-table img.scatterplot {
|
||||
table.scatterplot-matrix-table td.current_column {
|
||||
font-weight: bold;
|
||||
font-size: 105%;
|
||||
}
|
||||
|
||||
table.scatterplot-matrix-table div.current_column {
|
||||
background-color: #ffeeee;
|
||||
}
|
||||
|
||||
table.scatterplot-matrix-table .column_header {
|
||||
text-align: right;
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
|
||||
table.scatterplot-matrix-table .scatterplot img {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
table.scatterplot-matrix-table .scatterplot img.hover {
|
||||
background-color: #eeffee;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ body {
|
||||
#loading-message {
|
||||
text-align: center;
|
||||
font-size: 300%;
|
||||
color: #faa;
|
||||
color: #aaa;
|
||||
padding: 1in;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user