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: {
text: '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: {
text: "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);
})
