plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Multiple Transforms in plotly.js

How to use D3.js-based Multiple Transforms in Plotly.js.

Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  var data = [{
      type: 'scatter',
      mode: 'markers',
      x: unpack(rows, 'lifeExp'),
      y: unpack(rows, 'gdpPercap'),
      text: unpack(rows, 'continent'),
      marker: {
        size: unpack(rows, 'pop'),
        sizemode: "area",
        sizeref: 200000
      },
      transforms: [
        {
        type: 'filter',
        target: unpack(rows, 'year'),
        operation: '=',
        value: '2007'
        }, {
        type: 'groupby',
        groups: unpack(rows, 'continent'),
        styles: [
          {target: 'Asia', value: {marker: {color: 'red'}}},
          {target: 'Europe', value: {marker: {color: 'blue'}}},
          {target: 'Americas', value: {marker: {color: 'orange'}}},
          {target: 'Africa', value: {marker: {color: 'green'}}},
          {target: 'Oceania', value: {marker: {color: 'purple'}}}
        ]
  }]
    }]

var layout = {
  yaxis: {
    type: 'log'
  }
}

Plotly.plot('graph', data, layout)
});
Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  var data = [{
      type: 'scatter',
      mode: 'markers',
      x: unpack(rows, 'lifeExp'),
      y: unpack(rows, 'gdpPercap'),
      text: unpack(rows, 'continent'),
      marker: {
        size: unpack(rows, 'pop'),
        sizemode: "area",
        sizeref: 200000
      },
      transforms: [
        {
          type: 'filter',
          target: unpack(rows, 'year'),
          operation: '=',
          value: '2007'
        }, {
          type: 'aggregate',
          groups: unpack(rows, 'continent'),
          aggregations: [
            {target: 'x', func: 'avg'},
            {target: 'y', func: 'avg'},
            {target: 'marker.size', func: 'sum'}
          ]
       }]
    }]

var layout = {
  yaxis: {
    type: 'log'
  }
}

Plotly.plot('graph', data, layout)
});
Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  var data = [{
      type: 'scatter',
      mode: 'markers',
      x: unpack(rows, 'lifeExp'),
      y: unpack(rows, 'gdpPercap'),
      text: unpack(rows, 'continent'),
      marker: {
        size: unpack(rows, 'pop'),
        sizemode: "area",
        sizeref: 200000
      },
      transforms: [
        {
          type: 'filter',
          target: unpack(rows, 'year'),
          operation: '=',
          value: '2007'
        }, {
          type: 'groupby',
          groups: unpack(rows, 'continent'),
          styles: [
            {target: 'Asia', value: {marker: {color: 'red'}}},
            {target: 'Europe', value: {marker: {color: 'blue'}}},
            {target: 'Americas', value: {marker: {color: 'orange'}}},
            {target: 'Africa', value: {marker: {color: 'green'}}},
            {target: 'Oceania', value: {marker: {color: 'purple'}}}
        ]
        }, {
          type: 'aggregate',
          groups: unpack(rows, 'continent'),
          aggregations: [
            {target: 'x', func: 'avg'},
            {target: 'y', func: 'avg'},
            {target: 'marker.size', func: 'sum'}
          ]
       }]
    }]

var layout = {
  title: 'Gapminder
2007 Average GDP Per Cap & Life Exp. by Continent', yaxis: { type: 'log' } } Plotly.plot('graph', data, layout) });
Still need help?
Contact Us

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