CSV File Parsing with D3
In a recent React project I had to pull data from a CSV file, parse through the information, and display the data. This seemed like an easy enough task, and with some quick googling it seemed PapaParse was the obvious choice. With both a vanilla JavaScript package, and a separate React specific package for parsing CSV data, how hard could it be? I imagine it is very easy if you know what you’re doing, but for some reason I couldn’t ever get it to work properly with my code.
The biggest issue I ran into was just reading the data. According to the PapaParse documentation, you have a few different options for parsing CSV. You can pass the data in as a string, but I was trying to just pull the data directly from a local file. You could also pass in a local file to the parse function. Unfortunately, even after following several posts highlighting the process, I could never get the file data back from the parse method. The most popular process I found in my search was uploading the file in a form, parsing the data passed in, and then displaying the data in a table. In my case however, I had the data, and building a form to pass it in again seemed ridiculous. I also didn’t need to display the data, just read it. The last option I found was to pull the data from an external URL. This seemed like a great option for me, as the file was originally downloaded from the web. Unfortunately my attempt to do so was blocked by CORS.
By this point, I had wasted quite a bit of time on what seemed to be an easy problem on the surface. I don’t doubt my problem is easily fixable with PapaParse, but for whatever reason it wasn’t clicking for me. After some more frantic searching though, my prayers were finally answered.
I found the D3 NPM package. Within a matter of minutes the package was installed, and I slapped a couple quick imports in my React component.
Then, to my utter shock and horror, it worked!
I made an array to hold the data. The D3 csv method grabbed each individual row of the CSV file, converted it into an object, and I added each object to the array. I couldn’t believe how simple it was, especially after spending way too long trying to figure out the PapaParse solution.
If I run into a situation where I want to upload CSV files, I may still be reaching for PapaParse. But for extracting or even just working with data, I’ll definitely be reaching for D3. D3's gallery page has all sorts of cool examples of what you can do with their plugin and your data as well!
