From 301ee27cbb36fa4314c3f4f6ed7b9783af69e707 Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Tue, 27 Jan 2015 15:52:27 +1000 Subject: [PATCH] Worked on distribution visualisation --- .../eventDistribution/distributionDetail.js | 10 +-- .../eventDistribution/distributionOverview.js | 39 +++------- .../distributionVisualisation.js | 73 ++++++++++++++++--- .../eventDistributionController.js | 37 +++++++--- src/app/d3Bindings/widgets/timeAxis.js | 2 +- src/app/demo/d3TestPage.js | 2 +- 6 files changed, 106 insertions(+), 57 deletions(-) diff --git a/src/app/d3Bindings/eventDistribution/distributionDetail.js b/src/app/d3Bindings/eventDistribution/distributionDetail.js index aaecdfc2..44d35b27 100644 --- a/src/app/d3Bindings/eventDistribution/distributionDetail.js +++ b/src/app/d3Bindings/eventDistribution/distributionDetail.js @@ -138,7 +138,7 @@ angular .clipPath("url(#" + clipId + ")") .classed("mainItemsGroup", true); - xAxis = new TimeAxis(main, xScale, {position: [0, mainHeight]}) + xAxis = new TimeAxis(main, xScale, {position: [0, mainHeight]}); } function updateDataVariables(data) { @@ -248,7 +248,7 @@ angular if (data && data.items.length > 0) { var domain = xScale.domain(), // intentionally falsey - showAxis = domain[1] - domain[0] != 0; + showAxis = domain[1] - domain[0] != 0; // jshint ignore:line xAxis.update(xScale, [0, mainHeight], showAxis); } @@ -256,8 +256,8 @@ angular } function isRectVisible(d) { - return dataFunctions.getLow(d) < that.visibleExtent[1] - && dataFunctions.getHigh(d) > that.visibleExtent[0]; + return dataFunctions.getLow(d) < that.visibleExtent[1] && + dataFunctions.getHigh(d) > that.visibleExtent[0]; } function getCategoryIndex(d) { @@ -279,7 +279,7 @@ angular function id(a) { return a; } - } + }; } ] ).directive( diff --git a/src/app/d3Bindings/eventDistribution/distributionOverview.js b/src/app/d3Bindings/eventDistribution/distributionOverview.js index e9dee258..ad7161e4 100644 --- a/src/app/d3Bindings/eventDistribution/distributionOverview.js +++ b/src/app/d3Bindings/eventDistribution/distributionOverview.js @@ -34,28 +34,7 @@ angular laneHeight = 60, lanePaddingDomain = 0.125, labelRectPadding = 5, - container = d3.select(target), - defaultFunctions = { - getId: function (d) { - return d.id; - }, - getCategory: function (d) { - return d.lane; - }, - getLow: function (d) { - return d.min; - }, - getHigh: function (d) { - return d.max; - }, - getText: function (d) { - return d.text; - }, - extentUpdate: function (extent) { - console.log("DistributionOverview:extentUpdate: You should override this", extent); - } - }, - functions = angular.extend(defaultFunctions, dataFunctions); + container = d3.select(target); // exports that.updateData = updateData; @@ -156,7 +135,7 @@ angular .data(that.items) .enter() .append("text") - .text(functions.getId) + .text(dataFunctions.getId) .attr({ x: 0, // TODO: -m[1] === -15 y: function (d) { @@ -256,13 +235,13 @@ angular return "miniItem" + getCategoryIndex(d); }, x: function (d) { - return xScale(functions.getLow(d)); + return xScale(dataFunctions.getLow(d)); }, y: function (d) { return yScale(getCategoryIndex(d) + lanePaddingDomain); }, width: function (d) { - return xScale(functions.getHigh(d)) - xScale(functions.getLow(d)); + return xScale(dataFunctions.getHigh(d)) - xScale(dataFunctions.getLow(d)); }, height: yScale(1.0 - (2 * lanePaddingDomain)) }; @@ -280,7 +259,7 @@ angular .attr({ y: 1, height: miniHeight - 2 - }) + }); } /** @@ -295,13 +274,13 @@ angular .call(that.brush.extent(brushExtent)); // update the outside world - functions.extentUpdate(brushExtent); + dataFunctions.extentUpdate(brushExtent); } // helper functions function getCategoryIndex(d) { - return that.lanes.indexOf(functions.getCategory(d)); + return that.lanes.indexOf(dataFunctions.getCategory(d)); } function id(a) { @@ -315,7 +294,7 @@ angular function svgHeight() { return miniHeight + margin.top + margin.bottom; } - } + }; } ] ).directive( @@ -336,7 +315,7 @@ angular controller.data, controller.options.functions); } - } + }; } ] ); \ No newline at end of file diff --git a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js index 2846cb57..06b6075a 100644 --- a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js +++ b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js @@ -18,38 +18,82 @@ angular container = d3.select(target), metaTrack = container.select(".metaTrack"), tiles = container.select(".imageTrack .tiles"), - // 86400 seconds + + // default value, overridden almost straight away + height = 256, + // default value, overridden almost straight away + width = 1440, + + // 86400 seconds oneDay = 60 * 60 * 24, tileSizePixels = 60, tileSizeSeconds = 60 * 60, - // seconds per pixel - resolution = oneDay / resolution, - // +1 so that 0.5 tile can fall off either end - tileCount = (oneDay / tileSizeSeconds) + 1; + // seconds per pixel + resolution = updateResolution(), + + xScale, + yScale, + + // +1 so that 0.5 tile can fall off either end + tileCount = (oneDay / tileSizeSeconds) + 2; // exports + that.extents = []; + that.nyquist = 11025; + // init create(); // functions + function updateData(data) { + updateDataVariables(data); + + updateScales() + } + function create() { - setDimensions(); + updateDataVariables(data); - updateAxis(); + setDimensions(); + updateScales(); createElements(); } + function updateDataVariables(data) { + // data should be an array of extents + that.extents = data.extents; + that.nyquistFrequency = data.nyquistFrequency; + } + function setDimensions() { + // want width to be a factor of tile size + var containerWidth = tiles.node().parentNode.getBoundingClientRect().width; + var tileCount = Math.floor(containerWidth / tileSizePixels); + //tileCount = tiles + 1; + width = tileCount * tileSizePixels; + tiles.style("width", width + "px"); + + + // want height to be a function of nyquistRate + height = yScale(that.nyquist); + tiles.style("height", height) } - function updateAxis() { + function updateScales() { + + xScale = d3.scale.linear()//time.scale() + .domain([0, 1]) + .range([0, 1]); + yScale = d3.scale.linear() + .domain([0, 1]) + .range([0, 1]); } function createElements() { @@ -59,12 +103,21 @@ angular .append("div") .style("top", 0) .style("left", function (d, i) { - return (i * 60) + "px"; - }) + return ((i * 60) - 30) + "px"; + }) .style("width", tileSizePixels + "px") .attr("class", "tile"); } + function updateResolution() { + resolution = tileSizeSeconds / tileSizePixels; + return resolution; + } + + function updateTileCount() { + + } + } } ] diff --git a/src/app/d3Bindings/eventDistribution/eventDistributionController.js b/src/app/d3Bindings/eventDistribution/eventDistributionController.js index d4cffc90..e4dcc28e 100644 --- a/src/app/d3Bindings/eventDistribution/eventDistributionController.js +++ b/src/app/d3Bindings/eventDistribution/eventDistributionController.js @@ -9,21 +9,32 @@ angular "d3", function distributionController($scope, $element, $attrs, d3) { console.debug("event distribution controller:init"); - var that = this; + var that = this, + defaultFunctions = { + getId: function (d) { + return d.id; + }, + getCategory: function (d) { + return d.lane; + }, + getLow: function (d) { + return d.min; + }, + getHigh: function (d) { + return d.max; + }, + getText: function (d) { + return d.text; + } + }; - $scope.test = "hello world"; - - this.test = function() { - alert("hello world2"); - }; this.data = {}; + // object reference! this.options = $scope.options || {}; - this.options.functions = this.options.functions || {}; - this.detail = null; - this.overview = null; + this.options.functions = angular.extend(defaultFunctions, this.options.functions || {}); this.options.functions.extentUpdate = function (newExtent) { function update() { // object reference! @@ -40,6 +51,12 @@ angular } }; + this.detail = null; + this.overview = null; + this.visualisation = null; + + + // only watches changes to object reference $scope.$watch(function () { @@ -81,6 +98,6 @@ angular options: "=" }, controller: "distributionController" - } + }; } ); \ No newline at end of file diff --git a/src/app/d3Bindings/widgets/timeAxis.js b/src/app/d3Bindings/widgets/timeAxis.js index 4282b643..637c1dbb 100644 --- a/src/app/d3Bindings/widgets/timeAxis.js +++ b/src/app/d3Bindings/widgets/timeAxis.js @@ -75,7 +75,7 @@ angular function setVisibility() { axisG.attr("visibility", options.isVisible ? "visible" : "hidden"); } - } + }; } ] ); \ No newline at end of file diff --git a/src/app/demo/d3TestPage.js b/src/app/demo/d3TestPage.js index 4836d7ec..f5ffa435 100644 --- a/src/app/demo/d3TestPage.js +++ b/src/app/demo/d3TestPage.js @@ -54,7 +54,7 @@ angular.module("bawApp.demo.d3", []) } else { key = "siteId"; - groupKey = "sites" + groupKey = "sites"; } if ($scope[groupKey]) {