Best strategy for loading CSV file

Questions
1

I’m starting a project to use BabylonJS for creative data visualizations, and I want to be able to load in data to visualize. Most of the time, the data is in a CSV file. Assuming the file has up to a hundred rows of data, what’s the best strategy for loading it? How about if there are a couple thousand rows?

I looked through the documentation Googled it and found a couple of ideas— eg, swiping d3’s data loading functions ( Data Visualization Authoring Tool - Demos and Projects - HTML5 Game Devs Forum )— but they all looked like ad hoc, duct tape solutions. Since I’m new to BabylonJS, and since my goal is to make it easier for folks who aren’t programmers to use BabylonJS for creative data viz, I thought I’d ask to see if there’s a standard/better solution.

Thanks!
Anders

2

Hello and welcome
In a different app (not related to Babylon.js) I read csv files with this code:

public static GetCells(line: string): string[] {
        var cells = [];

        let currentCell = "";
        let quoteCount = 0;
        for (var index = 0; index < line.length; index++) {
            let currentChar = line[index];

            if (currentChar === "\"") {
                quoteCount++;
                if (quoteCount === 2) {
                    quoteCount = 0;
                }
                continue;
            }

            if (currentChar === "," && quoteCount === 0) {
                cells.push(currentCell);
                currentCell = "";
                continue;
            }

            currentCell += currentChar;
        }
        if (currentCell) {
            cells.push(currentCell);
        }

        return cells;
    }

var allTextLines = data.split(/\r\n|\n/);
var headers = this.GetCells(allTextLines[0]);

Hope that helps :wink:

2 Likes
3

Hi @Anders.
Long time ago I did a scatterplot. And I used d3 to load the csv file.
This was my attempt then

code
live version
playground
Cheers!

2 Likes
4

Thanks, @MarianG and @Deltakosh! Very much appreciated. :slight_smile:

For anyone else who finds this thread, a few extra notes:

  • If you decide to use d3 like @MarianG did but you don’t need the whole library, you can import just the d3 module called d3-dsv; there’s a nice tutorial & demo on Glitch
  • If for some reason d3’s data loader doesn’t solve your need, a lot of folks seem to like Papa Parse, which is fast & has a crazy number of features

Thanks once again!
Anders