<!DOCTYPE html>
<html>
  <head>
    <title>Parsing CSV Data</title>
    <script src="https://unpkg.com/d3@7.0.1/dist/d3.min.js"></script>
    <style>
      pre {
        font-size: 7em;
      }
    </style>
  </head>
  <body>
    <pre id="message-container"></pre>
    <script>
      const fetchText = async (url) => {
        const response = await fetch(url);
        return await response.text();
      };
      const csvUrl =
        'https://gist.githubusercontent.com/OleJRask/83cbdff181085976320c4748d5611a05/raw/cssNamedColors.csv';

      fetchText(csvUrl).then((text) => {
        const data = d3.csvParse(text);
        let message = '';
        message =
          message +
          Math.round(text.length / 1024) +
          ' kB\n';
        message =
          message + data.columns.length + ' columns\n';
        message = message + data.length + ' rows';
        document.getElementById(
          'message-container'
        ).textContent = message;
      });
    </script>
  </body>
</html>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
