From a2f2ad84da3e98d6fa51af670a7d1a4f51826243 Mon Sep 17 00:00:00 2001 From: andrewhn Date: Wed, 27 Apr 2016 01:51:01 +0700 Subject: [PATCH] add navigation, zoom to treemap (#396) * add navigation, zoom to treemap * don't use stale form data --- caravel/assets/visualizations/treemap.css | 52 +++-- caravel/assets/visualizations/treemap.js | 249 +++++++++++++++++----- caravel/forms.py | 23 +- caravel/viz.py | 13 ++ 4 files changed, 276 insertions(+), 61 deletions(-) diff --git a/caravel/assets/visualizations/treemap.css b/caravel/assets/visualizations/treemap.css index 3293492939..c385780c82 100644 --- a/caravel/assets/visualizations/treemap.css +++ b/caravel/assets/visualizations/treemap.css @@ -1,15 +1,43 @@ -.node { - border: solid 1px white; - font: 10px sans-serif; - line-height: 12px; - overflow: hidden; - position: absolute; - text-indent: 2px; - padding: 0px; /* form div giving top 1px */ - box-sizing: content-box; /* otherwise inheriting border-box */ +text { + pointer-events: none; } -.treemap-container { - position: relative; - margin: auto; +.grandparent text { + font-weight: bold; +} + +rect { + fill: none; + stroke: #fff; +} + +rect.parent, +.grandparent rect { + stroke-width: 2px; +} + +rect.parent { + pointer-events: none; +} + +.grandparent rect { + fill: #eee; +} + +.grandparent:hover rect { + fill: #aaa; +} + +.children rect.parent, +.grandparent rect { + cursor: pointer; +} + +.children rect.parent { + fill: #bbb; + fill-opacity: .5; +} + +.children:hover rect.child { + fill: #bbb; } diff --git a/caravel/assets/visualizations/treemap.js b/caravel/assets/visualizations/treemap.js index 172b78e4ce..88ed230060 100644 --- a/caravel/assets/visualizations/treemap.js +++ b/caravel/assets/visualizations/treemap.js @@ -5,68 +5,222 @@ var px = window.px || require('../javascripts/modules/caravel.js'); // CSS require('./treemap.css'); -/* Modified from https://bl.ocks.org/mbostock/4063582 */ +/* Modified from http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022 */ function treemap(slice) { var div = d3.select(slice.selector); - var _draw = function (data, eltWidth, eltHeight, includeTitle) { + var _draw = function (data, eltWidth, eltHeight, formData) { var margin = { top: 0, right: 0, bottom: 0, left: 0 }, - headerHeight = includeTitle ? 30 : 0, + navBarHeight = 36, + navBarTitleSize = navBarHeight / 3, + navBarBuffer = 10, width = eltWidth - margin.left - margin.right, - height = eltHeight - headerHeight - margin.top - margin.bottom; + height = eltHeight - navBarHeight - navBarBuffer - + margin.top - margin.bottom, + transitioning, + formatNumber = d3.format(formData.number_format); + + var x = d3.scale.linear() + .domain([0, width]) + .range([0, width]); + + var y = d3.scale.linear() + .domain([0, height]) + .range([0, height]); var treemap = d3.layout.treemap() - .size([width, height]) - .value(function (d) { return d.value; }); + .children(function (d, depth) { return depth ? null : d._children; }) + .sort(function (a, b) { return a.value - b.value; }) + .ratio(formData.treemap_ratio) + .mode("squarify") + .round(false); - var root = div.append("div") - .classed("treemap-container", true); + var svg = div.append("svg") + .attr("width", eltWidth) + .attr("height", eltHeight); - var header = root.append("div") - .style("width", (width + margin.left + margin.right) + "px") - .style("height", headerHeight + "px"); + var chartContainer = svg.append("g") + .attr("transform", "translate(" + margin.left + "," + + (margin.top + navBarHeight + navBarBuffer) + ")") + .style("shape-rendering", "crispEdges"); - var container = root.append("div") - .style("position", "relative") - .style("width", (width + margin.left + margin.right) + "px") - .style("height", (height + margin.top + margin.bottom) + "px") - .style("left", margin.left + "px") - .style("top", margin.top + "px"); + var grandparent = svg.append("g") + .attr("class", "grandparent") + .attr("transform", "translate(0," + (margin.top + navBarBuffer / 2) + ")"); - var position = function (selection) { - selection.style("left", function (d) { return d.x + "px"; }) - .style("top", function (d) { return d.y + "px"; }) - .style("width", function (d) { return Math.max(0, d.dx - 1) + "px"; }) - .style("height", function (d) { return Math.max(0, d.dy - 1) + "px"; }); + grandparent.append("rect") + .attr("width", width) + .attr("height", navBarHeight); + + grandparent.append("text") + .attr("x", width / 2) + .attr("y", navBarHeight / 2 + navBarTitleSize / 2) + .style("font-size", navBarTitleSize + "px") + .style("text-anchor", "middle"); + + var initialize = function (root) { + root.x = root.y = 0; + root.dx = width; + root.dy = height; + root.depth = 0; }; - container.datum(data).selectAll(".node") - .data(treemap.nodes) - .enter().append("div") - .attr("class", "node") - .call(position) - .style("background", function (d) { - return d.children ? px.color.category21(d.name) : null; - }) - .style("color", function (d) { - // detect if our background is dark and we need a - // light text color or vice-versa - var bg = d.parent ? px.color.category21(d.parent.name) : null; - if (bg) { - return d3.hsl(bg).l < 0.35 ? '#d3d3d3' : '#111111'; - } - }) - .text(function (d) { return d.children ? null : d.name; }); + // Aggregate the values for internal nodes. This is normally done by the + // treemap layout, but not here because of our custom implementation. + // We also take a snapshot of the original children (_children) to avoid + // the children being overwritten when when layout is computed. + var accumulate = function (d) { + return (d._children = d.children) + ? d.value = d.children.reduce(function (p, v) { return p + accumulate(v); }, 0) + : d.value; + }; - if (includeTitle) { - // title to help with multiple metrics (if any) - header.append("span") - .style("font-size", "18px") - .style("font-weight", "bold") - .text(data.name); - } + // Compute the treemap layout recursively such that each group of siblings + // uses the same size (1x1) rather than the dimensions of the parent cell. + // This optimizes the layout for the current zoom state. Note that a wrapper + // object is created for the parent node for each group of siblings so that + // the parents dimensions are not discarded as we recurse. Since each group + // of sibling was laid out in 1x1, we must rescale to fit using absolute + // coordinates. This lets us use a viewport to zoom. + var layout = function (d) { + if (d._children) { + treemap.nodes({ _children: d._children }); + d._children.forEach(function (c) { + c.x = d.x + c.x * d.dx; + c.y = d.y + c.y * d.dy; + c.dx *= d.dx; + c.dy *= d.dy; + c.parent = d; + layout(c); + }); + } + }; + + var display = function (d) { + + var transition = function (d) { + if (transitioning || !d) { return; } + transitioning = true; + + var g2 = display(d), + t1 = g1.transition().duration(750), + t2 = g2.transition().duration(750); + + // Update the domain only after entering new elements. + x.domain([d.x, d.x + d.dx]); + y.domain([d.y, d.y + d.dy]); + + // Enable anti-aliasing during the transition. + chartContainer.style("shape-rendering", null); + + // Draw child nodes on top of parent nodes. + chartContainer.selectAll(".depth").sort(function (a, b) { return a.depth - b.depth; }); + + // Fade-in entering text. + g2.selectAll("text").style("fill-opacity", 0); + + // Transition to the new view. + t1.selectAll(".ptext").call(text).style("fill-opacity", 0); + t1.selectAll(".ctext").call(text2).style("fill-opacity", 0); + t2.selectAll(".ptext").call(text).style("fill-opacity", 1); + t2.selectAll(".ctext").call(text2).style("fill-opacity", 1); + t1.selectAll("rect").call(rect); + t2.selectAll("rect").call(rect); + + // Remove the old node when the transition is finished. + t1.remove().each("end", function () { + chartContainer.style("shape-rendering", "crispEdges"); + transitioning = false; + }); + }; + + grandparent + .datum(d.parent) + .on("click", transition) + .select("text") + .text(name(d)); + + var g1 = chartContainer.append("g") + .datum(d) + .attr("class", "depth"); + + var g = g1.selectAll("g") + .data(d._children) + .enter().append("g"); + + g.filter(function (d) { return d._children; }) + .classed("children", true) + .on("click", transition); + + var children = g.selectAll(".child") + .data(function (d) { return d._children || [d]; }) + .enter().append("g"); + + children.append("rect") + .attr("class", "child") + .call(rect) + .append("title") + .text(function (d) { return d.name + " (" + formatNumber(d.value) + ")"; }); + + children.append("text") + .attr("class", "ctext") + .text(function (d) { return d.name; }) + .call(text2); + + g.append("rect") + .attr("class", "parent") + .call(rect); + + var t = g.append("text") + .attr("class", "ptext") + .attr("dy", ".75em"); + + t.append("tspan") + .text(function (d) { return d.name; }); + t.append("tspan") + .attr("dy", "1.0em") + .text(function (d) { return formatNumber(d.value); }); + t.call(text); + + g.selectAll("rect") + .style("fill", function (d) { return px.color.category21(d.name); }); + + return g; + }; + + var text = function (selection) { + selection.selectAll("tspan") + .attr("x", function (d) { return x(d.x) + 6; }); + selection.attr("x", function (d) { return x(d.x) + 6; }) + .attr("y", function (d) { return y(d.y) + 6; }) + .style("opacity", function (d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0; }); + }; + + var text2 = function (selection) { + selection.attr("x", function (d) { return x(d.x + d.dx) - this.getComputedTextLength() - 6; }) + .attr("y", function (d) { return y(d.y + d.dy) - 6; }) + .style("opacity", function (d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0; }); + }; + + var rect = function (selection) { + selection.attr("x", function (d) { return x(d.x); }) + .attr("y", function (d) { return y(d.y); }) + .attr("width", function (d) { return x(d.x + d.dx) - x(d.x); }) + .attr("height", function (d) { return y(d.y + d.dy) - y(d.y); }); + }; + + var name = function (d) { + return d.parent + ? name(d.parent) + " / " + d.name + " (" + formatNumber(d.value) + ")" + : d.name + " (" + formatNumber(d.value) + ")"; + }; + + initialize(data); + accumulate(data); + layout(data); + display(data); }; @@ -83,9 +237,8 @@ function treemap(slice) { var width = slice.width(); // facet muliple metrics (no sense in combining) var height = slice.height() / json.data.length; - var includeTitles = json.data.length > 1; for (var i = 0, l = json.data.length; i < l; i ++) { - _draw(json.data[i], width, height, includeTitles); + _draw(json.data[i], width, height, json.form_data); } slice.done(json); diff --git a/caravel/forms.py b/caravel/forms.py index 171da1f00c..c6c9666529 100644 --- a/caravel/forms.py +++ b/caravel/forms.py @@ -6,10 +6,11 @@ from __future__ import unicode_literals from collections import OrderedDict from copy import copy +import math from wtforms import ( Form, SelectMultipleField, SelectField, TextField, TextAreaField, - BooleanField, IntegerField, HiddenField) + BooleanField, IntegerField, HiddenField, DecimalField) from wtforms import validators, widgets from caravel import app @@ -336,6 +337,26 @@ class FormFactory(object): '9/91 percentiles', ]) ), + 'treemap_ratio': DecimalField( + 'Ratio', + default=0.5 * (1 + math.sqrt(5)), # d3 default, golden ratio + description='Target aspect ratio for treemap tiles.', + ), + 'number_format': FreeFormSelectField( + 'Number format', + default='.3s', + choices=[ + ('.3s', '".3s" | 12.3k'), + ('.3%', '".3%" | 1234543.210%'), + ('.4r', '".4r" | 12350'), + ('.3f', '".3f" | 12345.432'), + ('+,', '"+," | +12,345.4321'), + ('$,.2f', '"$,.2f" | $12,345.43'), + ], + description="D3 format syntax for numbers " + "https://github.com/mbostock/\n" + "d3/wiki/Formatting"), + 'row_limit': FreeFormSelectField( 'Row limit', diff --git a/caravel/viz.py b/caravel/viz.py index 4839899948..70504f6f30 100644 --- a/caravel/viz.py +++ b/caravel/viz.py @@ -501,6 +501,19 @@ class TreemapViz(BaseViz): verbose_name = "Treemap" credits = 'd3.js' is_timeseries = False + fieldsets = ({ + 'label': None, + 'fields': ( + 'metrics', + 'groupby', + ), + }, { + 'label': 'Chart Options', + 'fields': ( + 'treemap_ratio', + 'number_format', + ) + },) def get_df(self, query_obj=None): df = super(TreemapViz, self).get_df(query_obj)