From a2f14b37873fb86943c98bdf2244665f660ab5bf Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Sun, 24 Jan 2016 22:52:27 -0800 Subject: [PATCH 1/6] getting something to show --- panoramix/static/widgets/viz_heatmap.css | 17 +++ panoramix/static/widgets/viz_heatmap.js | 152 +++++++++++++++++++++++ panoramix/viz.py | 33 +++++ 3 files changed, 202 insertions(+) create mode 100644 panoramix/static/widgets/viz_heatmap.css create mode 100644 panoramix/static/widgets/viz_heatmap.js diff --git a/panoramix/static/widgets/viz_heatmap.css b/panoramix/static/widgets/viz_heatmap.css new file mode 100644 index 000000000000..10b7c26918fa --- /dev/null +++ b/panoramix/static/widgets/viz_heatmap.css @@ -0,0 +1,17 @@ +.heatmap .axis text { + font: 10px sans-serif; +} + +.heatmap .axis path, +.heatmap .axis line { + fill: none; + stroke: #000; + shape-rendering: crispEdges; +} + +.heatmap svg { + cursor: move; +} +.heatmap .axis .tick:first-child { + display: none; +} diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js new file mode 100644 index 000000000000..7e28de7616b5 --- /dev/null +++ b/panoramix/static/widgets/viz_heatmap.js @@ -0,0 +1,152 @@ +// Inspired from http://bl.ocks.org/mbostock/3074470 +px.registerViz('heatmap', function(slice) { + function refresh() { + d3.json("https://gist.githubusercontent.com/mbostock/3074470/raw/c028fa03cde541bbd7fdcaa27e61f6332af3b556/heatmap.json", function(error, heatmap) { + if (error) { + slice.error(error); + return; + } + var X = 0, Y = 1; + var canvasDim = [slice.width(), slice.height()]; + var canvasAspect = canvasDim[Y] / canvasDim[X]; + var heatmapDim = [heatmap[X].length, heatmap.length]; + var heatmapAspect = heatmapDim[Y] / heatmapDim[X]; + + if (heatmapAspect < canvasAspect) + canvasDim[Y] = canvasDim[X] * heatmapAspect; + else + canvasDim[X] = canvasDim[Y] / heatmapAspect; + + var color = d3.scale.linear() + .domain([95, 115, 135, 155, 175, 195]) + .range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]); + + var scale = [ + d3.scale.linear() + .domain([0, heatmapDim[X]]) + .range([0, canvasDim[X]]), + d3.scale.linear() + .domain([0, heatmapDim[Y]]) + .range([canvasDim[Y], 0]) + ]; + + var container = d3.select(slice.selector); + + var canvas = container.append("canvas") + .attr("width", heatmapDim[X]) + .attr("height", heatmapDim[Y]) + .style("width", canvasDim[X] + "px") + .style("height", canvasDim[Y] + "px") + .style("position", "absolute"); + + var svg = container.append("svg") + .attr("width", canvasDim[X]) + .attr("height", canvasDim[Y]) + .style("position", "relative"); + + var tip = d3.tip() + .attr('class', 'd3-tip') + .offset([10, 0]) + .html(function (d) { + var k = d3.mouse(this); + var m = Math.floor(scale[X].invert(k[0])) + var n = Math.floor(scale[Y].invert(k[1])) + return "Intensity Count: " + heatmap[n][m]; + }) + svg.call(tip); + + var zoom = d3.behavior.zoom() + .center(canvasDim.map( + function(v) {return v / 2})) + .scaleExtent([1, 10]) + .x(scale[X]) + .y(scale[Y]) + .on("zoom", zoomEvent); + + svg.append("rect") + .style("pointer-events", "all") + .attr("width", canvasDim[X]) + .attr("height", canvasDim[Y]) + .attr("id", "mycanvas") + .style("fill", "none") + .call(zoom); + + var axis = [ + d3.svg.axis() + .scale(scale[X]) + .orient("top"), + d3.svg.axis() + .scale(scale[Y]) + .orient("right") + ]; + + var axisElement = [ + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(-1," + (canvasDim[Y]-1) + ")"), + svg.append("g") + .attr("class", "y axis") + ]; + + svg.on('mousemove', tip.show); //Added + svg.on('mouseout', tip.hide); //Added + + var context = canvas.node().getContext("2d"); + var imageObj; + var imageDim; + var imageScale; + createImageObj(); + drawAxes(); + + // Compute the pixel colors; scaled by CSS. + function createImageObj() { + imageObj = new Image(); + var image = context.createImageData(heatmapDim[X], heatmapDim[Y]); + + for (var y = 0, p = -1; y < heatmapDim[Y]; ++y) { + for (var x = 0; x < heatmapDim[X]; ++x) { + //console.log("heatmap x and y :: ",x,y,heatmap[y][x]); + var c = d3.rgb(color(heatmap[y][x])); + image.data[++p] = c.r; + image.data[++p] = c.g; + image.data[++p] = c.b; + image.data[++p] = 255; + } + } + context.putImageData(image, 0, 0); + imageObj.src = canvas.node().toDataURL(); + imageDim = [imageObj.width, imageObj.height]; + imageScale = imageDim.map( + function(v, i){return v / canvasDim[i]}); + } + + function drawAxes() { + axisElement.forEach(function(v, i) {v.call(axis[i])}); + } + + function zoomEvent() { + var s = d3.event.scale; + var n = imageDim.map( + function(v) {return v * s}); + var t = d3.event.translate.map(function(v, i) { + return Math.min( + 0, + Math.max(v, canvasDim[i] - n[i] / imageScale[i])); + }); + zoom.translate(t); + var it = t.map( + function(v, i) {return v * imageScale[i]}); + context.clearRect(0, 0, canvasDim[X], canvasDim[Y]); + context.drawImage(imageObj, it[X], it[Y], n[X], n[Y]); + drawAxes(); + } + + }); + slice.done(); + } + return { + render: refresh, + resize: refresh, + }; +}); + diff --git a/panoramix/viz.py b/panoramix/viz.py index f81f7ba44255..d82443b77ef7 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -1190,6 +1190,38 @@ def get_json_data(self): df = df[[self.form_data.get('series')] + self.form_data.get('metrics')] return df.to_json(orient="records") +class HeatmapViz(BaseViz): + viz_type = "heatmap" + verbose_name = "Heatmap" + is_timeseries = False + js_files = ['lib/d3.tip.js', 'widgets/viz_heatmap.js'] + css_files = ['lib/d3.tip.css', 'widgets/viz_heatmap.css'] + fieldsets = ( + { + 'label': None, + 'fields': ( + 'granularity', + ('since', 'until'), + 'metric', + 'x', + 'y', + ) + },) + def query_obj(self): + d = super(HeatmapViz, self).query_obj() + fd = self.form_data + d['metrics'] = fd.get('metrics') + second = fd.get('secondary_metric') + if second not in d['metrics']: + d['metrics'] += [second] + d['groupby'] = [fd.get('series')] + return d + + def get_json_data(self): + df = self.get_df() + df = df[[self.form_data.get('series')] + self.form_data.get('metrics')] + return df.to_json(orient="records") + viz_types_list = [ TableViz, @@ -1211,6 +1243,7 @@ def get_json_data(self): FilterBoxViz, IFrameViz, ParallelCoordinatesViz, + HeatmapViz, ] viz_types = OrderedDict([(v.viz_type, v) for v in viz_types_list]) From 0f58c609d010aa20a2f411e21a6a3738db456349 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Tue, 26 Jan 2016 12:57:12 -0800 Subject: [PATCH 2/6] Heatmap --- panoramix/forms.py | 8 + panoramix/static/lib/d3.tip.css | 55 ++++ panoramix/static/lib/d3.tip.js | 324 +++++++++++++++++++++++ panoramix/static/widgets/viz_heatmap.css | 10 +- panoramix/static/widgets/viz_heatmap.js | 123 ++++++--- panoramix/viz.py | 18 +- 6 files changed, 491 insertions(+), 47 deletions(-) create mode 100644 panoramix/static/lib/d3.tip.css create mode 100644 panoramix/static/lib/d3.tip.js diff --git a/panoramix/forms.py b/panoramix/forms.py index e175cb42b6cb..bd3c3cc6474e 100644 --- a/panoramix/forms.py +++ b/panoramix/forms.py @@ -142,6 +142,14 @@ def __init__(self, viz): 'Columns', choices=self.choicify(datasource.column_names), description="Columns to display"), + 'all_columns_x': SelectField( + 'X', + choices=self.choicify(datasource.column_names), + description="Columns to display"), + 'all_columns_y': SelectField( + 'Y', + choices=self.choicify(datasource.column_names), + description="Columns to display"), 'granularity': FreeFormSelectField( 'Time Granularity', default="one day", choices=self.choicify([ diff --git a/panoramix/static/lib/d3.tip.css b/panoramix/static/lib/d3.tip.css new file mode 100644 index 000000000000..fc9a4ecdeacc --- /dev/null +++ b/panoramix/static/lib/d3.tip.css @@ -0,0 +1,55 @@ +.d3-tip { + line-height: 1; + font-weight: bold; + padding: 12px; + background: rgba(0, 0, 0, 0.8); + color: #fff; + border-radius: 2px; + pointer-events: none; +} + +/* Creates a small triangle extender for the tooltip */ +.d3-tip:after { + box-sizing: border-box; + display: inline; + font-size: 10px; + width: 100%; + line-height: 1; + color: rgba(0, 0, 0, 0.8); + position: absolute; + pointer-events: none; +} + +/* Northward tooltips */ +.d3-tip.n:after { + content: "\25BC"; + margin: -1px 0 0 0; + top: 100%; + left: 0; + text-align: center; +} + +/* Eastward tooltips */ +.d3-tip.e:after { + content: "\25C0"; + margin: -4px 0 0 0; + top: 50%; + left: -8px; +} + +/* Southward tooltips */ +.d3-tip.s:after { + content: "\25B2"; + margin: 0 0 1px 0; + top: -8px; + left: 0; + text-align: center; +} + +/* Westward tooltips */ +.d3-tip.w:after { + content: "\25B6"; + margin: -4px 0 0 -1px; + top: 50%; + left: 100%; +} diff --git a/panoramix/static/lib/d3.tip.js b/panoramix/static/lib/d3.tip.js new file mode 100644 index 000000000000..13e146b689cf --- /dev/null +++ b/panoramix/static/lib/d3.tip.js @@ -0,0 +1,324 @@ +// d3.tip +// Copyright (c) 2013 Justin Palmer +// +// Tooltips for d3.js SVG visualizations + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module with d3 as a dependency. + define(['d3'], factory) + } else if (typeof module === 'object' && module.exports) { + // CommonJS + module.exports = function(d3) { + d3.tip = factory(d3) + return d3.tip + } + } else { + // Browser global. + root.d3.tip = factory(root.d3) + } +}(this, function (d3) { + + // Public - contructs a new tooltip + // + // Returns a tip + return function() { + var direction = d3_tip_direction, + offset = d3_tip_offset, + html = d3_tip_html, + node = initNode(), + svg = null, + point = null, + target = null + + function tip(vis) { + svg = getSVGNode(vis) + point = svg.createSVGPoint() + document.body.appendChild(node) + } + + // Public - show the tooltip on the screen + // + // Returns a tip + tip.show = function() { + var args = Array.prototype.slice.call(arguments) + if(args[args.length - 1] instanceof SVGElement) target = args.pop() + + var content = html.apply(this, args), + poffset = offset.apply(this, args), + dir = direction.apply(this, args), + nodel = getNodeEl(), + i = directions.length, + coords, + scrollTop = document.documentElement.scrollTop || document.body.scrollTop, + scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft + + nodel.html(content) + .style({ opacity: 1, 'pointer-events': 'all' }) + + while(i--) nodel.classed(directions[i], false) + coords = direction_callbacks.get(dir).apply(this) + nodel.classed(dir, true).style({ + top: (coords.top + poffset[0]) + scrollTop + 'px', + left: (coords.left + poffset[1]) + scrollLeft + 'px' + }) + + return tip + } + + // Public - hide the tooltip + // + // Returns a tip + tip.hide = function() { + var nodel = getNodeEl() + nodel.style({ opacity: 0, 'pointer-events': 'none' }) + return tip + } + + // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. + // + // n - name of the attribute + // v - value of the attribute + // + // Returns tip or attribute value + tip.attr = function(n, v) { + if (arguments.length < 2 && typeof n === 'string') { + return getNodeEl().attr(n) + } else { + var args = Array.prototype.slice.call(arguments) + d3.selection.prototype.attr.apply(getNodeEl(), args) + } + + return tip + } + + // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. + // + // n - name of the property + // v - value of the property + // + // Returns tip or style property value + tip.style = function(n, v) { + if (arguments.length < 2 && typeof n === 'string') { + return getNodeEl().style(n) + } else { + var args = Array.prototype.slice.call(arguments) + d3.selection.prototype.style.apply(getNodeEl(), args) + } + + return tip + } + + // Public: Set or get the direction of the tooltip + // + // v - One of n(north), s(south), e(east), or w(west), nw(northwest), + // sw(southwest), ne(northeast) or se(southeast) + // + // Returns tip or direction + tip.direction = function(v) { + if (!arguments.length) return direction + direction = v == null ? v : d3.functor(v) + + return tip + } + + // Public: Sets or gets the offset of the tip + // + // v - Array of [x, y] offset + // + // Returns offset or + tip.offset = function(v) { + if (!arguments.length) return offset + offset = v == null ? v : d3.functor(v) + + return tip + } + + // Public: sets or gets the html value of the tooltip + // + // v - String value of the tip + // + // Returns html value or tip + tip.html = function(v) { + if (!arguments.length) return html + html = v == null ? v : d3.functor(v) + + return tip + } + + // Public: destroys the tooltip and removes it from the DOM + // + // Returns a tip + tip.destroy = function() { + if(node) { + getNodeEl().remove(); + node = null; + } + return tip; + } + + function d3_tip_direction() { return 'n' } + function d3_tip_offset() { return [0, 0] } + function d3_tip_html() { return ' ' } + + var direction_callbacks = d3.map({ + n: direction_n, + s: direction_s, + e: direction_e, + w: direction_w, + nw: direction_nw, + ne: direction_ne, + sw: direction_sw, + se: direction_se + }), + + directions = direction_callbacks.keys() + + function direction_n() { + var bbox = getScreenBBox() + return { + top: bbox.n.y - node.offsetHeight, + left: bbox.n.x - node.offsetWidth / 2 + } + } + + function direction_s() { + var bbox = getScreenBBox() + return { + top: bbox.s.y, + left: bbox.s.x - node.offsetWidth / 2 + } + } + + function direction_e() { + var bbox = getScreenBBox() + return { + top: bbox.e.y - node.offsetHeight / 2, + left: bbox.e.x + } + } + + function direction_w() { + var bbox = getScreenBBox() + return { + top: bbox.w.y - node.offsetHeight / 2, + left: bbox.w.x - node.offsetWidth + } + } + + function direction_nw() { + var bbox = getScreenBBox() + return { + top: bbox.nw.y - node.offsetHeight, + left: bbox.nw.x - node.offsetWidth + } + } + + function direction_ne() { + var bbox = getScreenBBox() + return { + top: bbox.ne.y - node.offsetHeight, + left: bbox.ne.x + } + } + + function direction_sw() { + var bbox = getScreenBBox() + return { + top: bbox.sw.y, + left: bbox.sw.x - node.offsetWidth + } + } + + function direction_se() { + var bbox = getScreenBBox() + return { + top: bbox.se.y, + left: bbox.e.x + } + } + + function initNode() { + var node = d3.select(document.createElement('div')) + node.style({ + position: 'absolute', + top: 0, + opacity: 0, + 'pointer-events': 'none', + 'box-sizing': 'border-box' + }) + + return node.node() + } + + function getSVGNode(el) { + el = el.node() + if(el.tagName.toLowerCase() === 'svg') + return el + + return el.ownerSVGElement + } + + function getNodeEl() { + if(node === null) { + node = initNode(); + // re-add node to DOM + document.body.appendChild(node); + }; + return d3.select(node); + } + + // Private - gets the screen coordinates of a shape + // + // Given a shape on the screen, will return an SVGPoint for the directions + // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), + // sw(southwest). + // + // +-+-+ + // | | + // + + + // | | + // +-+-+ + // + // Returns an Object {n, s, e, w, nw, sw, ne, se} + function getScreenBBox() { + var targetel = target || d3.event.target; + + while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) { + targetel = targetel.parentNode; + } + + var bbox = {}, + matrix = targetel.getScreenCTM(), + tbbox = targetel.getBBox(), + width = tbbox.width, + height = tbbox.height, + x = tbbox.x, + y = tbbox.y + + point.x = x + point.y = y + bbox.nw = point.matrixTransform(matrix) + point.x += width + bbox.ne = point.matrixTransform(matrix) + point.y += height + bbox.se = point.matrixTransform(matrix) + point.x -= width + bbox.sw = point.matrixTransform(matrix) + point.y -= height / 2 + bbox.w = point.matrixTransform(matrix) + point.x += width + bbox.e = point.matrixTransform(matrix) + point.x -= width / 2 + point.y -= height / 2 + bbox.n = point.matrixTransform(matrix) + point.y += height + bbox.s = point.matrixTransform(matrix) + + return bbox + } + + return tip + }; + +})); diff --git a/panoramix/static/widgets/viz_heatmap.css b/panoramix/static/widgets/viz_heatmap.css index 10b7c26918fa..89629b5ce19a 100644 --- a/panoramix/static/widgets/viz_heatmap.css +++ b/panoramix/static/widgets/viz_heatmap.css @@ -12,6 +12,12 @@ .heatmap svg { cursor: move; } -.heatmap .axis .tick:first-child { - display: none; + +.heatmap canvas, .heatmap img { + image-rendering: optimizeSpeed; /* Older versions of FF */ + image-rendering: -moz-crisp-edges; /* FF 6.0+ */ + image-rendering: -webkit-optimize-contrast; /* Safari */ + image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ + image-rendering: pixelated; /* Awesome future-browsers */ + -ms-interpolation-mode: nearest-neighbor; /* IE */ } diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js index 7e28de7616b5..0d8faf71db23 100644 --- a/panoramix/static/widgets/viz_heatmap.js +++ b/panoramix/static/widgets/viz_heatmap.js @@ -1,25 +1,45 @@ // Inspired from http://bl.ocks.org/mbostock/3074470 +// https://jsfiddle.net/cyril123/h0reyumq/ px.registerViz('heatmap', function(slice) { function refresh() { - d3.json("https://gist.githubusercontent.com/mbostock/3074470/raw/c028fa03cde541bbd7fdcaa27e61f6332af3b556/heatmap.json", function(error, heatmap) { - if (error) { - slice.error(error); - return; + var width = slice.width(); + var height = slice.height(); + d3.json(slice.jsonEndpoint(), function(error, payload) { + var matrix = {}; + if (error){ + slice.error(error.responseText); + return ''; } + var heatmap = payload.data; + function ordScale(k, rangeBands, reverse) { + if (reverse === undefined) + reverse = false; + domain = {}; + $.each(heatmap, function(i, d){ + domain[d[k]] = true; + }); + domain = Object.keys(domain).sort(); + if (reverse) + domain.reverse(); + if (rangeBands === undefined) { + return d3.scale.ordinal().domain(domain).range(d3.range(domain.length)); + } + else { + return d3.scale.ordinal().domain(domain).rangeBands(rangeBands); + } + } + var xScale = ordScale('x'); + var yScale = ordScale('y', undefined, true); + var xRbScale = ordScale('x', [0, width]); + var yRbScale = ordScale('y', [height, 0]); var X = 0, Y = 1; - var canvasDim = [slice.width(), slice.height()]; - var canvasAspect = canvasDim[Y] / canvasDim[X]; - var heatmapDim = [heatmap[X].length, heatmap.length]; - var heatmapAspect = heatmapDim[Y] / heatmapDim[X]; - - if (heatmapAspect < canvasAspect) - canvasDim[Y] = canvasDim[X] * heatmapAspect; - else - canvasDim[X] = canvasDim[Y] / heatmapAspect; + var canvasDim = [width, height]; + var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length]; + ext = d3.extent(heatmap, function(d){return d.v;}); var color = d3.scale.linear() - .domain([95, 115, 135, 155, 175, 195]) - .range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]); + .domain(ext) + .range(["#fff", "#000"]); var scale = [ d3.scale.linear() @@ -35,6 +55,7 @@ px.registerViz('heatmap', function(slice) { var canvas = container.append("canvas") .attr("width", heatmapDim[X]) .attr("height", heatmapDim[Y]) + .attr("image-rendering", "pixelated") .style("width", canvasDim[X] + "px") .style("height", canvasDim[Y] + "px") .style("position", "absolute"); @@ -44,16 +65,27 @@ px.registerViz('heatmap', function(slice) { .attr("height", canvasDim[Y]) .style("position", "relative"); - var tip = d3.tip() - .attr('class', 'd3-tip') - .offset([10, 0]) - .html(function (d) { - var k = d3.mouse(this); - var m = Math.floor(scale[X].invert(k[0])) - var n = Math.floor(scale[Y].invert(k[1])) - return "Intensity Count: " + heatmap[n][m]; - }) - svg.call(tip); + var tip = d3.tip() + .attr('class', 'd3-tip') + .offset(function(){ + var k = d3.mouse(this); + var x = k[0] - (width / 2); + return [k[1] - 15, x]; + }) + .html(function (d) { + var k = d3.mouse(this); + var m = Math.floor(scale[0].invert(k[0])); + var n = Math.floor(scale[1].invert(k[1])); + var obj = matrix[m][n]; + if (obj !== undefined) { + var s = ""; + s += "
X: " + obj.x + "
" + s += "
Y: " + obj.y + "
" + s += "
V: " + obj.v + "
" + return s; + } + }) + svg.call(tip); var zoom = d3.behavior.zoom() .center(canvasDim.map( @@ -73,10 +105,10 @@ px.registerViz('heatmap', function(slice) { var axis = [ d3.svg.axis() - .scale(scale[X]) + .scale(xRbScale) .orient("top"), d3.svg.axis() - .scale(scale[Y]) + .scale(yRbScale) .orient("right") ]; @@ -88,10 +120,11 @@ px.registerViz('heatmap', function(slice) { .attr("class", "y axis") ]; - svg.on('mousemove', tip.show); //Added - svg.on('mouseout', tip.hide); //Added + svg.on('mousemove', tip.show); + svg.on('mouseout', tip.hide); var context = canvas.node().getContext("2d"); + context.imageSmoothingEnabled = false; var imageObj; var imageDim; var imageScale; @@ -101,17 +134,31 @@ px.registerViz('heatmap', function(slice) { // Compute the pixel colors; scaled by CSS. function createImageObj() { imageObj = new Image(); - var image = context.createImageData(heatmapDim[X], heatmapDim[Y]); + image = context.createImageData(heatmapDim[0], heatmapDim[1]); + var pixs = {}; + $.each(heatmap, function(i, d) { + var c = d3.rgb(color(d.v)); + var x = xScale(d.x); + var y = yScale(d.y); + pixs[x + (y*xScale.domain().length)] = c; + if (matrix[x] === undefined) + matrix[x] = {} + if (matrix[x][y] === undefined) + matrix[x][y] = d; + }); - for (var y = 0, p = -1; y < heatmapDim[Y]; ++y) { - for (var x = 0; x < heatmapDim[X]; ++x) { - //console.log("heatmap x and y :: ",x,y,heatmap[y][x]); - var c = d3.rgb(color(heatmap[y][x])); + p = -1; + for(var i=0; i< heatmapDim[0] * heatmapDim[1]; i++){ + c = pixs[i]; + var alpha = 255; + if (c === undefined){ + c = d3.rgb('#F00'); + alpha = 0; + } image.data[++p] = c.r; image.data[++p] = c.g; image.data[++p] = c.b; - image.data[++p] = 255; - } + image.data[++p] = alpha; } context.putImageData(image, 0, 0); imageObj.src = canvas.node().toDataURL(); @@ -121,7 +168,9 @@ px.registerViz('heatmap', function(slice) { } function drawAxes() { - axisElement.forEach(function(v, i) {v.call(axis[i])}); + console.log(scale[0].domain()); + axisElement[0].call(axis[0]); + axisElement[1].call(axis[1]); } function zoomEvent() { diff --git a/panoramix/viz.py b/panoramix/viz.py index d82443b77ef7..5adc429c23d3 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -1202,24 +1202,26 @@ class HeatmapViz(BaseViz): 'fields': ( 'granularity', ('since', 'until'), + 'all_columns_x', + 'all_columns_y', 'metric', - 'x', - 'y', ) },) def query_obj(self): d = super(HeatmapViz, self).query_obj() fd = self.form_data - d['metrics'] = fd.get('metrics') - second = fd.get('secondary_metric') - if second not in d['metrics']: - d['metrics'] += [second] - d['groupby'] = [fd.get('series')] + d['metrics'] = [fd.get('metric')] + d['groupby'] = [fd.get('all_columns_x'), fd.get('all_columns_y')] return d def get_json_data(self): df = self.get_df() - df = df[[self.form_data.get('series')] + self.form_data.get('metrics')] + df = df[[ + self.form_data.get('all_columns_x'), + self.form_data.get('all_columns_y'), + self.form_data.get('metric') + ]] + df.columns = ['x', 'y', 'v'] return df.to_json(orient="records") From 09c77242fc923856425f0571558dcfbe911eaafd Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Tue, 26 Jan 2016 23:17:58 -0800 Subject: [PATCH 3/6] Working without zoom --- panoramix/static/lib/d3.tip.css | 2 +- panoramix/static/widgets/viz_heatmap.css | 1 - panoramix/static/widgets/viz_heatmap.js | 151 ++++++++++------------- 3 files changed, 69 insertions(+), 85 deletions(-) diff --git a/panoramix/static/lib/d3.tip.css b/panoramix/static/lib/d3.tip.css index fc9a4ecdeacc..bb9a5451a99b 100644 --- a/panoramix/static/lib/d3.tip.css +++ b/panoramix/static/lib/d3.tip.css @@ -1,6 +1,6 @@ .d3-tip { line-height: 1; - font-weight: bold; + font-size: 12px; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; diff --git a/panoramix/static/widgets/viz_heatmap.css b/panoramix/static/widgets/viz_heatmap.css index 89629b5ce19a..8f09a346692a 100644 --- a/panoramix/static/widgets/viz_heatmap.css +++ b/panoramix/static/widgets/viz_heatmap.css @@ -10,7 +10,6 @@ } .heatmap svg { - cursor: move; } .heatmap canvas, .heatmap img { diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js index 0d8faf71db23..ee06b636b853 100644 --- a/panoramix/static/widgets/viz_heatmap.js +++ b/panoramix/static/widgets/viz_heatmap.js @@ -1,21 +1,25 @@ // Inspired from http://bl.ocks.org/mbostock/3074470 // https://jsfiddle.net/cyril123/h0reyumq/ px.registerViz('heatmap', function(slice) { + var margins = {t:0, r:0, b:50, l:50}; function refresh() { var width = slice.width(); var height = slice.height(); + var hmWidth = width - (margins.l + margins.r) + var hmHeight = height - (margins.b + margins.t) d3.json(slice.jsonEndpoint(), function(error, payload) { var matrix = {}; if (error){ slice.error(error.responseText); return ''; } - var heatmap = payload.data; + var fd = payload.form_data; + var data = payload.data; function ordScale(k, rangeBands, reverse) { if (reverse === undefined) reverse = false; domain = {}; - $.each(heatmap, function(i, d){ + $.each(data, function(i, d){ domain[d[k]] = true; }); domain = Object.keys(domain).sort(); @@ -30,98 +34,106 @@ px.registerViz('heatmap', function(slice) { } var xScale = ordScale('x'); var yScale = ordScale('y', undefined, true); - var xRbScale = ordScale('x', [0, width]); - var yRbScale = ordScale('y', [height, 0]); + var xRbScale = ordScale('x', [0, hmWidth]); + var yRbScale = ordScale('y', [hmHeight, 0]); var X = 0, Y = 1; - var canvasDim = [width, height]; var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length]; - ext = d3.extent(heatmap, function(d){return d.v;}); - var color = d3.scale.linear() - .domain(ext) - .range(["#fff", "#000"]); + ext = d3.extent(data, function(d){return d.v;}); + function colorScalerFactory(colors, data, accessor){ + var ext = d3.extent(data, accessor); + var points = []; + var chunkSize = (ext[1] - ext[0]) / colors.length; + $.each(colors, function(i, c){ + points.push(i * chunkSize) + }); + return d3.scale.linear().domain(points).range(colors); + } + var color = colorScalerFactory(['white', 'yellow', 'red', 'black'], data, function(d){return d.v}); + var scale = [ d3.scale.linear() .domain([0, heatmapDim[X]]) - .range([0, canvasDim[X]]), + .range([0, hmWidth]), d3.scale.linear() .domain([0, heatmapDim[Y]]) - .range([canvasDim[Y], 0]) + .range([0, hmHeight]) ]; - var container = d3.select(slice.selector); + var container = d3.select(slice.selector) + .style("left", "0px") + .style("position", "relative") + .style("top", "0px"); var canvas = container.append("canvas") .attr("width", heatmapDim[X]) .attr("height", heatmapDim[Y]) - .attr("image-rendering", "pixelated") - .style("width", canvasDim[X] + "px") - .style("height", canvasDim[Y] + "px") + .style("width", hmWidth + "px") + .style("height", hmHeight + "px") + .style("left", margins.l + "px") + .style("top", margins.t + "px") .style("position", "absolute"); var svg = container.append("svg") - .attr("width", canvasDim[X]) - .attr("height", canvasDim[Y]) - .style("position", "relative"); + .attr("width", width) + .attr("height", height) + .style("left", "0px") + .style("top", "0px") + .style("position", "absolute"); + + var rect = svg.append('g') + .attr("transform", "translate(" + margins.l + "," + margins.t + ")") + .append('rect') + .style('fill-opacity', 0) + .attr('stroke', 'black') + .attr("width", hmWidth) + .attr("height", hmHeight); var tip = d3.tip() .attr('class', 'd3-tip') .offset(function(){ var k = d3.mouse(this); - var x = k[0] - (width / 2); - return [k[1] - 15, x]; + var x = k[0] - (hmWidth/ 2); + return [k[1] - 20, x]; }) .html(function (d) { var k = d3.mouse(this); var m = Math.floor(scale[0].invert(k[0])); var n = Math.floor(scale[1].invert(k[1])); - var obj = matrix[m][n]; - if (obj !== undefined) { + if(m in matrix && n in matrix[m]) { + var obj = matrix[m][n]; var s = ""; - s += "
X: " + obj.x + "
" - s += "
Y: " + obj.y + "
" - s += "
V: " + obj.v + "
" + s += "
" + fd.all_columns_x + ": " + obj.x + "
" + s += "
" + fd.all_columns_y +": " + obj.y + "
" + s += "
" + fd.metric + ": " + obj.v + "
" return s; } }) - svg.call(tip); - - var zoom = d3.behavior.zoom() - .center(canvasDim.map( - function(v) {return v / 2})) - .scaleExtent([1, 10]) - .x(scale[X]) - .y(scale[Y]) - .on("zoom", zoomEvent); - - svg.append("rect") - .style("pointer-events", "all") - .attr("width", canvasDim[X]) - .attr("height", canvasDim[Y]) - .attr("id", "mycanvas") - .style("fill", "none") - .call(zoom); - - var axis = [ - d3.svg.axis() + rect.call(tip); + + xAxis = d3.svg.axis() .scale(xRbScale) - .orient("top"), - d3.svg.axis() + .orient("bottom"); + yAxis = d3.svg.axis() .scale(yRbScale) - .orient("right") - ]; + .orient("left"); - var axisElement = [ svg.append("g") .attr("class", "x axis") - .attr("transform", "translate(-1," + (canvasDim[Y]-1) + ")"), + .attr("transform", "translate(" + margins.l + "," + (margins.t + hmHeight) + ")") + .call(xAxis) + .selectAll("text") + .style("text-anchor", "end") + .attr("transform", "rotate(-45)") + .style("font-weight", "bold"); svg.append("g") .attr("class", "y axis") - ]; + .attr("transform", "translate(" + margins.l + ", 0)") + .call(yAxis); - svg.on('mousemove', tip.show); - svg.on('mouseout', tip.hide); + rect.on('mousemove', tip.show); + rect.on('mouseout', tip.hide); var context = canvas.node().getContext("2d"); context.imageSmoothingEnabled = false; @@ -129,14 +141,13 @@ px.registerViz('heatmap', function(slice) { var imageDim; var imageScale; createImageObj(); - drawAxes(); // Compute the pixel colors; scaled by CSS. function createImageObj() { imageObj = new Image(); image = context.createImageData(heatmapDim[0], heatmapDim[1]); var pixs = {}; - $.each(heatmap, function(i, d) { + $.each(data, function(i, d) { var c = d3.rgb(color(d.v)); var x = xScale(d.x); var y = yScale(d.y); @@ -162,36 +173,10 @@ px.registerViz('heatmap', function(slice) { } context.putImageData(image, 0, 0); imageObj.src = canvas.node().toDataURL(); - imageDim = [imageObj.width, imageObj.height]; - imageScale = imageDim.map( - function(v, i){return v / canvasDim[i]}); - } - - function drawAxes() { - console.log(scale[0].domain()); - axisElement[0].call(axis[0]); - axisElement[1].call(axis[1]); - } - - function zoomEvent() { - var s = d3.event.scale; - var n = imageDim.map( - function(v) {return v * s}); - var t = d3.event.translate.map(function(v, i) { - return Math.min( - 0, - Math.max(v, canvasDim[i] - n[i] / imageScale[i])); - }); - zoom.translate(t); - var it = t.map( - function(v, i) {return v * imageScale[i]}); - context.clearRect(0, 0, canvasDim[X], canvasDim[Y]); - context.drawImage(imageObj, it[X], it[Y], n[X], n[Y]); - drawAxes(); } + slice.done(); }); - slice.done(); } return { render: refresh, From 40b28d0afa5896237162f45763296e462b083fac Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Wed, 27 Jan 2016 08:50:39 -0800 Subject: [PATCH 4/6] Allowing different color schemes --- panoramix/forms.py | 18 +++++++++ panoramix/static/panoramix.js | 45 ++++++++++++++++++----- panoramix/static/widgets/viz_heatmap.js | 19 ++++------ panoramix/static/widgets/viz_nvd3.js | 2 +- panoramix/static/widgets/viz_wordcloud.js | 2 +- panoramix/viz.py | 22 ++++++++--- 6 files changed, 79 insertions(+), 29 deletions(-) diff --git a/panoramix/forms.py b/panoramix/forms.py index bd3c3cc6474e..df9e2ff40335 100644 --- a/panoramix/forms.py +++ b/panoramix/forms.py @@ -110,6 +110,24 @@ def __init__(self, viz): ['stack', 'stream', 'expand']), default='stack', description=""), + 'linear_color_scheme': SelectField( + 'Color Scheme', choices=self.choicify([ + 'fire', 'blue_white_yellow', 'white_black', + 'black_white']), + default='fire', + description=""), + 'xscale_interval': SelectField( + 'XScale Interval', choices=self.choicify(range(1, 50)), + default='1', + description=( + "Number of step to take between ticks when " + "printing the x scale")), + 'yscale_interval': SelectField( + 'YScale Interval', choices=self.choicify(range(1, 50)), + default='1', + description=( + "Number of step to take between ticks when " + "printing the y scale")), 'bar_stacked': BetterBooleanField( 'Stacked Bars', default=False, diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js index 676cb1bea70c..be0f71da6a78 100644 --- a/panoramix/static/panoramix.js +++ b/panoramix/static/panoramix.js @@ -1,23 +1,50 @@ -var px = (function() { - - var visualizations = {}; - var dashboard = undefined; - +var color = function(){ + // Color related utility functions go in this object var bnbColors = [ //rausch hackb kazan babu lima beach barol '#ff5a5f', '#7b0051', '#007A87', '#00d1c1', '#8ce071', '#ffb400', '#b4a76c', '#ff8083', '#cc0086', '#00a1b3', '#00ffeb', '#bbedab', '#ffd266', '#cbc29a', '#ff3339', '#ff1ab1', '#005c66', '#00b3a5', '#55d12e', '#b37e00', '#988b4e', ]; - function colorBnb() { + var spectrums = { + 'fire': ['white', 'yellow', 'red', 'black'], + 'blue_white_yellow': ['#00d1c1', 'white', '#ffb400'], + 'white_black': ['white', 'black'], + 'black_white': ['black', 'white'], + } + var colorBnb = function() { // Color factory var seen = {}; return function(s){ if(seen[s] === undefined) seen[s] = Object.keys(seen).length; - return bnbColors[seen[s] % bnbColors.length]; + return this.bnbColors[seen[s] % this.bnbColors.length]; }; + }; + colorScalerFactory = function (colors, data, accessor){ + // Returns a linear scaler our of an array of color + if(!Array.isArray(colors)) + colors = spectrums[colors]; + var ext = d3.extent(data, accessor); + var points = []; + var chunkSize = (ext[1] - ext[0]) / colors.length; + $.each(colors, function(i, c){ + points.push(i * chunkSize) + }); + return d3.scale.linear().domain(points).range(colors); } + return { + bnbColors: bnbColors, + category21: colorBnb(), + colorScalerFactory: colorScalerFactory, + } +}; + +var px = (function() { + + var visualizations = {}; + var dashboard = undefined; + function UTC(dttm){ return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds()); @@ -488,8 +515,6 @@ var px = (function() { initDashboardView: initDashboardView, formatDate: formatDate, timeFormatFactory: timeFormatFactory, - colorBnb: colorBnb, - bnbColors: bnbColors, - color: colorBnb(), + color: color(), } })(); diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js index ee06b636b853..37d9dc3df293 100644 --- a/panoramix/static/widgets/viz_heatmap.js +++ b/panoramix/static/widgets/viz_heatmap.js @@ -39,17 +39,8 @@ px.registerViz('heatmap', function(slice) { var X = 0, Y = 1; var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length]; - ext = d3.extent(data, function(d){return d.v;}); - function colorScalerFactory(colors, data, accessor){ - var ext = d3.extent(data, accessor); - var points = []; - var chunkSize = (ext[1] - ext[0]) / colors.length; - $.each(colors, function(i, c){ - points.push(i * chunkSize) - }); - return d3.scale.linear().domain(points).range(colors); - } - var color = colorScalerFactory(['white', 'yellow', 'red', 'black'], data, function(d){return d.v}); + var color = px.color.colorScalerFactory( + fd.linear_color_scheme, data, function(d){return d.v}); var scale = [ @@ -111,12 +102,18 @@ px.registerViz('heatmap', function(slice) { } }) rect.call(tip); + var xscale_skip = 2; + var yscale_skip = 2; xAxis = d3.svg.axis() .scale(xRbScale) + .tickValues(xRbScale.domain().filter( + function(d, i) { return !(i % (parseInt(fd.xscale_interval))); })) .orient("bottom"); yAxis = d3.svg.axis() .scale(yRbScale) + .tickValues(yRbScale.domain().filter( + function(d, i) { return !(i % (parseInt(fd.yscale_interval))); })) .orient("left"); svg.append("g") diff --git a/panoramix/static/widgets/viz_nvd3.js b/panoramix/static/widgets/viz_nvd3.js index f18c57ac7ceb..c2c4af3ffbad 100644 --- a/panoramix/static/widgets/viz_nvd3.js +++ b/panoramix/static/widgets/viz_nvd3.js @@ -147,7 +147,7 @@ function viz_nvd3(slice) { } chart.color(function(d, i){ - return px.color(d[colorKey]); + return px.color.category21(d[colorKey]); }); d3.select(slice.selector).append("svg") .datum(payload.data) diff --git a/panoramix/static/widgets/viz_wordcloud.js b/panoramix/static/widgets/viz_wordcloud.js index c772cc992b2e..7d35b2972188 100644 --- a/panoramix/static/widgets/viz_wordcloud.js +++ b/panoramix/static/widgets/viz_wordcloud.js @@ -49,7 +49,7 @@ px.registerViz('word_cloud', function(slice) { .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("font-family", "Impact") - .style("fill", function(d, i) {return px.color(d.text); }) + .style("fill", function(d, i) {return px.color.category21(d.text); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")"; diff --git a/panoramix/viz.py b/panoramix/viz.py index 5adc429c23d3..4c02bb9bdad0 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -1206,6 +1206,13 @@ class HeatmapViz(BaseViz): 'all_columns_y', 'metric', ) + }, + { + 'label': 'Heatmap Options', + 'fields': ( + 'linear_color_scheme', + ('xscale_interval', 'yscale_interval'), + ) },) def query_obj(self): d = super(HeatmapViz, self).query_obj() @@ -1216,12 +1223,15 @@ def query_obj(self): def get_json_data(self): df = self.get_df() - df = df[[ - self.form_data.get('all_columns_x'), - self.form_data.get('all_columns_y'), - self.form_data.get('metric') - ]] - df.columns = ['x', 'y', 'v'] + fd = self.form_data + x = fd.get('all_columns_x') + y = fd.get('all_columns_y') + v = fd.get('metric') + if x == y: + df.columns = ['x', 'y', 'v'] + else: + df = df[[x, y, v]] + df.columns = ['x', 'y', 'v'] return df.to_json(orient="records") From 0714dc62d0a6ffef61aff0d0641a1571f1740e74 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Wed, 27 Jan 2016 09:45:02 -0800 Subject: [PATCH 5/6] Added smoothening option --- panoramix/forms.py | 9 +++++++++ panoramix/static/widgets/viz_heatmap.js | 1 + panoramix/viz.py | 1 + 3 files changed, 11 insertions(+) diff --git a/panoramix/forms.py b/panoramix/forms.py index df9e2ff40335..aff476699be0 100644 --- a/panoramix/forms.py +++ b/panoramix/forms.py @@ -116,6 +116,15 @@ def __init__(self, viz): 'black_white']), default='fire', description=""), + 'canvas_image_rendering': SelectField( + 'Rendering', choices=( + ('pixelated', 'pixelated (Sharp)'), + ('auto', 'auto (Smooth)'), + ), + default='pixelated', + description=( + "image-rendering CSS attribute of the canvas object that " + "defines how the browser scales up the image")), 'xscale_interval': SelectField( 'XScale Interval', choices=self.choicify(range(1, 50)), default='1', diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js index 37d9dc3df293..7c8147765294 100644 --- a/panoramix/static/widgets/viz_heatmap.js +++ b/panoramix/static/widgets/viz_heatmap.js @@ -62,6 +62,7 @@ px.registerViz('heatmap', function(slice) { .attr("height", heatmapDim[Y]) .style("width", hmWidth + "px") .style("height", hmHeight + "px") + .style("image-rendering", fd.canvas_image_rendering) .style("left", margins.l + "px") .style("top", margins.t + "px") .style("position", "absolute"); diff --git a/panoramix/viz.py b/panoramix/viz.py index 4c02bb9bdad0..bfeb15584fca 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -1212,6 +1212,7 @@ class HeatmapViz(BaseViz): 'fields': ( 'linear_color_scheme', ('xscale_interval', 'yscale_interval'), + 'canvas_image_rendering', ) },) def query_obj(self): From 4e6e20daa4f398cdaf1c09c77afed3fbae658905 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Thu, 28 Jan 2016 13:11:45 -0800 Subject: [PATCH 6/6] Allowing for normalizing across x or y --- panoramix/forms.py | 8 ++++++++ panoramix/static/panoramix.js | 6 +++++- panoramix/static/widgets/viz_heatmap.js | 8 ++++---- panoramix/viz.py | 18 ++++++++++++++++++ 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/panoramix/forms.py b/panoramix/forms.py index aff476699be0..814fc0e97225 100644 --- a/panoramix/forms.py +++ b/panoramix/forms.py @@ -116,6 +116,14 @@ def __init__(self, viz): 'black_white']), default='fire', description=""), + 'normalize_across': SelectField( + 'Normalize Across', choices=self.choicify([ + 'heatmap', 'x', 'y']), + default='heatmap', + description=( + "Color will be rendered based on a ratio " + "of the cell against the sum of across this " + "criteria")), 'canvas_image_rendering': SelectField( 'Rendering', choices=( ('pixelated', 'pixelated (Sharp)'), diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js index be0f71da6a78..019ceacf39dc 100644 --- a/panoramix/static/panoramix.js +++ b/panoramix/static/panoramix.js @@ -25,7 +25,11 @@ var color = function(){ // Returns a linear scaler our of an array of color if(!Array.isArray(colors)) colors = spectrums[colors]; - var ext = d3.extent(data, accessor); + if(data !== undefined) + var ext = d3.extent(data, accessor); + else + var ext = [0,1]; + var points = []; var chunkSize = (ext[1] - ext[0]) / colors.length; $.each(colors, function(i, c){ diff --git a/panoramix/static/widgets/viz_heatmap.js b/panoramix/static/widgets/viz_heatmap.js index 7c8147765294..8a04ab0581ee 100644 --- a/panoramix/static/widgets/viz_heatmap.js +++ b/panoramix/static/widgets/viz_heatmap.js @@ -7,6 +7,7 @@ px.registerViz('heatmap', function(slice) { var height = slice.height(); var hmWidth = width - (margins.l + margins.r) var hmHeight = height - (margins.b + margins.t) + var fp = d3.format('.3p'); d3.json(slice.jsonEndpoint(), function(error, payload) { var matrix = {}; if (error){ @@ -39,9 +40,7 @@ px.registerViz('heatmap', function(slice) { var X = 0, Y = 1; var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length]; - var color = px.color.colorScalerFactory( - fd.linear_color_scheme, data, function(d){return d.v}); - + var color = px.color.colorScalerFactory(fd.linear_color_scheme); var scale = [ d3.scale.linear() @@ -99,6 +98,7 @@ px.registerViz('heatmap', function(slice) { s += "
" + fd.all_columns_x + ": " + obj.x + "
" s += "
" + fd.all_columns_y +": " + obj.y + "
" s += "
" + fd.metric + ": " + obj.v + "
" + s += "
%: " + fp(obj.perc) + "
" return s; } }) @@ -146,7 +146,7 @@ px.registerViz('heatmap', function(slice) { image = context.createImageData(heatmapDim[0], heatmapDim[1]); var pixs = {}; $.each(data, function(i, d) { - var c = d3.rgb(color(d.v)); + var c = d3.rgb(color(d.perc)); var x = xScale(d.x); var y = yScale(d.y); pixs[x + (y*xScale.domain().length)] = c; diff --git a/panoramix/viz.py b/panoramix/viz.py index bfeb15584fca..6fd7702f3031 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -1213,6 +1213,7 @@ class HeatmapViz(BaseViz): 'linear_color_scheme', ('xscale_interval', 'yscale_interval'), 'canvas_image_rendering', + 'normalize_across', ) },) def query_obj(self): @@ -1233,6 +1234,23 @@ def get_json_data(self): else: df = df[[x, y, v]] df.columns = ['x', 'y', 'v'] + norm = fd.get('normalize_across') + overall = False + if norm == 'heatmap': + overall = True + else: + gb = df.groupby(norm, group_keys=False) + if len(gb) <= 1: + overall = True + else: + df['perc'] = ( + gb.apply( + lambda x: (x.v - x.v.min()) / (x.v.max() - x.v.min())) + ) + if overall: + v = df.v + min_ = v.min() + df['perc'] = (v - min_) / (v.max() - min_) return df.to_json(orient="records")