MAIDR Documentation - v4.4.0
    Preparing search index...
    • Binds a D3.js mosaic (marimekko) plot to MAIDR.

      A mosaic is a stacked bar chart in which the column widths also encode data — usually each category's share of all observations. That share is the one thing this binder reads that the stacked one does not, and it is worth supplying: a reader given only the segment heights has half the table, so a category of six people and one of six hundred read identically.

      The width is read from the datum, never measured off the rendered <rect>. A drawn width is a layout fact — padding, margins, the scale the columns were laid out on — and turning it back into a proportion would announce a number the data does not contain.

      count travels too when you have the contingency table the mosaic was drawn from, since those counts are the numbers a reader would quote back.

      Parameters

      • svg: Element

        The SVG element containing the D3 mosaic plot.

      • config: D3MosaicConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      bindD3Mosaic(svgElement, {
      selector: 'rect.cell',
      title: 'Survival by Passenger Class',
      axes: { x: 'Class', y: 'Proportion', fill: 'Outcome' },
      x: 'klass',
      y: 'share',
      fill: 'outcome',
      width: 'columnShare',
      count: 'n',
      });