Skip to content

Commit

Permalink
Finished working on zoom/pan paddiing
Browse files Browse the repository at this point in the history 
Also added style consistency between visualization and detail controls and updated legend
  (out of bounds is consistently gray, no audio data is white)

Also padded out left margin on visualization control so that the middle of all controls is aligned

Both the visualization and detail views now have two rects that paint out of bounds and missing data.

Distribution overview updated so that will clip the brush (because it is now possible to move the brush up to halfway out of bounds).

The detail view now allows panning/zooming up to half of the visible extent off either edge.
The amount available to pan by (in terms of time) changes at each zoom level but is actually always a constant width (half the screen of data)
  • Loading branch information
@atruskie
atruskie committed Mar 21, 2015
1 parent af9b43e commit 410bc2c
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 49 deletions.
38 changes: 27 additions & 11 deletions src/app/d3Bindings/eventDistribution/_eventDistribution.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,24 @@ $color-complement-3: #FF7368;
$color-complement-4: #FF938A;

$mini-backgrounds: (
$color-primary-0 $color-secondary-1-0 $color-secondary-2-0 $color-complement-0
$color-primary-1 $color-secondary-1-1 $color-secondary-2-1 $color-complement-1
$color-primary-2 $color-secondary-1-2 $color-secondary-2-2 $color-complement-2
$color-primary-3 $color-secondary-1-3 $color-secondary-2-3 $color-complement-3
$color-primary-4 $color-secondary-1-4 $color-secondary-2-4 $color-complement-4
$color-primary-0 $color-secondary-1-0 $color-secondary-2-0 $color-complement-0 $color-primary-1 $color-secondary-1-1 $color-secondary-2-1 $color-complement-1 $color-primary-2 $color-secondary-1-2 $color-secondary-2-2 $color-complement-2 $color-primary-3 $color-secondary-1-3 $color-secondary-2-3 $color-complement-3 $color-primary-4 $color-secondary-1-4 $color-secondary-2-4 $color-complement-4
);

//$mini-backgrounds: darksalmon darkolivegreen slategray #8f7f6f #7a6f8f #8f6f8f;

$visualize-no-data-color: #DDD;
$out-of-bounds-color: #DDD;
$dataset-in-bounds-bg-color: #ffffff;

$tile-border-color: #777;

$tile-background-color: #e5ffd8;
$generating-tile-color: $text-color;
$legend-size: 2em;

$standard-brush-fill: rgba(30, 144, 255, 0.32);
$standard-brush-fill: rgba(30, 144, 255, 0.2);
$visualization-brush-fill: rgba(mix($standard-brush-fill, white), 1.0);
$visualization-brush-lane-overlay-fill: $standard-brush-fill;
$visualization-brush-stroke: $gray-light;

event-distribution-overview, event-distribution-detail {

Expand Down Expand Up @@ -116,12 +116,20 @@ event-distribution-detail {
font: 13px sans-serif;
}

.outOfBounds {
fill: $out-of-bounds-color;
}

.datasetBounds {
fill: $dataset-in-bounds-bg-color;
}

.visualizationBrushArea {
fill: $visualization-brush-fill;
}

.visualizationBrushLaneOverlay {
stroke: $tile-border-color;
stroke: $visualization-brush-stroke;
fill: $visualization-brush-lane-overlay-fill;
}
}
Expand All @@ -142,7 +150,11 @@ event-distribution-visualisation {
}

.tilesBackground {
fill: $visualize-no-data-color;
fill: $out-of-bounds-color;
}

.datasetBounds {
fill: $dataset-in-bounds-bg-color;
}

.tiles {
Expand Down Expand Up @@ -186,8 +198,12 @@ event-distribution-visualisation {

}

.missing {
background-color: $visualize-no-data-color;
.outOfBounds {
background-color: $out-of-bounds-color;
}

.noAudioInDataset {
background-color: $dataset-in-bounds-bg-color;
}

.generating {
Expand Down
65 changes: 51 additions & 14 deletions src/app/d3Bindings/eventDistribution/distributionDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ angular
visualizationBrushArea,
visualizationBrushLaneOverlay,
mainItemsGroup,
outOfBoundsRect,
datasetBoundsRect,
laneLabelMarginRight = 5,
xAxisHeight = 30,
margin = {
Expand All @@ -47,7 +49,7 @@ angular
// these are initial values only
// this is the width and height of the main group
mainWidth = 1000,
mainHeight = 256,
mainHeight = 0,

laneHeight = 100,
lanePaddingDomain = 0.1;
Expand Down Expand Up @@ -147,6 +149,13 @@ angular
if (visualizationBrushArea) {
visualizationBrushArea.attr("height", dims.width);
}
if (outOfBoundsRect) {
outOfBoundsRect.attr(dims);
}
if (datasetBoundsRect) {
// width is updated by updateMain
outOfBoundsRect.attr("height", mainHeight);
}

chart.style("height", svgHeight() + "px");

Expand Down Expand Up @@ -181,6 +190,24 @@ angular
})
.classed("zoomSurface", true);

outOfBoundsRect = main.append("rect")
.attr({
height: mainHeight,
width: mainWidth,
x: 0,
y: 0
})
.classed("outOfBounds", true);

datasetBoundsRect = main.append("rect")
.attr({
height: mainHeight,
width: mainWidth,
x: 0,
y: 0
})
.classed("datasetBounds", true);

// rect for showing visualisation extent
visualizationBrushArea = main.append("g")
.clipPath("url(#" + clipId + ")")
Expand Down Expand Up @@ -333,6 +360,17 @@ angular
if (isItemsToRender) {
updateVisualizationBrush();

// update datasetBounds
// effect a manual clip on the range
var dbMinimum = Math.max(self.visibleExtent[0], self.minimum);
var dbMaximum = Math.min(self.visibleExtent[1], self.maximum);
xScale.clamp(true);
datasetBoundsRect.attr({
x: xScale(dbMinimum),
width: Math.max(0, xScale(dbMaximum) - xScale(dbMinimum))
});
xScale.clamp(false);

var domain = xScale.domain(),
// intentionally falsey
showAxis = domain[1] - domain[0] != 0; // jshint ignore:line
Expand Down Expand Up @@ -372,14 +410,14 @@ angular
// HACK: check whether this event was triggered manually
var isManual = _lockManualZoom;

// prevent translating off the edge of our data (i.e. clamp the zoom)
// prevent translating off the edge of our data (i.e. clamp the zoom/pan)
var domain = null;
if (xScale) {
zoom.translate(panLimit());
//zoom.translate(panLimit());
domain = xScale.domain();
}

//console.debug("DistributionDetail:zoom:", d3.event.translate, d3.event.scale, domain, isManual);
//console.debug("DistributionDetail:zoom:", d3.event.translate, d3.event.scale, domain, zoom.translate(), isManual);

// don't propagate cyclical events
if (isManual) {
Expand Down Expand Up @@ -409,26 +447,25 @@ angular

/**
* Constrains the zoom's translation.
* Clamp at each end is set to the opposite edge of the visualization brush
* Adapted from: http://bl.ocks.org/garrilla/11280861
* @returns {*[]}
*/
function panLimit() {
var tx, ty = 0,
zoomScale = zoom.scale(),
xDomain = xScale.domain(),
x1 = xDomain[1],
x0 = xDomain[0],
panExtent1 = self.maximum,
panExtent0 = self.minimum,
divisorWidth = mainWidth / ((x1 - x0) * zoomScale),
minX = -(((x0 - x1) * zoomScale) + (panExtent1 - (panExtent1 - (mainWidth / divisorWidth)))),
maxX = -(((x0 - x1)) + (panExtent1 - panExtent0)) * divisorWidth * zoomScale;
x1 = +xDomain[1],
x0 = +xDomain[0],
halfDomainDuration = (x1 - x0) / 2.0;

// extent allowable pan range by half of the current on-screen visible domain
var panExtent0 = self.minimum - halfDomainDuration,
panExtent1 = self.maximum + halfDomainDuration;

if (x0 < panExtent0) {
tx = minX;
tx = xScale(self.minimum - (panExtent0 - x0));
} else if (x1 > panExtent1) {
tx = maxX;
tx = xScale((panExtent1 - self.maximum) + x1 - (panExtent1 - panExtent0));
} else {
tx = zoom.translate()[0];
}
Expand Down
45 changes: 23 additions & 22 deletions src/app/d3Bindings/eventDistribution/distributionOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ angular
"d3",
"TimeAxis",
function (d3, TimeAxis) {
return function DistributionOverview(target, data, dataFunctions) {
return function DistributionOverview(target, data, dataFunctions, uniqueId) {
var that = this,
chart,
mini,
clipId = "distributionOverview_" + uniqueId,
miniClipRect,
xAxis,
xScale,
yScale,
Expand Down Expand Up @@ -120,6 +122,15 @@ angular
.append("svg")
.classed("chart", true);

miniClipRect = chart.append("defs")
.append("clipPath")
.attr("id", clipId)
.append("rect")
.attr({
width: miniWidth,
height: miniHeight
});

return chart;
}

Expand All @@ -133,6 +144,11 @@ angular
miniWidth = calculateMiniWidth();
miniHeight = Math.max(that.getLaneLength() * laneHeight, laneHeight);
chart.style("height", svgHeight());

miniClipRect.attr({
width: miniWidth,
height: miniHeight
})
}

/**
Expand All @@ -158,24 +174,6 @@ angular
// mini item rectangles
mini.append("g").classed("miniItemsGroup", true);

/*// labels - disabled. TODO: turn in to hover text, don't forget to move logic too update
// https://github.com/Caged/d3-tip/blob/master/docs/index.md
mini.append("g")
.attr("id", "miniLabels")
.selectAll(".miniLabels")
.data(that.items)
.enter()
.append("text")
.text(dataFunctions.getId)
.attr({
x: 0, // TODO: -m[1] === -15
y: function (d) {
return yScale(getCategoryIndex(d) + 0.5)
},
dy: ".5ex"
});
*/

// create interactive brush
_lockManualBrush = true;
that.brush = d3.svg.brush()
Expand All @@ -186,7 +184,8 @@ angular
// create surface for the brush
mini.append("g")
.classed("x brush", true)
.call(that.brush);
.call(that.brush)
.clipPath("url(#" + clipId + ")");
_lockManualBrush = false;

return mini;
Expand Down Expand Up @@ -356,9 +355,11 @@ angular
controller.overview = new DistributionOverview(
element,
controller.data,
controller.options.functions);
controller.options.functions,
$scope.$id
);

if (controller.data && controller.data.items.length > 0) {
if (controller.data.items && controller.data.items.length > 0) {
controller.overview.updateData(controller.data, controller.currentExtent);
}
}
Expand Down
18 changes: 16 additions & 2 deletions src/app/d3Bindings/eventDistribution/distributionVisualisation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ angular
//metaTrack = container.select(".metaTrack"),
main = container.select(".imageTrack .main"),
tilesBackground = main.select(".tilesBackground"),
datasetBoundsRect = main.select(".datasetBounds"),
tilesGroup = main.select(".tiles"),
tilesClipRect,

Expand Down Expand Up @@ -53,7 +54,7 @@ angular
margin = {
top: 13,
right: 0,
left: 0 + yAxisWidth,
left: 120 /* yAxisWidth*/,
bottom: 0 + xAxisHeight
},

Expand Down Expand Up @@ -122,7 +123,8 @@ angular
function updateDataVariables(data) {
// data should be an array of items with extents
self.items = data.items;

self.maximum = data.maximum;
self.minimum = data.minimum;
self.nyquistFrequency = data.nyquistFrequency;
self.spectrogramWindowSize = data.spectrogramWindowSize;
self.middle = null;
Expand All @@ -147,6 +149,7 @@ angular
};
tilesGroup.attr(attrs);
tilesBackground.attr(attrs);
datasetBoundsRect.attr("height", tilesHeight);
if (tilesClipRect) {
tilesClipRect.attr(attrs);
}
Expand Down Expand Up @@ -294,6 +297,17 @@ angular
// remove old tiles
tileElements.exit().remove();

// update datasetBounds
// effect a manual clip on the range
var dbMinimum = Math.max(visibleExtent[0], self.minimum);
var dbMaximum = Math.min(visibleExtent[1], self.maximum);
xScale.clamp(true);
datasetBoundsRect.attr({
x: xScale(dbMinimum) || 0.0,
width: Math.max(0, xScale(dbMaximum) - xScale(dbMinimum)) || 0.0
});
xScale.clamp(false);

var domain = xScale.domain(),
// intentionally falsey
showAxis = domain[1] - domain[0] != 0; // jshint ignore:line
Expand Down
3 changes: 3 additions & 0 deletions src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@
<svg >
<g class="main">
<rect class="tilesBackground"></rect>
<rect class="datasetBounds"></rect>
<!-- there should usually be at most 25 tiles -->
<g class="tiles">

</g>
</g>
</svg>
<dl>
<dt class="outOfBounds">&nbsp;</dt>
<dd>= outside of dataset</dd>
<dt class="missing">&nbsp;</dt>
<dd>= no audio data</dd>
<dt class="generating">&nbsp;</dt>
Expand Down

0 comments on commit 410bc2c

Please sign in to comment.