title: Nivo Pie Chart Not Rendering
body: <p>I'm using the nivo charting library and am struggling to get my pie charts to render. I really don't understand why the pie chart isn't showing up. </p>
  
  <p>Here is my core component code for the dashboard:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  import Amplify, { Storage } from "aws-amplify";
  import Paper from "@material-ui/core/Paper";
  import Box from "@material-ui/core/Box";
  import Grid from "@material-ui/core/Grid";
  import awsmobile from "./aws-exports";
  import * as d3 from "d3";
  import CircularProgress from "@material-ui/core/CircularProgress";
  import MyResponsivePie from "./pieConfig";
  import useStyles from "./useStyles";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import IconButton from "@material-ui/core/IconButton";
  import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
  import Typography from "@material-ui/core/Typography";
  
  Amplify.configure(awsmobile);
  Storage.configure({ level: "private" });
  
  export default function Dashboard() {
    useEffect(() =&gt; {
      getFile();
    }, []);
  
    const classes = useStyles();
    const [dashboard, showDashboard] = useState(false);
    const [dashboardfile, setFile] = useState();
  
    const getFile = async () =&gt; {
      const url = await get_url().catch(err =&gt; getFile());
      const file = await d3.csv(url);
      if (file) {
        console.log(file);
        setFile(file);
        showDashboard(true);
      }
    };
  
    const get_url = () =&gt; {
      var url = Storage.get("output.csv", { level: "private" }, { expires: 60 });
      console.log(url);
      return url;
    };
  
    const countColumnValues = (file, column) =&gt; {
      var data_count = d3
        .nest()
        .key(function(d) {
          return d[column];
        })
        .rollup(function(leaves) {
          return leaves.length;
        })
        .entries(file);
  
      console.log(data_count);
      return data_count;
    };
  
    const generatePie = (file, column) =&gt; {
      var data = countColumnValues(file, column);
      return data;
    };
  
    return (
      &lt;Box className={classes.root}&gt;
        &lt;AppBar position="static"&gt;
          &lt;Toolbar&gt;
            &lt;IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
            &gt;
              &lt;CloudDownloadIcon onClick={get_url}&gt;&lt;/CloudDownloadIcon&gt;
            &lt;/IconButton&gt;
            &lt;Typography variant="h6" className={classes.title}&gt;
              Atreides Controls NLP Dashboard
            &lt;/Typography&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        {dashboard === false &amp;&amp; (
          &lt;div className={classes.circle}&gt;
            &lt;CircularProgress /&gt;
          &lt;/div&gt;
        )}
  
        {dashboard &amp;&amp; (
          &lt;div className={classes.root}&gt;
            &lt;Grid container direction="row" space={3}&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="contains_who_pie"
                      data={generatePie(dashboardfile, "contains_whos")}
                    /&gt;{" "}
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="contains_what_pie"
                      data={generatePie(dashboardfile, "contains_whats")}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="contains_how_pie"
                      data={generatePie(dashboardfile, "contains_hows")}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
            &lt;Grid container direction="row" space={3}&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="multiple_who_pie"
                      data={generatePie(dashboardfile, "multiple_whos")}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="multiple_what_pie"
                      data={generatePie(dashboardfile, "multiple_whats")}
                    /&gt;{" "}
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="multiple_how_pie"
                      data={generatePie(dashboardfile, "multiple_hows")}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
            &lt;Grid container direction="row" space={3}&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="risk_relevance_pie"
                      data={generatePie(
                        dashboardfile,
                        "control_relevance_to_risk"
                      )}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="automated_manual_pie"
                      data={generatePie(dashboardfile, "")}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs&gt;
                &lt;Paper className={classes.paper}&gt;
                  &lt;div className={classes.pie}&gt;
                    &lt;MyResponsivePie
                      id="preventative_detective_pie"
                      data={generatePie(dashboardfile, "")}
                    /&gt;
                  &lt;/div&gt;
                &lt;/Paper&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/div&gt;
        )}
      &lt;/Box&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The pie chart component is configured using this component that I am importing:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { ResponsivePie } from "@nivo/pie";
  
  const MyResponsivePie = ({ data }) =&gt; (
    &lt;ResponsivePie
      data={data}
      margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
      startAngle={-180}
      innerRadius={0.5}
      padAngle={0.7}
      cornerRadius={3}
      colors={{ scheme: "nivo" }}
      borderWidth={1}
      borderColor={{ theme: "grid.line.stroke" }}
      radialLabelsSkipAngle={10}
      radialLabelsTextXOffset={6}
      radialLabelsTextColor="#333333"
      radialLabelsLinkOffset={0}
      radialLabelsLinkDiagonalLength={16}
      radialLabelsLinkHorizontalLength={24}
      radialLabelsLinkStrokeWidth={3}
      radialLabelsLinkColor={{ from: "color", modifiers: [] }}
      slicesLabelsSkipAngle={10}
      slicesLabelsTextColor="#333333"
      animate={true}
      motionStiffness={90}
      motionDamping={15}
      legends={[
        {
          anchor: "bottom",
          direction: "row",
          translateY: 56,
          itemWidth: 100,
          itemHeight: 18,
          itemTextColor: "#999",
          symbolSize: 18,
          symbolShape: "circle",
          effects: [
            {
              on: "hover",
              style: {
                itemTextColor: "#000"
              }
            }
          ]
        }
      ]}
    /&gt;
  );
  
  export default MyResponsivePie;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and my styles file looks like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { green } from "@material-ui/core/colors";
  import { makeStyles } from "@material-ui/core/styles";
  import { forceCenter } from "d3";
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      height: "100vh"
    },
    success: {
      backgroundColor: green[600]
    },
    error: {
      backgroundColor: theme.palette.error.dark
    },
    icon: {
      fontSize: 20
    },
    iconVariant: {
      opacity: 0.9,
      marginRight: theme.spacing(1)
    },
    message: {
      display: "flex",
      alignItems: "center"
    },
    image: {
      backgroundImage: "url(https://source.unsplash.com/8WFnEehJWso)",
      backgroundRepeat: "no-repeat",
      backgroundColor:
        theme.palette.type === "dark"
          ? theme.palette.grey[900]
          : theme.palette.grey[50],
      backgroundSize: "cover",
      backgroundPosition: "center"
    },
    paper: {
      margin: theme.spacing(1.5, 3),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    },
    card: {
      maxWidth: 600
    },
    media: {
      height: 500
    },
    circle: {
      display: "flex",
      "&amp; &gt; * + *": {
        marginLeft: theme.spacing(2)
      }
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1,
      alignContent: "center"
    },
    pie: {
      height: 250
    }
  }));
  
  export default useStyles;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Lastly an example of my data that is coming back from the generate pie function is like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>[
  {key: "True", value: 7981},
  {key: "False", value: 950}
  ]</code></pre>
  </div>
  </div>
  </p>