title: running a csv input API and connecting to a zoomable sunburst API
body: <p>I hope you are having a nice day.</p>
  <p>I am trying to use this CSV input API -- <a href="https://github.com/MounirMesselmeni/html-fileapi" rel="nofollow noreferrer">https://github.com/MounirMesselmeni/html-fileapi</a> -- to populate the data array in this zoomable sunburst API:https://plotly.com/javascript/plotlyjs-function-reference/.</p>
  <p>Currently, I am able to load in the CSV to the API, and the contents will show on the screen. However, the data is not connecting to the Data Visualization API Script. I am very confused as to why it is not.</p>
  <p>See the picture here -- [1]: <a href="https://i.stack.imgur.com/oQeY2.png" rel="nofollow noreferrer">https://i.stack.imgur.com/oQeY2.png</a></p>
  <p>Currently, the computer is saying there is a &quot;Unexpected end of input&quot; at the final  which the Data visualization API is contained within.</p>
  <p>It won't even reach the console.log(&quot;hello&quot;) statement within the script :,(</p>
  <p>The code looks like this:</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      &lt;title&gt;CSV to Zoomable Sunburs&lt;/title&gt;
      &lt;script src='https://cdn.plot.ly/plotly-latest.min.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;form class=&quot;form-horizontal well&quot;&gt;
              &lt;legend&gt;
                  &lt;h3&gt;
                      &lt;div id=&quot;title&quot;&gt;HTML5 File API&lt;/div&gt;
                  &lt;/h3&gt;
              &lt;/legend&gt;
              &lt;fieldset&gt;
                  &lt;label for=&quot;csvFileInput&quot;&gt; &lt;strong&gt;CSV File:&lt;/strong&gt;
                  &lt;/label&gt;
                  &lt;input type=&quot;file&quot; id=&quot;csvFileInput&quot; onchange=&quot;handleFiles(this.files)&quot; accept=&quot;.csv&quot;&gt;
      &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;/form&gt;
      &lt;div id=&quot;output&quot;&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id='myDiv'&gt;
          &lt;!-- Plotly chart will be drawn inside this DIV --&gt;
      &lt;/div&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;read-csv.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  
  &lt;script&gt;
      lines = FileReader.readAsText(Blob|File, opt_encoding);
      console.log(&quot;hello&quot;);
      pieces = []; 
      tempData = []; 
  </code></pre>
  <p>(also just to note tempData should hold all of the pieces of the data and then pieces will be used to populate the data array later more easily)</p>
  <pre><code>    while (typeof lines[0] !== &quot;undefined&quot;) {
  
          var line = lines.shift();
          var split = line.split(',');
  
          console.log(&quot;this is the line: &quot; + line);
          console.log(&quot;this is the split: &quot; + split);
  
          tempData.push(split);
          document.querySelector(&quot;#content&quot;).innerHTML += split[0] + &quot;&lt;br/&gt;&quot;;
      }
  
      // iterate through the temp data file
      for (let i = 0; i &lt; tempData.length; i += 1) {
          const currentKey = tempData[i];
          const currItem = calendarE[currentKey];
  
          if (i == 0) { // type
              pieces[0] = tempData[0];
          }
  </code></pre>
  <p>which then populates the data array as such:</p>
  <pre><code>        var data = [{
              type: pieces[0],
  
              labels: pieces[1],
              parents: pieces[2],
  
              outsidetextfont: { size: pieces[3], color: pieces[4], },
              leaf: { opacity: pieces[5], },
              marker: { line: { width: pieces[6], } },
          }];
  </code></pre>
  <p>and then ends as such:</p>
  <pre><code>    Plotly.newPlot('myDiv', data, layout);
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Any help as to why I am not getting any console.log statements from inside the data visualization script would be AWESOME thank you so so much!!</p>