s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

better selection procedure for the scatterplot facet

Browse Source 
(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 2010-04-14 05:14:33 +00:00
parent 3bae823010
commit ad1b920e0e
7 changed files with 82 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/main/webapp/scripts/dialogs/scatterplot-dialog.js
View File

@ -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 table = '<table class="scatterplot-matrix-table"><tbody>';
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 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>'

2
src/main/webapp/scripts/facets/scatterplot-facet.js
View File

@ -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;

10
src/main/webapp/scripts/project/menu-bar.js
View File

@ -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();
};

7
src/main/webapp/scripts/views/data-table-column-header-ui.js
View File

@ -193,6 +193,13 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
]
},
{},
{
label: "Scatterplot Facet",
click: function() {
new ScatterplotDialog(self._column.name);
}
},
{},
{
label: "Text Search",
click: function() {

2
src/main/webapp/scripts/widgets/scatterplot-widget.js
View File

@ -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;

20
src/main/webapp/styles/dialogs/scatterplot-dialog.css
View File

@ -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;
}

2
src/main/webapp/styles/project.css
View File

@ -10,7 +10,7 @@ body {
#loading-message {
text-align: center;
font-size: 300%;
color: #faa;
color: #aaa;
padding: 1in;
font-style: italic;
}