Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/.block

Last active July 22, 2016 20:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/a25bb478951602a49ecb5f41b6812c41 to your computer and use it in GitHub Desktop.
Save timelyportfolio/a25bb478951602a49ecb5f41b6812c41 to your computer and use it in GitHub Desktop.
Download ZIP
experimental plotly groupby + animate
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<h2>groupby + animate</h2>
<div>
<select id="frame-select">
<option>base</option>
<option>group</option>
</select>
</div>
<div id='plotly1' style='display:block;float:left;width:50%'></div>
<script src='https://cdn.rawgit.com/timelyportfolio/plotly.js/wip/transform-filter-animate/dist/plotly.js'></script>
<script>var d3 = Plotly.d3;
d3.csv('http://vincentarelbundock.github.io/Rdatasets/csv/datasets/mtcars.csv', function (err, data) {
if (err) {
console.log(err);
return;
}
Plotly.plot('plotly1', [{
x: data.map(function (d) {
return d.mpg;
}),
y: data.map(function (d) {
return d.hp;
}),
type: 'scatter',
mode: 'markers'
}]).then(function (gd) {
var data_fun = function (data) {
return [{
x: data.map(function (d) {
return d.mpg;
}),
y: data.map(function (d) {
return d.hp;
}),
type: 'scatter',
mode: 'markers'
}];
};
var data2 = data_fun(data);
var groupColors = {};
var color = d3.scale.category10();
d3.keys(d3.nest().key(function (d) {
return d.cyl;
}).map(data)).forEach(function (d) {
groupColors[d] = color(d);
});
data2[0].transforms = [{
type: 'groupby',
groups: data.map(function (d) {
return d.cyl;
}),
groupColors: groupColors
}];
var ungroup_frame = {
'name': 'base',
'data': data_fun(data),
'traceIndices': [0],
'layout': {}
};
var group_frame = {
'name': 'group',
'data': data2,
'baseFrame': 'base',
'traceIndices': [0],
'layout': {}
};
Plotly.addFrames(gd, [
group_frame,
ungroup_frame
]);
d3.select('#frame-select').on('change', function () {
console.log(d3.event.target.value);
Plotly.animate(gd, d3.event.target.value);
});
});
});
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment