D3 Components

Mosaic Plot

<div id="mosaic-plot-default"></div>
<div id="mosaic-plot-customized"></div>

<script>
  d3.json('../data/titanic-passengers.json', function (data) {
    d3.mosaicPlot(data, { id: 'mosaic-plot-default' });
  });
  d3.json('../data/titanic-passengers.json', function (data) {
    d3.shuffle(data);
    d3.mosaicPlot(data, {
      id: 'mosaic-plot-customized',
      columns: ['1st', '2nd', '3rd', 'crew'],
      rows: ['female', 'male'],
      series: ['no', 'yes'],
      colorScheme: ['#e2272a', '#00a037'],
      scaleZ: {
        paddingMidst: 0.02
      },
      labels: {
        show: true
      },
      tooltip: {
        html: function (d) {
          var html = 'class: ' + d.column + '<br/>sex: ' + d.row;
          if (d.series) {
            html += '<br/>survived: ' + d.series;
          }
          return html + '<br/>count: ' + d.value;
        }
      },
      stroke: 'currentColor'
    });
  });
</script>