Would like a mental model check here to confirm this is correct and there's no way to grab the data and use it outside of the `.then()` curious if there's some JS hackery that can be done to allow for this... Also worth noting the above code works for a url but I'm getting the error "Fetch API cannot load file:///Users/mayagans/Desktop/my_csv.csv. URL scheme must be "http" or "https" for CORS request." when I try to load my_csv.csv

I've read up a little but am still unsure about the reasoning for this abstraction, would like to add something above if possible!

1. It's mostly correct, you can use it outside 'then' too though, 'var data;' declared in a global scope can be updated once you get the data, but the issue is timing not scope, it must be after data is loaded to that variable, you can maybe add a button that calls the function to draw instead of calling inside the 'then'. There are many hacks in JS for sure, you can maybe add the csv text in the html inside a hidden element, read it using innerText and use the csv parse like you do it here in observable for example. 2. The error you get is a security measure browsers implement to ensure no one can steal files from your computer, so on a file:// protocol your browser does not allow reading other files. To host a web server (http://) you can use some easy to use tools like https://code.google.com/archive/p/onehttpd/ (as easy as you drag a folder onto it's icon and open localhost:xxxx on your browser) but there are far better and advanced ways.

I'm not able to spell out WHY we need to do this asynchronously...

To the best of my understanding, we are actually doing it synchronously here, FileAttahcment works asynchronously, it returns a promise that might resolve to a text string later, but our csv parse wants the string right now, so we make it wait till the FileAttachment finishes what it does. Hope this response is inline with the answer you are expecting?

SUPER helpful thank you so much!!!