blog example: vx

example-vx.jsx

function BarChart() {  
  const xScale = scaleBand({ rangeRound: [0, xMax], domain: data.map(d => d.letter) });
  const yScale = scaleLinear({ rangeRound: [yMax, 0], domain: [0, Math.max(...data.map(d => d.frequency))] });

  return (<svg width={width} height={height}>
    {data.map(d => {
      const barHeight = yMax - yScale(d.frequency);
      return (<Bar
        x={xScale(d.letter)}
        y={yMax - barHeight}
        width={xScale.bandwidth()}
        height={barHeight}
        fill="rgba(23, 233, 217, .5)"
      />);
    })}
  </svg>);
}