Integrating Google Sheets with d3.js || Javascript

      const key = '1XGL8PIsG3yqik2yeu_KSOW_uyvP0DvgK0T91Zz6s2Wo';
      const sheet_name = 'Sheet1';
      const csv = `https://docs.google.com/spreadsheets/d/${key}gviz/tq?tqx=out:\
      csv&sheet=${sheet_name}`;
      const load = async () => {
        const data = await d3.csv(csv, ({name, value}) => ({
          name: name, value: +value
        }));
        console.log(data);
      }
      

Steps:

Step 1: Create new google sheet and populate with data

Step 2: Click File > Pubish to web

Step 3: Copy the url that appears in the popup box

Step 4: Note that the url specifies a key to the workbook and a sheet name

Step 5: I prefer to include the key and sheet name as variables for code reusability

Step 6: Pass the csv variable into the d3.csv function and you should be ready to go!