JSX

<Tornado
  axis={{
    x: {
      numberFormat: '.2s',
      scale: 'LINEAR',
      ticks: 4
    },
    y: {
      tickSize: 0,
      ticks: 3
    }
  }}
  bar={{
    hover: {
      lighten: 0.1
    },
    overlayMargin: 10
  }}
  center
  data={{
    bins: [
      '0 - 10',
      '11 - 20'
    ],
    counts: [
      {
        data: [
          [
            5000,
            100000
          ],
          [
            10000,
            20000
          ]
        ],
        label: 'Background'
      },
      {
        data: [
          [
            2000,
            1000
          ],
          [
            5000,
            3000
          ]
        ],
        label: 'Foreground'
      }
    ]
  }}
  delay={0}
  duration={400}
  grid={{
    x: {
      style: {
        fill: '#000',
        opacity: 1,
        'shape-rendering': 'auto',
        stroke: '#ccc',
        'stroke-opacity': 0.4,
        'stroke-width': 1,
        visible: true
      },
      ticks: 5
    },
    y: {
      style: {
        fill: '#000',
        opacity: 1,
        'shape-rendering': 'auto',
        stroke: '#ccc',
        'stroke-opacity': 0.4,
        'stroke-width': 1,
        visible: true
      },
      ticks: 5
    }
  }}
  groupLayout={2}
  splitBins={[
    'Male',
    'Female'
  ]}
  width="100%"
/>