Old school D3 from simpler times

All examples By author By category About

timelyportfolio

Full window Github gist

experimental plotly groupby + animate

Built with blockbuilder.org

<!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.jsdelivr.net/gh/timelyportfolio/plotly.js/wip/transform-filter-animate/dist/plotly.js'></script>
<script>var d3 = Plotly.d3;
d3.csv('https://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>

Updated missing url https://cdn.rawgit.com/timelyportfolio/plotly.js/wip/transform-filter-animate/dist/plotly.js to https://cdn.jsdelivr.net/gh/timelyportfolio/plotly.js/wip/transform-filter-animate/dist/plotly.js

https://cdn.rawgit.com/timelyportfolio/plotly.js/wip/transform-filter-animate/dist/plotly.js

Categories

cars.csv

index.html