Old school D3 from simpler times

All examples By author By category About

biovisualize

Full window Github gist

Micropolar microphones

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="https://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="https://micropolar.org/micropolar-v0.2.2.js"></script>
    <style>
      div {
        float: left;
        border: #eee 1px solid;
        margin: 5px;
      }
    </style>
  </head>
  <body>

<div id="container1"></div>

<script>
      var config = {
        data: [
          {
            t: d3.range(0, 360 + 6, 6),
            r: d3.range(0, 360 + 6, 6).map(function(deg){
              return Math.abs(Math.cos(deg * Math.PI / 180));
            }),
            color: "none",
            strokeColor: "peru",
            geometry: "LinePlot",
            name: "Figure8"
          },
          {
            t: d3.range(0, 360 + 6, 6), r: d3.range(0, 360 + 6, 6).map(function(deg){
              return Math.abs(0.5 + 0.5 * Math.cos(deg * Math.PI / 180));
            }),
            color: "none",
            strokeColor: "darkviolet",
            geometry: "LinePlot",
            name: "Cardioid"
          },
          {
            t: d3.range(0, 360 + 6, 6), r: d3.range(0, 360 + 6, 6).map(function(deg){
              return Math.abs(0.25 + 0.75 * Math.cos(deg * Math.PI / 180));
            }),
            color: "none",
            strokeColor: "deepskyblue",
            geometry: "LinePlot",
            name: "Hypercardioid"
          },
          {
            t: d3.range(0, 360 + 6, 6), r: d3.range(0, 360 + 6, 6).map(function(deg){
              return Math.abs(0.7 + 0.3 * Math.cos(deg * Math.PI / 180));
            }),
            color: "none",
            strokeColor: "orangered",
            geometry: "LinePlot",
            name: "Subcardioid"
          },
          {
            t: d3.range(0, 360 + 6, 6), r: d3.range(0, 360 + 6, 6).map(function(deg){
              return Math.abs(0.37 + 0.63 * Math.cos(deg * Math.PI / 180));
            }),
            color: "none",
            strokeColor: "green",
            geometry: "LinePlot",
            name: "Supercardioid"
          }
        ],
        layout: {
          width: 400,
          height: 400,
          title: "Line Chart",
          orientation: -90,
          angularAxis: {ticksSuffix: "°"},
          radialAxis: {ticksSuffix: "dB"},
          needsEndSpacing: false,
          backgroundColor: "ghostwhite"
        }
      };

micropolar.Axis().config(config).render(d3.select('body').append('div'));

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://micropolar.org/micropolar-v0.2.2.js to a secure url

https://d3js.org/d3.v3.min.js

https://micropolar.org/micropolar-v0.2.2.js