Polar Charts in JavaScript

How to make D3.js-based polar charts in Plotly.js.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

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'),
  theta: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Figure8',
  line: {color: 'peru'},
  type: 'scatterpolar'
};

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

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

var trace4 = {

  r: unpack(rows, 'x4'),
  theta: unpack(rows, 'y'),
  mode: 'lines',
  name: 'Subcardioid',
  line: {color: 'orangered'},
  type: 'scatterpolar'
};

var trace5 = {

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

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

var layout = {
  title: 'Mic Patterns',
  font: {
    family: 'Arial, sans-serif;',
    size: 12,
    color: '#000'
  },
  showlegend: true,
  orientation: -90
};
Plotly.newPlot('myDiv', data, layout);
});
data = [
  {
    type: "scatterpolar",
    mode: "lines",
    r: [0, 1.5, 1.5, 0, 2.5, 2.5, 0],
    theta: [0, 10, 25, 0, 205, 215, 0],
    fill: "toself",
    fillcolor: '#709BFF',
    line: {
      color: 'black'
    }
  },
  {
    type: "scatterpolar",
    mode: "lines",
    r: [0, 3.5, 3.5, 0],
    theta: [0, 55, 75, 0],
    fill: "toself",
    fillcolor: '#E4FF87',
    line: {
      color: 'black'
    }
  },
  {
    type: "scatterpolar",
    mode: "lines",
    r: [0, 4.5, 4.5, 0, 4.5, 4.5, 0],
    theta: [0, 100, 120, 0, 305, 320, 0],
    fill: "toself",
    fillcolor: '#FFAA70',
    line: {
      color: 'black'
    }
  },
  {
    type: "scatterpolar",
    mode: "lines",
    r: [0, 4, 4, 0],
    theta: [0, 165, 195, 0],
    fill: "toself",
    fillcolor: '#FFDF70',
    line: {
      color: 'black'
    }
  },
  {
    type: "scatterpolar",
    mode: "lines",
    r: [0, 3, 3, 0],
    theta: [0, 262.5, 277.5, 0],
    fill: "toself",
    fillcolor: '#B6FFB4',
    line: {
      color: 'black'
    }
  }
]

layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 5]
    }
  },
  showlegend: false
}

Plotly.newPlot('myDiv', data, layout)
var data = [
    {
      type: "scatterpolar",
      name: "angular categories",
      r: [5, 4, 2, 4, 5],
      theta: ["a", "b", "c", "d", "a"],
      fill: "toself"
    },
    {
      type: "scatterpolar",
      name: "radial categories",
      r: ["a", "b", "c", "d", "b", "f", "a"],
      theta: [1, 4, 2, 1.5, 1.5, 6, 5],
      thetaunit: "radians",
      fill: "toself",
      subplot: "polar2"
    },
    {
      type: "scatterpolar",
      name: "angular categories (w/ categoryarray)",
      r: [5, 4, 2, 4, 5],
      theta: ["a", "b", "c", "d", "a"],
      fill: "toself",
      subplot: "polar3"
    },
    {
      type: "scatterpolar",
      name: "radial categories (w/ category descending)",
      r: ["a", "b", "c", "d", "b", "f", "a", "a"],
      theta: [45, 90, 180, 200, 300, 15, 20, 45],
      fill: "toself",
      subplot: "polar4"
    },
    {
      type: "scatterpolar",
      name: "angular categories (w/ extra category)",
      r: [5, 4, 2, 4, 5, 5],
      theta: ["b", "c", "d", "e", "a", "b"],
      fill: "toself"
    }
  ]

var layout = {
    polar: {
      domain: {
        x: [0, 0.46],
        y: [0.56, 1]
      },
      radialaxis: {
        angle: 45
      },
      angularaxis: {
        direction: "clockwise",
        period: 6
      }
    },
    polar2: {
      domain: {
        x: [0, 0.46],
        y: [0, 0.44]
      },
      radialaxis: {
        angle: 180,
        tickangle: -180
      }
    },
    polar3: {
      domain: {
        x: [0.54, 1],
        y: [0.56, 1]
      },
      sector: [150, 400],
      radialaxis: {
        angle: -45
      },
      angularaxis: {
        categoryarray: ["d", "a", "c", "b"]
      }
    },
    polar4: {
      domain: {
        x: [0.54, 1],
        y: [0, 0.44]
      },
      radialaxis: {
        categoryorder: "category descending"
      },
      angularaxis: {
        thetaunit: "radians",
        dtick: 0.3141592653589793
      }
    }
  }

Plotly.newPlot('myDiv', data, layout)
var data = [
    {
      type: "scatterpolar",
      mode: "lines+markers",
      r: [1,2,3,4,5],
      theta: [0,90,180,360,0],
      line: {
        color: "#ff66ab"
      },
      marker: {
        color: "#8090c7",
        symbol: "square",
        size: 8
      },
      subplot: "polar"
    },
    {
      type: "scatterpolar",
      mode: "lines+markers",
      r: [1,2,3,4,5],
      theta: [0,90,180,360,0],
      line: {
        color: "#ff66ab"
      },
      marker: {
        color: "#8090c7",
        symbol: "square",
        size: 8
      },
      subplot: "polar2"
    }
  ]

var layout = {
    showlegend: false,
    polar: {
      domain: {
        x: [0,0.4],
        y: [0,1]
      },
      radialaxis: {
        tickfont: {
          size: 8
        }
      },
      angularaxis: {
        tickfont: {
          size: 8
        },
        rotation: 90,
        direction: "counterclockwise"
      }
    },
    polar2: {
      domain: {
        x: [0.6,1],
        y: [0,1]
      },
      radialaxis: {
        tickfont: {
          size: 8
        }
      },
      angularaxis: {
        tickfont: {
          size: 8
        },
        direction: "clockwise"
      }
    }
  }

Plotly.newPlot('myDiv', data, layout)
var data = [
    {
      type: "scatterpolar",
      mode: "lines+markers",
      r: [1,2,3,4,5],
      theta: [0,90,180,360,0],
      line: {
        color: "#ff66ab"
      },
      marker: {
        color: "#8090c7",
        symbol: "square",
        size: 8
      },
      subplot: "polar"
    },
    {
      type: "scatterpolar",
      mode: "lines+markers",
      r: [1,2,3,4,5],
      theta: [0,90,180,360,0],
      line: {
        color: "#ff66ab"
      },
      marker: {
        color: "#8090c7",
        symbol: "square",
        size: 8
      },
      subplot: "polar2"
    }
  ]

var layout = {
    showlegend: false,
    polar: {
		sector: [145,215],
      domain: {
        x: [0,0.4],
        y: [0,1]
      },
      radialaxis: {
        tickfont: {
          size: 8
        }
      },
      angularaxis: {
        tickfont: {
          size: 8
        }
      }
    },
    polar2: {
      domain: {
        x: [0.6,1],
        y: [0,1]
      },
      radialaxis: {
        tickfont: {
          size: 8
        }
      },
      angularaxis: {
        tickfont: {
          size: 8
        }
      }
    }
  }

Plotly.newPlot('myDiv', data, layout)
var data = [{
    type: "scatterpolargl",
    r: [1, 2, 3],
    theta: [50, 100, 200],
    marker: {symbol: "square"}
  }, {
    type: "scatterpolargl",
    r: [1, 2, 3],
    theta: [1, 2, 3],
    thetaunit: "radians"
  }, {
    type: "scatterpolargl",
    r: ["a", "b", "c", "b"],
    theta: ["D", "C", "B", "A"],
    subplot: "polar2"
  }, {
    type: "scatterpolargl",
    r: [50, 300, 900],
    theta: [0, 90, 180],
    subplot: "polar3"
  }, {
    type: "scatterpolargl",
    mode: "lines",
    r: [3, 3, 4, 3],
    theta: [0, 45, 90, 270],
    fill: "toself",
    subplot: "polar4"
  }]

var layout =  {
    polar: {
      domain: {
        x: [0, 0.46],
        y: [0.56, 1]
      },
      radialaxis: {
        range: [1, 4]
      },
      angularaxis: {
        thetaunit: "radians"
      }
    },
    polar2: {
      domain: {
        x: [0, 0.46],
        y: [0, 0.42]
      }
    },
    polar3: {
      domain: {
        x: [0.54, 1],
        y: [0.56, 1]
      },
      radialaxis: {
        type: "log",
        tickangle: 45
      },
      sector: [0, 180]
    },
    polar4: {
      domain: {
        x: [0.54, 1],
        y: [0, 0.44]
      },
      radialaxis: {
          visible: false,
          range: [0, 6]
      }
    },
    showlegend: false
  }


Plotly.newPlot('myDiv', data, layout);
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/hobbs-pearson-trials.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

var data = [
    {
      type: "scatterpolargl",
      r: unpack(rows, 'trial_1_r'),
      theta: unpack(rows, 'trial_1_theta'),
      mode: "markers",
      name: "Trial 1",
      marker: {
        color: "rgb(27,158,119)",
        size: 15,
        line: {
          color: "white"
        },
        opacity: 0.7
      },
      cliponaxis: false
    },
    {
      type: "scatterpolargl",
      r: unpack(rows, "trial_2_r"),
      theta: unpack(rows, "trial_2_theta"),
      mode: "markers",
      name: "Trial 2",
      marker: {
        color: "rgb(217,95,2)",
        size: 20,
        line: {
          color: "white"
        },
        "opacity": 0.7
      },
      "cliponaxis": false
    },
    {
      type: "scatterpolargl",
      r: unpack(rows, "trial_3_r"),
      theta: unpack(rows, "trial_3_theta"),
      mode: "markers",
      name: "Trial 3",
      marker: {
        color: "rgb(117,112,179)",
        size: 12,
        line: {
          color: "white"
        },
        opacity: 0.7
      },
      cliponaxis: false
    },
    {
      type: "scatterpolargl",
      r: unpack(rows, "trial_4_r"),
      theta: unpack(rows, "trial_4_theta"),
      mode: "markers",
      name: "Trial 4",
      marker: {
        color: "rgb(231,41,138)",
        size: 22,
        line: {
          color: "white"
        },
        opacity: 0.7
      },
      cliponaxis: false
    },
    {
      type: "scatterpolargl",
      r: unpack(rows, "trial_5_r"),
      theta: unpack(rows, "trial_5_theta"),
      mode: "markers",
      name: "Trial 5",
      marker: {
        color: "rgb(102,166,30)",
        size: 19,
        line: {
          color: "white"
        },
        opacity: 0.7
      },
      cliponaxis: false
    },
    {
      type: "scatterpolargl",
      r: unpack(rows, "trial_6_r"),
      theta: unpack(rows, "trial_6_theta"),
      mode: "markers",
      name: "Trial 6",
      marker: {
        color: "rgb(230,171,2)",
        size: 10,
        line: {
          color: "white"
        },
        opacity: 0.7
      },
      cliponaxis: false
    }
  ]

var layout = {
    title: "Hobbs-Pearson Trials",
    font: {
      size: 15
    },
    showlegend: false,
    polar: {
      bgcolor: "rgb(223, 223, 223)",
      angularaxis: {
        tickwidth: 2,
        linewidth: 3,
        layer: "below traces"
      },
      radialaxis: {
        side: "counterclockwise",
        showline: true,
        linewidth: 2,
        tickwidth: 2,
        gridcolor: "white",
        gridwidth: 2
      }
    },
    paper_bgcolor: "rgb(223, 223, 223)",
  }

Plotly.newPlot('myDiv', data, layout);
})