react-effect-d3.js

import React, { useEffect } from 'react';
import * as d3 from 'd3';

const width = 450;
const height = 450;
const margin = 40;
const colors = ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"];

function PieChart({ data }) {
  useEffect(() => {
    const radius = Math.min(width, height) / 2 - margin;

    let svg = d3.select("#pieWidget")
      .append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    const color = d3.scaleOrdinal()
      .domain(data)
      .range(colors);

    const pie = d3.pie()
      .value((d) => d.value);

    svg
      .selectAll('whatever')
      .data(pie(d3.entries(data)))
      .enter()
      .append('path')
      .attr('d', d3.arc()
        .innerRadius(0)
        .outerRadius(radius)
      )
      .attr('fill', (d) => color(d.data.key))
      .attr("stroke", "black")
      .style("stroke-width", "2px")
      .style("opacity", 0.7);
  
  }, [data]);

  return (
    <svg id="pieWidget">
  );
}