Skip to content

Commit

Permalink
Worked on distribution visualisation
Browse files Browse the repository at this point in the history
  • Loading branch information
@atruskie
atruskie committed Jan 27, 2015
1 parent 331c423 commit 301ee27
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 57 deletions.
10 changes: 5 additions & 5 deletions src/app/d3Bindings/eventDistribution/distributionDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -248,16 +248,16 @@ 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);
}

}

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) {
Expand All @@ -279,7 +279,7 @@ angular
function id(a) {
return a;
}
}
};
}
]
).directive(
Expand Down
39 changes: 9 additions & 30 deletions src/app/d3Bindings/eventDistribution/distributionOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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))
};
Expand All @@ -280,7 +259,7 @@ angular
.attr({
y: 1,
height: miniHeight - 2
})
});
}

/**
Expand All @@ -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) {
Expand All @@ -315,7 +294,7 @@ angular
function svgHeight() {
return miniHeight + margin.top + margin.bottom;
}
}
};
}
]
).directive(
Expand All @@ -336,7 +315,7 @@ angular
controller.data,
controller.options.functions);
}
}
};
}
]
);
73 changes: 63 additions & 10 deletions src/app/d3Bindings/eventDistribution/distributionVisualisation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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() {

}

}
}
]
Expand Down
37 changes: 27 additions & 10 deletions src/app/d3Bindings/eventDistribution/eventDistributionController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand All @@ -40,6 +51,12 @@ angular
}
};

this.detail = null;
this.overview = null;
this.visualisation = null;




// only watches changes to object reference
$scope.$watch(function () {
Expand Down Expand Up @@ -81,6 +98,6 @@ angular
options: "="
},
controller: "distributionController"
}
};
}
);
2 changes: 1 addition & 1 deletion src/app/d3Bindings/widgets/timeAxis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ angular
function setVisibility() {
axisG.attr("visibility", options.isVisible ? "visible" : "hidden");
}
}
};
}
]
);
2 changes: 1 addition & 1 deletion src/app/demo/d3TestPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ angular.module("bawApp.demo.d3", [])
}
else {
key = "siteId";
groupKey = "sites"
groupKey = "sites";
}

if ($scope[groupKey]) {
Expand Down

0 comments on commit 301ee27

Please sign in to comment.