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

Scatterplot facet now shows 2 layers of dots: one for the base distribution and one that's constrained by the other facets.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@493 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-04-17 06:19:47 +00:00
parent 3b63e0b969
commit 950abbc7ea
3 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,18 +59,23 @@ ScatterplotFacet.prototype._initializeUI = function() {
var bodyDiv = $('<div></div>').addClass("facet-scatterplot-body").appendTo(container);
var params = {
project: theProject.id,
engine: JSON.stringify(ui.browsingEngine.getJSON(false, this)),
plotter: JSON.stringify(this._config)
};
var url = "/command/get-scatterplot?" + $.param(params);
this._messageDiv = $('<div>').text("Loading...").addClass("facet-scatterplot-message").appendTo(bodyDiv);
this._plotDiv = $('<div>').addClass("facet-scatterplot-plot").appendTo(bodyDiv);
this._plotDiv = $('<div>')
.addClass("facet-scatterplot-plot")
.width(this._config.l + "px")
.height(this._config.l + "px")
.appendTo(bodyDiv);
this._plotBaseImg = $('<img>')
.addClass("facet-scatterplot-image")
.attr("src", this._formulateImageUrl({}, "DDDDFF"))
.attr("width", this._config.l)
.attr("height", this._config.l)
.appendTo(this._plotDiv);
this._plotImg = $('<img>')
.addClass("facet-scatterplot-image")
.attr("src",url)
.attr("src", this._formulateCurrentImageUrl())
.attr("width", this._config.l)
.attr("height", this._config.l)
.imgAreaSelect({
@ -91,6 +96,20 @@ ScatterplotFacet.prototype._initializeUI = function() {
this._statusDiv = $('<div>').addClass("facet-scatterplot-status").appendTo(bodyDiv);
};
ScatterplotFacet.prototype._formulateCurrentImageUrl = function() {
return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), "444488")
};
ScatterplotFacet.prototype._formulateImageUrl = function(engineConfig, color) {
this._config.color = color;
var params = {
project: theProject.id,
engine: JSON.stringify(engineConfig),
plotter: JSON.stringify(this._config)
};
return "/command/get-scatterplot?" + $.param(params);
};
ScatterplotFacet.prototype.updateState = function(data) {
if ("min_x" in data && "max_x" in data && "max_x" in data && "min_x" in data) {
this._error = false;
@ -137,6 +156,8 @@ ScatterplotFacet.prototype.render = function() {
this._messageDiv.hide();
this._plotDiv.show();
this._statusDiv.show();
this._plotImg.attr("src", this._formulateCurrentImageUrl());
};
ScatterplotFacet.prototype._remove = function() {

4
src/main/webapp/scripts/project/browsing-engine.js
View File

@ -105,8 +105,8 @@ BrowsingEngine.prototype.getJSON = function(keepUnrestrictedFacets, except) {
};
for (var i = 0; i < this._facets.length; i++) {
var facet = this._facets[i];
if ((keepUnrestrictedFacets || facet.facet.hasSelection()) && (facet.facet != except)) {
a.facets.push(this._facets[i].facet.getJSON());
if ((keepUnrestrictedFacets || facet.facet.hasSelection()) && (facet.facet !== except)) {
a.facets.push(facet.facet.getJSON());
}
}
return a;

11
src/main/webapp/styles/project/browsing.css
View File

@ -159,8 +159,11 @@ img.facet-choice-link {
border: 1px solid #ccc;
padding: 5px;
}
.facet-scatterplot-image {
border: 1px solid #f0f0f0;
margin: 0.5em 0.8em;
.facet-scatterplot-plot {
border: 1px solid #f0f0f0;
margin: 0.5em 0.8em;
position: relative;
}
.facet-scatterplot-image {
position: absolute;
}