Suggest an edit to this page

Polar Charts in JavaScript

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


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Line Polar Plot 

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);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/polar_dataset.csv', function(err, rows){\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar trace1 = {\n r: unpack(rows, 'x1'),\n theta: unpack(rows, 'y'),\n mode: 'lines',\n name: 'Figure8',\n line: {color: 'peru'},\n type: 'scatterpolar'\n};\n\nvar trace2 = {\n r: unpack(rows, 'x2'),\n theta: unpack(rows, 'y'),\n mode: 'lines',\n name: 'Cardioid',\n line: {color: 'darkviolet'},\n type: 'scatterpolar'\n};\n\nvar trace3 = {\n r: unpack(rows, 'x3'),\n theta: unpack(rows, 'y'),\n mode: 'lines',\n name: 'Hypercardioid',\n line: {color: 'deepskyblue'},\n type: 'scatterpolar'\n};\n\nvar trace4 = {\n\n r: unpack(rows, 'x4'),\n theta: unpack(rows, 'y'),\n mode: 'lines',\n name: 'Subcardioid',\n line: {color: 'orangered'},\n type: 'scatterpolar'\n};\n\nvar trace5 = {\n\n r: unpack(rows, 'x5'),\n theta: unpack(rows, 'y'),\n mode: 'lines',\n name: 'Supercardioid',\n marker: {\n color: 'none',\n line: {color: 'green'}\n },\n type: 'scatterpolar'\n};\n\nvar data = [trace1, trace2, trace3, trace4, trace5];\n\nvar layout = {\n title: {\n text: 'Mic Patterns'\n },\n font: {\n family: 'Arial, sans-serif;',\n size: 12,\n color: '#000'\n },\n showlegend: true,\n orientation: -90\n};\nPlotly.newPlot('myDiv', data, layout);\n});\n"}">

Area Polar Chart 

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)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"data = [\n {\n type: \"scatterpolar\",\n mode: \"lines\",\n r: [0, 1.5, 1.5, 0, 2.5, 2.5, 0],\n theta: [0, 10, 25, 0, 205, 215, 0],\n fill: \"toself\",\n fillcolor: '#709BFF',\n line: {\n color: 'black'\n }\n },\n {\n type: \"scatterpolar\",\n mode: \"lines\",\n r: [0, 3.5, 3.5, 0],\n theta: [0, 55, 75, 0],\n fill: \"toself\",\n fillcolor: '#E4FF87',\n line: {\n color: 'black'\n }\n },\n {\n type: \"scatterpolar\",\n mode: \"lines\",\n r: [0, 4.5, 4.5, 0, 4.5, 4.5, 0],\n theta: [0, 100, 120, 0, 305, 320, 0],\n fill: \"toself\",\n fillcolor: '#FFAA70',\n line: {\n color: 'black'\n }\n },\n {\n type: \"scatterpolar\",\n mode: \"lines\",\n r: [0, 4, 4, 0],\n theta: [0, 165, 195, 0],\n fill: \"toself\",\n fillcolor: '#FFDF70',\n line: {\n color: 'black'\n }\n },\n {\n type: \"scatterpolar\",\n mode: \"lines\",\n r: [0, 3, 3, 0],\n theta: [0, 262.5, 277.5, 0],\n fill: \"toself\",\n fillcolor: '#B6FFB4',\n line: {\n color: 'black'\n }\n }\n]\n\nlayout = {\n polar: {\n radialaxis: {\n visible: true,\n range: [0, 5]\n }\n },\n showlegend: false\n}\n\nPlotly.newPlot('myDiv', data, layout)\n"}">

Categorical Polar Chart 

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)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [\n {\n type: \"scatterpolar\",\n name: \"angular categories\",\n r: [5, 4, 2, 4, 5],\n theta: [\"a\", \"b\", \"c\", \"d\", \"a\"],\n fill: \"toself\"\n },\n {\n type: \"scatterpolar\",\n name: \"radial categories\",\n r: [\"a\", \"b\", \"c\", \"d\", \"b\", \"f\", \"a\"],\n theta: [1, 4, 2, 1.5, 1.5, 6, 5],\n thetaunit: \"radians\",\n fill: \"toself\",\n subplot: \"polar2\"\n },\n {\n type: \"scatterpolar\",\n name: \"angular categories (w/ categoryarray)\",\n r: [5, 4, 2, 4, 5],\n theta: [\"a\", \"b\", \"c\", \"d\", \"a\"],\n fill: \"toself\",\n subplot: \"polar3\"\n },\n {\n type: \"scatterpolar\",\n name: \"radial categories (w/ category descending)\",\n r: [\"a\", \"b\", \"c\", \"d\", \"b\", \"f\", \"a\", \"a\"],\n theta: [45, 90, 180, 200, 300, 15, 20, 45],\n fill: \"toself\",\n subplot: \"polar4\"\n },\n {\n type: \"scatterpolar\",\n name: \"angular categories (w/ extra category)\",\n r: [5, 4, 2, 4, 5, 5],\n theta: [\"b\", \"c\", \"d\", \"e\", \"a\", \"b\"],\n fill: \"toself\"\n }\n ]\n\nvar layout = {\n polar: {\n domain: {\n x: [0, 0.46],\n y: [0.56, 1]\n },\n radialaxis: {\n angle: 45\n },\n angularaxis: {\n direction: \"clockwise\",\n period: 6\n }\n },\n polar2: {\n domain: {\n x: [0, 0.46],\n y: [0, 0.44]\n },\n radialaxis: {\n angle: 180,\n tickangle: -180\n }\n },\n polar3: {\n domain: {\n x: [0.54, 1],\n y: [0.56, 1]\n },\n sector: [150, 400],\n radialaxis: {\n angle: -45\n },\n angularaxis: {\n categoryarray: [\"d\", \"a\", \"c\", \"b\"]\n }\n },\n polar4: {\n domain: {\n x: [0.54, 1],\n y: [0, 0.44]\n },\n radialaxis: {\n categoryorder: \"category descending\"\n },\n angularaxis: {\n thetaunit: \"radians\",\n dtick: 0.3141592653589793\n }\n }\n }\n\nPlotly.newPlot('myDiv', data, layout)\n"}">

Polar Chart Directions 

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)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [\n {\n type: \"scatterpolar\",\n mode: \"lines+markers\",\n r: [1,2,3,4,5],\n theta: [0,90,180,360,0],\n line: {\n color: \"#ff66ab\"\n },\n marker: {\n color: \"#8090c7\",\n symbol: \"square\",\n size: 8\n },\n subplot: \"polar\"\n },\n {\n type: \"scatterpolar\",\n mode: \"lines+markers\",\n r: [1,2,3,4,5],\n theta: [0,90,180,360,0],\n line: {\n color: \"#ff66ab\"\n },\n marker: {\n color: \"#8090c7\",\n symbol: \"square\",\n size: 8\n },\n subplot: \"polar2\"\n }\n ]\n\nvar layout = {\n showlegend: false,\n polar: {\n domain: {\n x: [0,0.4],\n y: [0,1]\n },\n radialaxis: {\n tickfont: {\n size: 8\n }\n },\n angularaxis: {\n tickfont: {\n size: 8\n },\n rotation: 90,\n direction: \"counterclockwise\"\n }\n },\n polar2: {\n domain: {\n x: [0.6,1],\n y: [0,1]\n },\n radialaxis: {\n tickfont: {\n size: 8\n }\n },\n angularaxis: {\n tickfont: {\n size: 8\n },\n direction: \"clockwise\"\n }\n }\n }\n\nPlotly.newPlot('myDiv', data, layout)\n"}">

Polar Chart Sector 

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)
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [\n {\n type: \"scatterpolar\",\n mode: \"lines+markers\",\n r: [1,2,3,4,5],\n theta: [0,90,180,360,0],\n line: {\n color: \"#ff66ab\"\n },\n marker: {\n color: \"#8090c7\",\n symbol: \"square\",\n size: 8\n },\n subplot: \"polar\"\n },\n {\n type: \"scatterpolar\",\n mode: \"lines+markers\",\n r: [1,2,3,4,5],\n theta: [0,90,180,360,0],\n line: {\n color: \"#ff66ab\"\n },\n marker: {\n color: \"#8090c7\",\n symbol: \"square\",\n size: 8\n },\n subplot: \"polar2\"\n }\n ]\n\nvar layout = {\n showlegend: false,\n polar: {\n\t\tsector: [145,215],\n domain: {\n x: [0,0.4],\n y: [0,1]\n },\n radialaxis: {\n tickfont: {\n size: 8\n }\n },\n angularaxis: {\n tickfont: {\n size: 8\n }\n }\n },\n polar2: {\n domain: {\n x: [0.6,1],\n y: [0,1]\n },\n radialaxis: {\n tickfont: {\n size: 8\n }\n },\n angularaxis: {\n tickfont: {\n size: 8\n }\n }\n }\n }\n\nPlotly.newPlot('myDiv', data, layout)\n"}">

Polar Chart Subplots 

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);
</script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"var data = [{\n type: \"scatterpolargl\",\n r: [1, 2, 3],\n theta: [50, 100, 200],\n marker: {symbol: \"square\"}\n }, {\n type: \"scatterpolargl\",\n r: [1, 2, 3],\n theta: [1, 2, 3],\n thetaunit: \"radians\"\n }, {\n type: \"scatterpolargl\",\n r: [\"a\", \"b\", \"c\", \"b\"],\n theta: [\"D\", \"C\", \"B\", \"A\"],\n subplot: \"polar2\"\n }, {\n type: \"scatterpolargl\",\n r: [50, 300, 900],\n theta: [0, 90, 180],\n subplot: \"polar3\"\n }, {\n type: \"scatterpolargl\",\n mode: \"lines\",\n r: [3, 3, 4, 3],\n theta: [0, 45, 90, 270],\n fill: \"toself\",\n subplot: \"polar4\"\n }]\n\nvar layout = {\n polar: {\n domain: {\n x: [0, 0.46],\n y: [0.56, 1]\n },\n radialaxis: {\n range: [1, 4]\n },\n angularaxis: {\n thetaunit: \"radians\"\n }\n },\n polar2: {\n domain: {\n x: [0, 0.46],\n y: [0, 0.42]\n }\n },\n polar3: {\n domain: {\n x: [0.54, 1],\n y: [0.56, 1]\n },\n radialaxis: {\n type: \"log\",\n tickangle: 45\n },\n sector: [0, 180]\n },\n polar4: {\n domain: {\n x: [0.54, 1],\n y: [0, 0.44]\n },\n radialaxis: {\n visible: false,\n range: [0, 6]\n }\n },\n showlegend: false\n }\n\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Webgl Polar Chart 

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);
})
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/hobbs-pearson-trials.csv', function(err, rows){\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar data = [\n {\n type: \"scatterpolargl\",\n r: unpack(rows, 'trial_1_r'),\n theta: unpack(rows, 'trial_1_theta'),\n mode: \"markers\",\n name: \"Trial 1\",\n marker: {\n color: \"rgb(27,158,119)\",\n size: 15,\n line: {\n color: \"white\"\n },\n opacity: 0.7\n },\n cliponaxis: false\n },\n {\n type: \"scatterpolargl\",\n r: unpack(rows, \"trial_2_r\"),\n theta: unpack(rows, \"trial_2_theta\"),\n mode: \"markers\",\n name: \"Trial 2\",\n marker: {\n color: \"rgb(217,95,2)\",\n size: 20,\n line: {\n color: \"white\"\n },\n \"opacity\": 0.7\n },\n \"cliponaxis\": false\n },\n {\n type: \"scatterpolargl\",\n r: unpack(rows, \"trial_3_r\"),\n theta: unpack(rows, \"trial_3_theta\"),\n mode: \"markers\",\n name: \"Trial 3\",\n marker: {\n color: \"rgb(117,112,179)\",\n size: 12,\n line: {\n color: \"white\"\n },\n opacity: 0.7\n },\n cliponaxis: false\n },\n {\n type: \"scatterpolargl\",\n r: unpack(rows, \"trial_4_r\"),\n theta: unpack(rows, \"trial_4_theta\"),\n mode: \"markers\",\n name: \"Trial 4\",\n marker: {\n color: \"rgb(231,41,138)\",\n size: 22,\n line: {\n color: \"white\"\n },\n opacity: 0.7\n },\n cliponaxis: false\n },\n {\n type: \"scatterpolargl\",\n r: unpack(rows, \"trial_5_r\"),\n theta: unpack(rows, \"trial_5_theta\"),\n mode: \"markers\",\n name: \"Trial 5\",\n marker: {\n color: \"rgb(102,166,30)\",\n size: 19,\n line: {\n color: \"white\"\n },\n opacity: 0.7\n },\n cliponaxis: false\n },\n {\n type: \"scatterpolargl\",\n r: unpack(rows, \"trial_6_r\"),\n theta: unpack(rows, \"trial_6_theta\"),\n mode: \"markers\",\n name: \"Trial 6\",\n marker: {\n color: \"rgb(230,171,2)\",\n size: 10,\n line: {\n color: \"white\"\n },\n opacity: 0.7\n },\n cliponaxis: false\n }\n ]\n\nvar layout = {\n title: {\n text: \"Hobbs-Pearson Trials\"\n },\n font: {\n size: 15\n },\n showlegend: false,\n polar: {\n bgcolor: \"rgb(223, 223, 223)\",\n angularaxis: {\n tickwidth: 2,\n linewidth: 3,\n layer: \"below traces\"\n },\n radialaxis: {\n side: \"counterclockwise\",\n showline: true,\n linewidth: 2,\n tickwidth: 2,\n gridcolor: \"white\",\n gridwidth: 2\n }\n },\n paper_bgcolor: \"rgb(223, 223, 223)\",\n }\n\nPlotly.newPlot('myDiv', data, layout);\n})\n"}">