plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Aggregations in plotly.js

How to use D3.js-based Aggregates in Plotly.js.

var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly']
var score = [1,6,2,8,2,9,4,5,1,5,2,8]

var data = [{
  type: 'scatter',
  x: subject,
  y: score,
  mode: 'markers',
  transforms: [{
    type: 'aggregate',
    groups: subject,
    aggregations: [
      {target: 'y', func: 'avg', enabled: true},
    ]
  }]
}]

Plotly.plot('graph', data)

 
var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly']
var score = [1,6,2,8,2,9,4,5,1,5,2,8]

var data = [{
  type: 'scatter',
  x: subject,
  y: score,
  mode: 'markers',
  transforms: [{
    type: 'aggregate',
    groups: subject,
    aggregations: [
      {target: 'y', func: 'avg', enabled: true},
    ]
  }]
}]
layout = {
  title: 'Plotly Aggregations
use dropdown to change aggregation', xaxis: {title: 'Subject'}, yaxis: {title: 'Score', range: [0,22]}, height: 600, width: 900, updatemenus: [{ x: 0.85, y: 1.15, xref: 'paper', yref: 'paper', yanchor: 'top', active: 0, showactive: false, buttons: [{ method: 'restyle', args: ['transforms[0].aggregations[0].func', 'avg'], label: 'Avg' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'sum'], label: 'Sum' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'min'], label: 'Min' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'max'], label: 'Max' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'mode'], label: 'Mode' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'median'], label: 'Median' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'count'], label: 'Count' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'stddev'], label: 'Std.Dev' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'first'], label: 'First' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'last'], label: 'Last' }] }] } Plotly.plot('graph', data, layout)
Plotly.d3.csv("https://plot.ly/~public.health/17.csv", function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

trace1 = {
  x: unpack(rows, 'date'),
  autobinx: false,
  autobiny: true,
  marker: {color: 'rgb(68, 68, 68)'},
  name: 'date',
  type: 'histogram',
  xbins: {
    end: '2016-12-31 12:00',
    size: 'M1',
    start: '1983-12-31 12:00'
  }
};

data = [trace1];

layout = {
  paper_bgcolor: 'rgb(240, 240, 240)',
  plot_bgcolor: 'rgb(240, 240, 240)',
  title: '',
  xaxis: {
    autorange: true,
    range: ['1984-07-01 06:00', '2016-07-30 18:00'],
    title: '',
    type: 'date'
  },
  yaxis: {
    autorange: true,
    range: [0, 92.6315789474],
    title: 'Shootings incidents',
    type: 'linear'
  },
  updatemenus: [{
        x: 0.1,
        y: 1.15,
        xref: 'paper',
        yref: 'paper',
        yanchor: 'top',
        active: 0,
        showactive: true,
        buttons: [{
            args: ['xbins.size', 'M1'],
            label: 'Month',
            method: 'restyle',
        }, {
            args: ['xbins.size', 'M3'],
            label: 'Quater',
            method: 'restyle',
        }, {
            args: ['xbins.size', 'M6'],
            label: 'Half Year',
            method: 'restyle',
        }, {
            args: ['xbins.size', 'M12'],
            label: 'Year',
            method: 'restyle',
        }]
  }]
};

Plotly.plot('graph', data, layout);

});
Plotly.d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/worldhappiness.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

  var data = [{
        type: 'choropleth',
        locationmode: 'country names',
        locations: unpack(rows, 'Country'),
        z: unpack(rows, 'HappinessScore'),
        autocolorscale: false,
        reversescale: true,
        colorscale: 'Portland',
        transforms: [{
          type: 'aggregate',
          groups: unpack(rows, 'Country'),
          aggregations: [
            {target: 'z', func: 'avg', enabled: true},
        ]
    }]
   }];

    var layout = {
      title: 'World Happiness
2015 - 2017', geo: { showframe: false, showcoastlines: false, projection:{ type: 'orthographic' } }, updatemenus: [{ x: 0.85, y: 1.15, xref: 'paper', yref: 'paper', yanchor: 'top', active: 0, showactive: true, buttons: [{ method: 'restyle', args: ['transforms[0].aggregations[0].func', 'avg'], label: 'Avg' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'sum'], label: 'Sum' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'min'], label: 'Min' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'max'], label: 'Max' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'mode'], label: 'Mode' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'median'], label: 'Median' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'first'], label: 'First' }, { method: 'restyle', args: ['transforms[0].aggregations[0].func', 'last'], label: 'Last' }] }] }; Plotly.plot('graph', data, layout); });
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.