MAIDR Documentation - v4.4.0
    Preparing search index...
    • Binds a D3.js radar (spider) chart to MAIDR.

      A radar is a multi-line layer wrapped around a circle: selector matches one closed d3.lineRadial() <path> per series, x names the spoke (the variable) and fill names the series. The trace pans each spoke by its angle — 12 o'clock centre, 3 o'clock hard right — so a radar sounds like a circle rather than a row of bars, and nothing extra has to be computed here.

      A closed outline is usually drawn by repeating the first vertex at the end. That repeat is how the polygon closes, not a spoke of its own, so the binder drops a trailing sample whose x matches the first one — otherwise the chart announces one spoke more than it has, and the reader walks off the end into a duplicate.

      Parameters

      • svg: Element

        The SVG element containing the D3 radar chart.

      • config: D3LineConfig

        Configuration specifying selectors and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      bindD3Radar(svgElement, {
      selector: 'path.radar-area',
      title: 'Model Comparison',
      axes: { x: 'Attribute', y: 'Score', fill: 'Model' },
      x: 'attribute',
      y: 'score',
      fill: 'model',
      });