plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Polar Charts in plotly.js

How to graph D3.js-based polar charts in javascript. Seven examples of polar line, polar scatter and polar area charts.

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/polar_dataset.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) 
          { return row[key]; });
      }
var trace1 = {
  r: unpack(rows, 'x1'),
  t: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Figure8',
  marker: {
    color: 'none',
    line: {color: 'peru'}
  },
  type: 'scatter'
};

var trace2 = {
  r: unpack(rows, 'x2'),
  t: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Cardioid',
  marker: {
    color: 'none',
    line: {color: 'darkviolet'}
  },
  type: 'scatter'
};

var trace3 = {
  r: unpack(rows, 'x3'),
  t: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Hypercardioid',
  marker: {
    color: 'none',
    line: {color: 'deepskyblue'}
  },
  type: 'scatter'
};

var trace4 = {
  
  r: unpack(rows, 'x4'),
  t: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Subcardioid',
  marker: {
    color: 'none',
    line: {color: 'orangered'}
  },
  type: 'scatter'
};

var trace5 = {

  r: unpack(rows, 'x5'),
  t: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Supercardioid',
  marker: {
    color: 'none',
    line: {color: 'green'}
  },
  type: 'scatter'
};

var data = [trace1, trace2, trace3, trace4, trace5];

var layout = {
  title: 'Mic Patterns',
  font: {
    family: 'Arial, sans-serif;',
    size: 12,
    color: '#000'
  },
  showlegend: true,
  width: 480,
  height: 400,
  margin: {
    l: 40,
    r: 40,
    b: 20,
    t: 40,
    pad: 0
  },
  paper_bgcolor: 'rgb(255, 255, 255)',
  plot_bgcolor: 'rgb(255, 255, 255)',
  orientation: -90
};
Plotly.plot('myDiv', data, layout);
});
  function getrandom(num , mul) 
  {
    var value = [ ] 
    for(i=0;i<=num;i++)
     {
     rand = Math.random() * mul;
     value.push(rand);
     }
    return value;
  }
var trace1 = {
  r: getrandom(62, 3),
  t: getrandom(62, 300),
  mode: 'markers',
  name: 'Trial 1',
  marker: {
    color: 'rgb(27,158,119)',
    size: 110,
    line: {color: 'white'},
    opacity: 0.7
  },
  type: 'scatter'
};

var trace2 = {
  r: getrandom(72, 3),
  t: getrandom(72, 105),
  mode: 'markers',
  name: 'Trial 2',
  marker: {
    color: 'rgb(217,95,2)',
    size: 110,
    line: {color: 'white'},
    opacity: 0.7
  },
  type: 'scatter'
};

var trace3 = {
  r: getrandom(62, 3),
  t: getrandom(62, -100),
  mode: 'markers',
  name: 'Trial 3',
  marker: {
    color: 'rgb(117,112,179)',
    size: 110,
    line: {color: 'white'},
    opacity: 0.7
  },
  type: 'scatter'
};

var trace4 = {
  r: getrandom(62, 3),
  t: getrandom(62, -200),
  mode: 'markers',
  name: 'Trial 4',
  marker: {
    color: 'rgb(231,41,138)',
    size: 110,
    line: {color: 'white'},
    opacity: 0.7
  },
  type: 'scatter'
};

var trace5 = {
  
  r: getrandom(62, 3),
  t: getrandom(62, 250),
  mode: 'markers',
  name: 'Trial 5',
  marker: {
    color: 'rgb(102,166,30)',
    size: 110,
    line: {color: 'white'},
    opacity: 0.7
  },
  type: 'scatter'
};

var data = [trace1, trace2, trace3, trace4, trace5];

var layout = {
  title: 'Hobbs-Pearson Trials',
  font: {size: 15},
  plot_bgcolor: 'rgb(223, 223, 223)',
  angularaxis: {tickcolor: 'rgb(253,253,253)'}
};

Plotly.plot('myDiv', data, layout);
Still need help?
Contact Us

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