MAIDR Documentation - v4.4.0
    Preparing search index...

    Function bindD3Hexbin

    • Binds a D3.js hexbin density plot to MAIDR, generating the accessible data representation.

      Point selector at the hexagons — one per bin — and give x and y the inverse scales, so the bins announce their centres on the chart's own axes rather than in pixels. count defaults to a bin's length, which is what d3-hexbin gives it.

      The lattice rows are assembled from the emitted data rather than assumed: an empty bin is not drawn, so the rows do not all hold the same number of bins and no rectangular grid could be laid over them.

      Parameters

      • svg: Element

        The SVG element containing the D3 hexbin plot.

      • config: D3HexbinConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after D3 has rendered. Like every D3 binder, this reads each matched element's D3-bound __data__; calling it before .data().join() has run (or before the SVG is mounted) throws "No elements found for selector …".

      • MaidrD3
      • useD3Adapter
      const result = bindD3Hexbin(svgElement, {
        selector: 'path.hexagon',
        title: 'Point Density',
        axes: { x: 'Carat', y: 'Price', fill: 'Count' },
        x: d => xScale.invert(d.x),
        y: d => yScale.invert(d.y),
      });

    Settings

    Member Visibility