MAIDR Documentation - v4.4.0
    Preparing search index...
    • Binds a D3.js lollipop chart to MAIDR.

      A lollipop is a dot plot with a stem to the baseline: the stem is what the mark looks like, not a second magnitude, so the extraction is again that of bindD3Bar.

      Point selector at the heads (one <circle> per category) or at a <g> wrapping each head-and-stem pair — one matched element per category. A selector that also matched the <line> stems would produce two elements per category, so the data would be doubled and highlighting would land on the wrong mark.

      Parameters

      • svg: Element

        The SVG element (or container) containing the D3 lollipop chart.

      • config: D3BarConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      bindD3Lollipop(svgElement, {
      selector: 'circle.head',
      title: 'Life Expectancy',
      orientation: Orientation.HORIZONTAL,
      axes: { x: 'Years', y: 'Country' },
      x: 'years',
      y: 'country',
      });