Guide on how to import a CSV file into an Angular project using tensorflow.js

Having trouble uploading a CSV file from the assets folder in my Angular project using tf.data.csv. The code doesn't seem to recognize the file, resulting in an empty object being created. Can we even upload a CSV via tf.data.csv() from the assets? And if so, how can it be done? :)

async loadData(){
  const csvUrl = 'assets/tfjs_model/lsm6dsm.csv' as string;
    const csvDataset = tf.data.csv(csvUrl, 
    {
      hasHeader:false, 
      columnNames:["timestamp", "x-axis","y-axis","z-axis"],
    }
    ) as any;
    console.log(csvDataset);
    return csvDataset
  }

Console Output:

base: e {size: null, input: e}

columnConfigs: undefined

columnNamesValidated: false

configuredColumnsOnly: undefined

delimWhitespace: false

delimiter: ","

fullColumnNames: (4) ["timestamp", "x-axis", "y-axis", "z-axis"]

hasHeader: false

input: e {url: "assets/tfjs_model/lsm6dsm.csv", fileOptions: {…}}

size: null

proto: t

javascriptangulartypescripttensorflow.js

Answer №1

Absolutely, it is definitely possible. If your CSV includes column headers within double quotes, you can attempt the following:

async function sampleFunction(){

// Load data from a CSV file
const dataset = tf.data.csv('https://raw.githubusercontent.com/JuliaStats/RDatasets.jl/master/doc/datasets.csv');

// Extract x and y values for plotting
const pointsDataset = dataset.map(record => ({
    x: record["\"Rows\""],
    y: record["\"Columns\""]
}));

const pointsData = await pointsDataset.toArray();

console.log(pointsData);
}

sampleFunction();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on integrating ngrx-store with a canLoad guard for optimal functionality

Is this a recommended practice? Below is what I am attempting to do: I have two lazy loaded modules: ManagementModule and ConfigurationModule, with the following route configuration: const routes: Routes = [ {path: '', redirectTo: 'manag ...

angularngrxngrx-effectsngrx-store-4.0

Unable to configure raycaster layers within Three.js framework

While attempting to configure the raycaster layer to only cast on a single layer, as outlined in the threejs documentation: - I encountered the following error Uncaught TypeError: Cannot read properties of undefined (reading 'set') What could b ...

javascriptthree.js

What is the process for parameterizing a tuple in coding?

In my scenario, I have a tuple with interrelated types. Specifically, it involves an extractor function that retrieves a value, which is then used as input for another function. What I envision conceptually looks like this code snippet, although it does n ...

typescript

Undefined error encountered in the Google Places library

I'm new to working with the Ionic framework and was experimenting with implementing an autocomplete search feature using the Google Maps API. After going through several resources, I included the following code: <script type="text/javascript" src ...

htmlangulargoogle-mapsionic-frameworkionic4

Use an extension module in a Node.js script

I am currently working on integrating babylon.js into my Node.js Angular application. Current Integration Process 1) I have installed the babylon.js npm repository in my project's node modules using npm install --save babylonjs. The image below i ...

node.jstypescriptnpmimportbabylonjs

Searching for values within an array using the ".includes" method

I'm curious if there's a method to determine if a string contains any characters that are also present in an array? const array = ["cake", "hello", "ok"]; const string = "hello"; let result = string.include ...

javascriptarrays

Is there a way to load just one model in three.js without loading multiple models simultaneously?

I've been working on a project involving a three.js scene where items are added based on the number of existing items, and a problem I've encountered is that when a user selects "Work at Height", two people are added to the scene. Despite being s ...

javascriptjquerythree.js

Is it feasible to commit an object on Vue X through Actions?

I have a question regarding Vue X and actions (with commit). Can an object be passed as input in Commit? Similar to: ... action{ ResetLoginStats({commit}){ commit({ 'SetMutation1':false, 'SetMutation2':true, &a ...

javascriptvue.js

Angular Image Cropping: A How-To Guide

I have been on the lookout for an Angular plugin that allows me to crop images before uploading them to the database. Despite spending all day searching, I have not been able to find a suitable plugin that meets my requirements. What I need specifically i ...

angular

What is the best way to upgrade the "import {Http, Response} from @angular/http" module for Angular 6?

Here is a code snippet that I am working with: import { Injectable } from '@angular/core'; import { Dish } from '../shared/dish'; import { Observable } from 'rxjs'; import { HttpClient, HttpResponse } from '@angular/c ...

angularmodulenativescripthttpclientupdates

Engage with elements enhanced by jQuery functionality

Here's a simple example: <div id="test">add more text</div> Clicking on the above text triggers this code: jQuery('#test').on('click', function (event) { $('body').append("<div id='newtest' ...

javascriptjquery

Exploring arrays within objects with Angular

REACT: this.countries = this.api.fetchAllCountries(); this.countries.forEach(item => { this.countryData.push(item); }); VUE: <div v-for="country in countryData" @click="displayCountryInfo(country ...

arraysangulartypescriptobjectngfor

Tips for modifying the hue of the hint attribute within vue.js?

`<v-text-field id="loginPasswordId" ref="password" v-model="password" class="login-input" dense :disabled="loading" :hint="hello world" :loading="loading" maxlength= ...

javascriptvue.jsvue-componentvuetify.js

PHP and JS with Jquery often face challenges when trying to work together due to their conflicting array structures

This is a perplexing issue that has me stumped. I retrieved an array of workers from a MySQL database using json_encode and then copied it to two other arrays for future operations. var workers = <?php echo json_encode($tablica_pracownikow); ?>; va ...

phpjavascriptjquerymysqlarrays

VueJS advisory: Refrain from directly altering a prop

When attempting to modify a prop value using the @click directive, I encountered a warning message: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed pr ...

javascriptvue.jsvuejs2vue-componentvue-reactivity

default browser's drag and reposition feature

I'm trying to make an image draggable on my webpage by using default browser behavior, but it's not working for some reason. Here is the code snippet I'm using: <div style="position:relative;width:1000px; height:900px;border:solid;z-inde ...

javascriptjqueryhtml

Encountering a problem during the installation of angular-route.d.ts

When trying to install angular-route using the command typings install angular-route --save -global, I encountered an error. Can someone help me resolve this issue? typings ERR! message Unable to find "angular-route" ("npm") in the registry. typings ERR! ...

angularjstypescriptangular-routingtypescript-typings

Save the ID of the list item by wrapping it and storing it in a table cell

I need help with a situation where I have a list of items stored in table cells, and each cell contains a list item. My goal is to save the id of each list item into the cell that contains it. For example: <td><li id='itemID'>content ...

javascriptjqueryhtml-table

What is the true function of the `as` keyword within a mapped type?

I am new to typescript and I find the usage of as confusing in the following example. type foo = "a" | "b" | 1 | 2; type bar = { [k in foo as number]: any } This example passes type checking. The resulting bar type is transformed i ...

typescript

Obtaining the camera's rotation in radians using Three.js

I've been struggling to grasp the concepts of quaternions for quite some time now, and I suspect they may be the root cause of my current challenge. If you're familiar with three.js, you might know about the equirectangular panorama video exampl ...

javascript3dthree.js