JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Babel + JSX

const { useState, useEffect, useRef, useMemo } = React;

const App = (props) => {
  const chartRef = useRef(null);

  const [ chartPoints, setChartPoints ] = useState([]);

  const onFilterClick = (e) => {
    const f = props.filters[e.target.dataset.index].f;
    setChartPoints(props.chartPoints.filter(f));
  };

  const chart = useMemo(() => {
    if (!chartRef.current) {
      return null;
    }

    const margin = {
      top: 40,
      right: 20,
      bottom: 50,
      left: 40,
    };
  
    const graphWidth = 745 - margin.right - margin.left;
    const graphHeight = 500 - margin.top - margin.bottom;

    const svg = d3.select(chartRef.current).append('svg')
      .attr('width', graphWidth + margin.left + margin.right)
      .attr('height', graphHeight + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

    const xScale = d3.scaleTime();
    const yScale = d3.scaleLinear();

    svg.append('g')
      .attr('id', 'xAxis')
      .attr('transform', `translate(0, ${graphHeight})`);

    svg.append('g')
      .attr('id', 'yAxis')
      .attr('transform', `translate(${graphWidth}, 0)`);

    svg.append('path')
      .data([[]])
      .style('fill', 'none')
      .attr('id', 'priceChart')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', '1.5');

    return { svg, xScale, yScale, graphWidth, graphHeight };
  }, [ chartRef.current ]);

  useEffect(() => {
    if (chart) {
      const xMin = d3.min(chartPoints, d => d.date);
      const xMax = d3.max(chartPoints, d => d.date);
      const yMin = d3.min(chartPoints, d => d.value);
      const yMax = d3.max(chartPoints, d => d.value);

      chart.xScale.domain([ xMin, xMax ]).range([ 0, chart.graphWidth ]);
      chart.yScale.domain([ yMin, yMax ]).range([ chart.graphHeight, 0 ]);

      chart.svg.select('#xAxis')
        .call(d3.axisBottom(chart.xScale));

      chart.svg.select('#yAxis')
       ...