Skip to content

[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rreusser wants to merge 1 commit into from
Closed

[WIP] First cut at animating bar graphs #1143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions src/plots/cartesian/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
// Skip trace if whitelist provided and it's not whitelisted:
// if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
if(trace.xaxis + trace.yaxis === subplot) {
var needed = false;

// If this trace is specifically requested, add it to the list:
if(traces.indexOf(trace.index) !== -1) {
// Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
// traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
// is outdated. So this retroactively adds the previous trace if the
// traces are interdependent.
if(pcd &&
['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
cdSubplot.indexOf(pcd) === -1) {
cdSubplot.push(pcd);
}
needed = true;
}

if(gd._fullLayout.barmode === 'stack') {
needed = true;
}

// Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
// traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
// is outdated. So this retroactively adds the previous trace if the
// traces are interdependent.
if(needed && pcd &&
['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
cdSubplot.indexOf(pcd) === -1) {
cdSubplot.push(pcd);
}

if(needed) {
cdSubplot.push(cd);
}

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
// remaining plot traces should also be able to do this. Once implemented,
// we won't need this - which should sometimes be a big speedup.
if(plotinfo.plot) {
plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
}

// plot all traces for each module at once
Expand Down
13 changes: 13 additions & 0 deletions src/plots/plots.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

plots.doCalcdata(gd);

var subplotInfo, _module;
var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
modules = gd._fullLayout._modules;

for(i = 0; i < subplots.length; i++) {
subplotInfo = gd._fullLayout._plots[subplots[i]];

for(var j = 0; j < modules.length; j++) {
_module = modules[j];
if(_module.setPositions) _module.setPositions(gd, subplotInfo);
}
}

ErrorBars.calc(gd);

return Promise.resolve();
Expand Down
2 changes: 2 additions & 0 deletions src/traces/bar/calc.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
sa = xa;
size = xa.makeCalcdata(trace, 'x');
pos = ya.makeCalcdata(trace, 'y');
Axes.setConvert(sa);
}
else {
sa = ya;
size = ya.makeCalcdata(trace, 'y');
pos = xa.makeCalcdata(trace, 'x');
Axes.setConvert(sa);
}

// create the "calculated data" to plot
Expand Down
1 change: 1 addition & 0 deletions src/traces/bar/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down
227 changes: 135 additions & 92 deletions src/traces/bar/plot.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
var xa = plotinfo.xaxis,
ya = plotinfo.yaxis,
fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
var onComplete;
var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

var bartraces = plotinfo.plot.select('.barlayer')
var barJoin = plotinfo.plot.select('.barlayer')
.selectAll('g.trace.bars')
.data(cdbar)
.enter().append('g')
.attr('class', 'trace bars');

bartraces.append('g')
.attr('class', 'points')
.each(function(d) {
var t = d[0].t,
trace = d[0].trace,
poffset = t.poffset,
poffsetIsArray = Array.isArray(poffset),
barwidth = t.barwidth,
barwidthIsArray = Array.isArray(barwidth);

arraysToCalcdata(d);

d3.select(this).selectAll('path')
.data(Lib.identity)
.enter().append('path')
.each(function(di, i) {
// now display the bar
// clipped xf/yf (2nd arg true): non-positive
// log values go off-screen by plotwidth
// so you see them continue if you drag the plot
var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
s0 = di.b,
s1 = s0 + di.s;

var x0, x1, y0, y1;
if(trace.orientation === 'h') {
y0 = ya.c2p(p0, true);
y1 = ya.c2p(p1, true);
x0 = xa.c2p(s0, true);
x1 = xa.c2p(s1, true);
}
else {
x0 = xa.c2p(p0, true);
x1 = xa.c2p(p1, true);
y0 = ya.c2p(s0, true);
y1 = ya.c2p(s1, true);
}

if(!isNumeric(x0) || !isNumeric(x1) ||
!isNumeric(y0) || !isNumeric(y1) ||
x0 === x1 || y0 === y1) {
d3.select(this).remove();
return;
}
var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
(di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
offset = d3.round((lw / 2) % 1, 2);
function roundWithLine(v) {
// if there are explicit gaps, don't round,
// it can make the gaps look crappy
return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
d3.round(Math.round(v) - offset, 2) : v;
}
function expandToVisible(v, vc) {
// if it's not in danger of disappearing entirely,
// round more precisely
return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
// but if it's very thin, expand it so it's
// necessarily visible, even if it might overlap
// its neighbor
(v > vc ? Math.ceil(v) : Math.floor(v));
}
if(!gd._context.staticPlot) {
// if bars are not fully opaque or they have a line
// around them, round to integer pixels, mainly for
// safari so we prevent overlaps from its expansive
// pixelation. if the bars ARE fully opaque and have
// no line, expand to a full pixel to make sure we
// can see them
var op = Color.opacity(di.mc || trace.marker.color),
fixpx = (op < 1 || lw > 0.01) ?
roundWithLine : expandToVisible;
x0 = fixpx(x0, x1);
x1 = fixpx(x1, x0);
y0 = fixpx(y0, y1);
y1 = fixpx(y1, y0);
}
d3.select(this).attr('d',
'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
});
.data(cdbar);

barJoin.enter().append('g')
.attr('class', 'trace bars')
.append('g')
.attr('class', 'points');

if(hasTransition) {
if(makeOnCompleteCallback) {
onComplete = makeOnCompleteCallback();
}

var transition = d3.transition()
.duration(transitionOpts.duration)
.ease(transitionOpts.easing)
.each('end', function() {
onComplete && onComplete();
})
.each('interrupt', function() {
onComplete && onComplete();
});

transition.each(function() {
barJoin.each(function(d) {
plotOne(gd, d, this, plotinfo, transitionOpts);
});
});
} else {
barJoin.each(function(d) {
plotOne(gd, d, this, plotinfo, transitionOpts);
});
}

// error bars are on the top
bartraces.call(ErrorBars.plot, plotinfo);
if(!hasTransition) {
barJoin.exit().remove();
}

// error bars are on the top
barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
var fullLayout = gd._fullLayout,
xa = plotinfo.xaxis,
ya = plotinfo.yaxis;

var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

function transition(selection) {
return hasTransition ? selection.transition() : selection;
}

var t = d[0].t,
trace = d[0].trace,
poffset = t.poffset,
poffsetIsArray = Array.isArray(poffset),
barwidth = t.barwidth,
barwidthIsArray = Array.isArray(barwidth);

arraysToCalcdata(d);

var points = d3.select(el).select('.points');

var pathJoin = points.selectAll('path').data(Lib.identity);
pathJoin.enter().append('path');
pathJoin.exit().remove();

pathJoin.each(function(di, i) {
// now display the bar
// clipped xf/yf (2nd arg true): non-positive
// log values go off-screen by plotwidth
// so you see them continue if you drag the plot
var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
s0 = di.b,
s1 = s0 + di.s;

var x0, x1, y0, y1;
if(trace.orientation === 'h') {
y0 = ya.c2p(p0, true);
y1 = ya.c2p(p1, true);
x0 = xa.c2p(s0, true);
x1 = xa.c2p(s1, true);
}
else {
x0 = xa.c2p(p0, true);
x1 = xa.c2p(p1, true);
y0 = ya.c2p(s0, true);
y1 = ya.c2p(s1, true);
}

if(!isNumeric(x0) || !isNumeric(x1) ||
!isNumeric(y0) || !isNumeric(y1) ||
x0 === x1 || y0 === y1) {

d3.select(this).remove();
return;
}
var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
(di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
offset = d3.round((lw / 2) % 1, 2);
function roundWithLine(v) {
// if there are explicit gaps, don't round,
// it can make the gaps look crappy
return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
d3.round(Math.round(v) - offset, 2) : v;
}
function expandToVisible(v, vc) {
// if it's not in danger of disappearing entirely,
// round more precisely
return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
// but if it's very thin, expand it so it's
// necessarily visible, even if it might overlap
// its neighbor
(v > vc ? Math.ceil(v) : Math.floor(v));
}
if(!gd._context.staticPlot) {
// if bars are not fully opaque or they have a line
// around them, round to integer pixels, mainly for
// safari so we prevent overlaps from its expansive
// pixelation. if the bars ARE fully opaque and have
// no line, expand to a full pixel to make sure we
// can see them
var op = Color.opacity(di.mc || trace.marker.color),
fixpx = (op < 1 || lw > 0.01) ?
roundWithLine : expandToVisible;
x0 = fixpx(x0, x1);
x1 = fixpx(x1, x0);
y0 = fixpx(y0, y1);
y1 = fixpx(y1, y0);
}
transition(d3.select(this)).attr('d',
'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
});
}
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
[WIP] First cut at animating bar graphs by rreusser · Pull Request #1143 · plotly/plotly.js · GitHub
Skip to content
[WIP] First cut at animating bar graphs#1143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

rreusser
wants to merge
1
commit into

from

 Closed


[WIP] First cut at animating bar graphs
#1143
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


30 changes: 20 additions & 10 deletions
src/plots/cartesian/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -60,18 +60,28 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
 // Skip trace if whitelist provided and it's not whitelisted:
 // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
 if(trace.xaxis + trace.yaxis === subplot) {
 var needed = false;

 // If this trace is specifically requested, add it to the list:
 if(traces.indexOf(trace.index) !== -1) {
 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }
 needed = true;
 }

 if(gd._fullLayout.barmode === 'stack') {
 needed = true;
 }

 // Okay, so example: traces 0, 1, and 2 have fill = tonext. You animate
 // traces 0 and 2. Trace 1 also needs to be updated, otherwise its fill
 // is outdated. So this retroactively adds the previous trace if the
 // traces are interdependent.
 if(needed && pcd &&
 ['tonextx', 'tonexty', 'tonext'].indexOf(trace.fill) !== -1 &&
 cdSubplot.indexOf(pcd) === -1) {
 cdSubplot.push(pcd);
 }

 if(needed) {
 cdSubplot.push(cd);
 }

Expand All@@ -96,7 +106,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 // remaining plot traces should also be able to do this. Once implemented,
 // we won't need this - which should sometimes be a big speedup.
 if(plotinfo.plot) {
 plotinfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
 plotinfo.plot.selectAll('g:not(.scatterlayer):not(.barlayer)').selectAll('g.trace').remove();
 }

 // plot all traces for each module at once
Expand Down

13 changes: 13 additions & 0 deletions
src/plots/plots.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -1711,6 +1711,19 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)

 plots.doCalcdata(gd);

 var subplotInfo, _module;
 var subplots = plots.getSubplotIds(gd._fullLayout, 'cartesian'),
 modules = gd._fullLayout._modules;

 for(i = 0; i < subplots.length; i++) {
 subplotInfo = gd._fullLayout._plots[subplots[i]];

 for(var j = 0; j < modules.length; j++) {
 _module = modules[j];
 if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 }
 }

 ErrorBars.calc(gd);

 return Promise.resolve();
Expand Down

2 changes: 2 additions & 0 deletions
src/traces/bar/calc.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -31,11 +31,13 @@ module.exports = function calc(gd, trace) {
 sa = xa;
 size = xa.makeCalcdata(trace, 'x');
 pos = ya.makeCalcdata(trace, 'y');
 Axes.setConvert(sa);
 }
 else {
 sa = ya;
 size = ya.makeCalcdata(trace, 'y');
 pos = xa.makeCalcdata(trace, 'x');
 Axes.setConvert(sa);
 }

 // create the "calculated data" to plot
Expand Down

1 change: 1 addition & 0 deletions
src/traces/bar/index.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
Bar.plot = require('./plot');
Bar.style = require('./style');
Bar.hoverPoints = require('./hover');
Bar.animatable = true;

Bar.moduleType = 'trace';
Bar.name = 'bar';
Expand Down

227 changes: 135 additions & 92 deletions
src/traces/bar/plot.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -19,101 +19,144 @@ var ErrorBars = require('../../components/errorbars');
var arraysToCalcdata = require('./arrays_to_calcdata');


module.exports = function plot(gd, plotinfo, cdbar) {
 var xa = plotinfo.xaxis,
 ya = plotinfo.yaxis,
 fullLayout = gd._fullLayout;
module.exports = function plot(gd, plotinfo, cdbar, transitionOpts, makeOnCompleteCallback) {
 var onComplete;
 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 var bartraces = plotinfo.plot.select('.barlayer')
 var barJoin = plotinfo.plot.select('.barlayer')
 .selectAll('g.trace.bars')
 .data(cdbar)
 .enter().append('g')
 .attr('class', 'trace bars');

 bartraces.append('g')
 .attr('class', 'points')
 .each(function(d) {
 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 d3.select(this).selectAll('path')
 .data(Lib.identity)
 .enter().append('path')
 .each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {
 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 d3.select(this).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
 .data(cdbar);

 barJoin.enter().append('g')
 .attr('class', 'trace bars')
 .append('g')
 .attr('class', 'points');

 if(hasTransition) {
 if(makeOnCompleteCallback) {
 onComplete = makeOnCompleteCallback();
 }

 var transition = d3.transition()
 .duration(transitionOpts.duration)
 .ease(transitionOpts.easing)
 .each('end', function() {
 onComplete && onComplete();
 })
 .each('interrupt', function() {
 onComplete && onComplete();
 });

 transition.each(function() {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 });
 } else {
 barJoin.each(function(d) {
 plotOne(gd, d, this, plotinfo, transitionOpts);
 });
 }

 // error bars are on the top
 bartraces.call(ErrorBars.plot, plotinfo);
 if(!hasTransition) {
 barJoin.exit().remove();
 }

 // error bars are on the top
 barJoin.call(ErrorBars.plot, plotinfo);
};

function plotOne(gd, d, el, plotinfo, transitionOpts) {
 var fullLayout = gd._fullLayout,
 xa = plotinfo.xaxis,
 ya = plotinfo.yaxis;

 var hasTransition = !!transitionOpts && transitionOpts.duration > 0;

 function transition(selection) {
 return hasTransition ? selection.transition() : selection;
 }

 var t = d[0].t,
 trace = d[0].trace,
 poffset = t.poffset,
 poffsetIsArray = Array.isArray(poffset),
 barwidth = t.barwidth,
 barwidthIsArray = Array.isArray(barwidth);

 arraysToCalcdata(d);

 var points = d3.select(el).select('.points');

 var pathJoin = points.selectAll('path').data(Lib.identity);
 pathJoin.enter().append('path');
 pathJoin.exit().remove();

 pathJoin.each(function(di, i) {
 // now display the bar
 // clipped xf/yf (2nd arg true): non-positive
 // log values go off-screen by plotwidth
 // so you see them continue if you drag the plot
 var p0 = di.p + ((poffsetIsArray) ? poffset[i] : poffset),
 p1 = p0 + ((barwidthIsArray) ? barwidth[i] : barwidth),
 s0 = di.b,
 s1 = s0 + di.s;

 var x0, x1, y0, y1;
 if(trace.orientation === 'h') {
 y0 = ya.c2p(p0, true);
 y1 = ya.c2p(p1, true);
 x0 = xa.c2p(s0, true);
 x1 = xa.c2p(s1, true);
 }
 else {
 x0 = xa.c2p(p0, true);
 x1 = xa.c2p(p1, true);
 y0 = ya.c2p(s0, true);
 y1 = ya.c2p(s1, true);
 }

 if(!isNumeric(x0) || !isNumeric(x1) ||
 !isNumeric(y0) || !isNumeric(y1) ||
 x0 === x1 || y0 === y1) {

 d3.select(this).remove();
 return;
 }
 var lw = (di.mlw + 1 || trace.marker.line.width + 1 ||
 (di.trace ? di.trace.marker.line.width : 0) + 1) - 1,
 offset = d3.round((lw / 2) % 1, 2);
 function roundWithLine(v) {
 // if there are explicit gaps, don't round,
 // it can make the gaps look crappy
 return (fullLayout.bargap === 0 && fullLayout.bargroupgap === 0) ?
 d3.round(Math.round(v) - offset, 2) : v;
 }
 function expandToVisible(v, vc) {
 // if it's not in danger of disappearing entirely,
 // round more precisely
 return Math.abs(v - vc) >= 2 ? roundWithLine(v) :
 // but if it's very thin, expand it so it's
 // necessarily visible, even if it might overlap
 // its neighbor
 (v > vc ? Math.ceil(v) : Math.floor(v));
 }
 if(!gd._context.staticPlot) {
 // if bars are not fully opaque or they have a line
 // around them, round to integer pixels, mainly for
 // safari so we prevent overlaps from its expansive
 // pixelation. if the bars ARE fully opaque and have
 // no line, expand to a full pixel to make sure we
 // can see them
 var op = Color.opacity(di.mc || trace.marker.color),
 fixpx = (op < 1 || lw > 0.01) ?
 roundWithLine : expandToVisible;
 x0 = fixpx(x0, x1);
 x1 = fixpx(x1, x0);
 y0 = fixpx(y0, y1);
 y1 = fixpx(y1, y0);
 }
 transition(d3.select(this)).attr('d',
 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 });
}