@@ -15,23 +15,26 @@ Raphael.fn.g.scatterplot = function (x, y, width, height, valuesx, valuesy, opts } var allx = Array.prototype.concat.apply([], valuesx), ally = Array.prototype.concat.apply([], valuesy), - xdim = this.g.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1), - minx = xdim.from, - maxx = xdim.to, - gutter = opts.gutter || 10, - kx = (width - gutter * 2) / (maxx - minx), - ydim = this.g.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1), - miny = ydim.from, - maxy = ydim.to, - ky = (height - gutter * 2) / (maxy - miny), len = Math.max(valuesx[0].length, valuesy[0].length), - symbol = opts.symbol || "", + symbol = opts.symbol || "o", colors = opts.colors || Raphael.fn.g.colors, that = this, columns = null, dots = null, chart = this.set(), path = [], + minall = Math.min(Math.min.apply(Math, allx), Math.min.apply(Math, ally)), + maxall = Math.max(Math.max.apply(Math, allx), Math.max.apply(Math, ally)), + ///XXX: probably breaks if valuesx.length != valuesy.length. FIXME + //XXX: always sets the two axes to the same values + xdim = ydim = this.g.snapEnds(minall, maxall, valuesx[0].length - 1), + minx = xdim.from, + maxx = xdim.to, + gutter = opts.gutter || 10, + kx = (width - gutter * 2) / (maxx - minx), + miny = ydim.from, + maxy = ydim.to, + ky = (height - gutter * 2) / (maxy - miny), axminx = opts.axminx || minx, axmaxx = opts.axmaxx || maxx, axminy = opts.axminy || miny, @@ -49,79 +52,28 @@ Raphael.fn.g.scatterplot = function (x, y, width, height, valuesx, valuesy, opts var axis = this.set(); if (opts.axis) { var ax = (opts.axis + "").split(/[,\s]+/); - +ax[0] && axis.push(this.g.axis(x + gutter, y + gutter, width - 2 * gutter, axminx, axmaxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 2)); + +ax[0] && axis.push(this.g.axis(x + gutter, y + gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 2)); +ax[1] && axis.push(this.g.axis(x + width - gutter, y + height - gutter, height - 2 * gutter, axminy, axmaxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 3)); +ax[2] && axis.push(this.g.axis(x + gutter, y + height - gutter, width - 2 * gutter, axminx, axmaxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 0)); +ax[3] && axis.push(this.g.axis(x + gutter, y + height - gutter, height - 2 * gutter, axminy, axmaxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 1)); } - var lines = this.set(), - symbols = this.set(), - line; + var symbols = this.set(); for (var i = 0, ii = valuesy.length; i < ii; i++) { - if (!opts.nostroke) { - lines.push(line = this.path().attr({ - stroke: colors[i], - "stroke-width": opts.width || 2, - "stroke-linejoin": "round", - "stroke-linecap": "round", - "stroke-dasharray": opts.dash || "" - })); - } var sym = this.raphael.is(symbol, "array") ? symbol[i] : symbol, symset = this.set(); path = []; for (var j = 0, jj = valuesy[i].length; j < jj; j++) { var X = x + gutter + ((valuesx[i] || valuesx[0])[j] - minx) * kx; var Y = y + height - gutter - (valuesy[i][j] - miny) * ky; - (Raphael.is(sym, "array") ? sym[j] : sym) && symset.push(this.g[Raphael.fn.g.markers[this.raphael.is(sym, "array") ? sym[j] : sym]](X, Y, (opts.width || 2) * 3).attr({fill: colors[i], stroke: "none"})); + (Raphael.is(sym, "array") ? sym[j] : sym) && symset.push(this.g[Raphael.fn.g.markers[this.raphael.is(sym, "array") ? sym[j] : sym]](X, Y, (opts.width || 2)).attr({fill: colors[i], stroke: "none"})); path = path.concat([j ? "L" : "M", X, Y]); } symbols.push(symset); if (opts.shade) { shades[i].attr({path: path.concat(["L", X, y + height - gutter, "L", x + gutter + ((valuesx[i] || valuesx[0])[0] - minx) * kx, y + height - gutter, "z"]).join(",")}); } - !opts.nostroke && line.attr({path: path.join(",")}); - } - function createColumns(f) { - // unite Xs together - var Xs = []; - for (var i = 0, ii = valuesx.length; i < ii; i++) { - Xs = Xs.concat(valuesx[i]); - } - Xs.sort(); - // remove duplicates - var Xs2 = [], - xs = []; - for (var i = 0, ii = Xs.length; i < ii; i++) { - Xs[i] != Xs[i - 1] && Xs2.push(Xs[i]) && xs.push(x + gutter + (Xs[i] - minx) * kx); - } - Xs = Xs2; - ii = Xs.length; - var cvrs = f || that.set(); - for (var i = 0; i < ii; i++) { - var X = xs[i] - (xs[i] - (xs[i - 1] || x)) / 2, - w = ((xs[i + 1] || x + width) - xs[i]) / 2 + (xs[i] - (xs[i - 1] || x)) / 2, - C; - f ? (C = {}) : cvrs.push(C = that.rect(X - 1, y, Math.max(w + 1, 1), height).attr({stroke: "none", fill: "#000", opacity: 0})); - C.values = []; - C.symbols = that.set(); - C.y = []; - C.x = xs[i]; - C.axis = Xs[i]; - for (var j = 0, jj = valuesy.length; j < jj; j++) { - Xs2 = valuesx[j] || valuesx[0]; - for (var k = 0, kk = Xs2.length; k < kk; k++) { - if (Xs2[k] == Xs[i]) { - C.values.push(valuesy[j][k]); - C.y.push(y + height - gutter - (valuesy[j][k] - miny) * ky); - C.symbols.push(chart.symbols[j][k]); - } - } - } - f && f.call(C); - } - !f && (columns = cvrs); } + function createDots(f) { var cvrs = f || that.set(), C; @@ -134,7 +86,6 @@ Raphael.fn.g.scatterplot = function (x, y, width, height, valuesx, valuesy, opts C.x = X; C.y = Y; C.value = valuesy[i][j]; - C.line = chart.lines[i]; C.shade = chart.shades[i]; C.symbol = chart.symbols[i][j]; C.symbols = chart.symbols[i]; @@ -144,36 +95,10 @@ Raphael.fn.g.scatterplot = function (x, y, width, height, valuesx, valuesy, opts } !f && (dots = cvrs); } - chart.push(lines, shades, symbols, axis, columns, dots); - chart.lines = lines; + chart.push(shades, symbols, axis, columns, dots); chart.shades = shades; chart.symbols = symbols; chart.axis = axis; - chart.hoverColumn = function (fin, fout) { - !columns && createColumns(); - columns.mouseover(fin).mouseout(fout); - return this; - }; - chart.clickColumn = function (f) { - !columns && createColumns(); - columns.click(f); - return this; - }; - chart.hrefColumn = function (cols) { - var hrefs = that.raphael.is(arguments[0], "array") ? arguments[0] : arguments; - if (!(arguments.length - 1) && typeof cols == "object") { - for (var x in cols) { - for (var i = 0, ii = columns.length; i < ii; i++) if (columns[i].axis == x) { - columns[i].attr("href", cols[x]); - } - } - } - !columns && createColumns(); - for (var i = 0, ii = hrefs.length; i < ii; i++) { - columns[i] && columns[i].attr("href", hrefs[i]); - } - return this; - }; chart.hover = function (fin, fout) { !dots && createDots(); dots.mouseover(fin).mouseout(fout); g.raphael/g.scatter.js @@ -69,6 +69,12 @@ function sh(values, dim) { /* TODO DELETEME DEBUGGING XXX */ function gaussian_dist_sanity_check(canvas) { + //some interesting variance matrices: + // [[1,0],[0,1]] #even scatter + // [[20,0],[0,1]] #squished horizontally + // [[1,0],[0,20]] #squished vertically + // [[2,-1],[-2,1]] #diagonal left + // [[2,1],[-2,1]] #diagonal right var weight = eval($("#weight").val()); var mus = eval($("#mus").val()); var vars = eval($("#vars").val()); @@ -84,8 +90,7 @@ function gaussian_dist_sanity_check(canvas) { r.remove(); r = Raphael("gaussian", 500, 500); - opts = {nostroke: true, axis: "0 0 1 1", symbol: "o"} - //axminx: .8, axmaxx: 1.2, axminy: .8, axmaxy: 1.2}; + opts = {}//{axis: "0 0 1 1"} r.g.scatterplot(40,0,400,400, xs, ys, opts); } gmm/test.html fa39ff9f313d576c39a9b0e683a406ea8a5bca1b Bill Mill bill.mill@gmail.com http://github.com/llimllib/grabcut_js/commit/fa689a3a257807a9d1e3119c836fc7223dfe6ba1 fa689a3a257807a9d1e3119c836fc7223dfe6ba1 2009-11-06T19:04:21-08:00 2009-11-06T19:04:21-08:00 have a somewhat working scatterplot... need to figure the axes out better 0cfb311b40cbb05ca35e558e78d071a452f1e707 Bill Mill bill.mill@gmail.com