histogram of arizona votes for congress

arizona.jsx

const W = (n) => `${Math.ceil(n / 500)}px`;

const baseBar = {
  display: 'inline-block',
  paddingTop: '8px',
  paddingBottom: '8px',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  fontFamily: 'Helvetica',
};

const container = {
  textAlign: 'center',
};

const darkRed = '#fbb4ae';
const lightRed = '#e41a1c';
const darkBlue = '#b3cde3';
const lightBlue = '#377eb8';

const centerBar = {
  backgroundColor: 'black',
  display: 'none',
  width: '2px',
  height: '29px',
  top: '3px',
  position: 'relative',
};

const Bar = ({ rn, rv, dn, dv }) => {
  const half = (rv + dv) / 2;
  return (
    <div style={container}>
      <span
        style={{
          ...baseBar,
          width: W(rv < half ? rv : half),
          backgroundColor: darkRed,
          textAlign: 'left',
        }}>
        &nbsp;&nbsp;{rn}
      </span>
      {rv > dv ? (
        <>
          <span
            style={{
              ...baseBar,
              width: W(Math.max(rv, dv) - half),
              backgroundColor: lightRed,
            }}>
            &nbsp;
          </span>
          <span
            style={{
              ...baseBar,
              ...centerBar,
            }}></span>
        </>
      ) : (
        <>
          <span
            style={{
              ...baseBar,
              width: W(Math.max(rv, dv) - half),
              backgroundColor: lightBlue,
            }}>
            &nbsp;
          </span>
          <span
            style={{
              ...baseBar,
              ...centerBar,
            }}></span>
        </>
      )}
      <span
        style={{
          ...baseBar,
          width: W(dv < half ? dv : half),
          textAlign: 'right',
          backgroundColor: darkBlue,
        }}>
        {dn}&nbsp;&nbsp;
      </span>
    </div>
  );
};
const Races = () => {
  return (
    <>
      <Bar rn={'Schweikert'} rv={181673} dn={'Hodge'} dv={178544} />
      <Bar rn={'Crane'} rv={174063} dn={"O'Halleran"} dv={148948} />
      <Bar rn={'Zink'} rv={32319} dn={'Gallego'} dv={108055} />
      <Bar rn={'Cooper'} rv={115886} dn={'Stanton'} dv={148302} />
      <Bar rn={'Biggs '} rv={181961} dn={'Ramos'} dv={119872} />
      <Bar rn={'Ciscomani '} rv={177201} dn={'Engel'} dv={171969} />
      <Bar dn={'Grijalva '} rv={69413} rn={'Pozzolo'} dv={126350} />
    </>
  );
};

export default Races;