What is the best way to extract and process CSV data from a JavaScript array of strings to incorporate into d3 visualizations?

I am looking to utilize data stored in a JavaScript array of strings to create a d3 graph that showcases a time series of timestamp (t), receive (rx), and transmit (tx) counters. Each element in the array represents one line of time, rx, tx data with comma separators. Instead of using d3.request based methods, I have already retrieved the file from the server using server-side Lua code and inserted the data into the page using jslines.push(string).

109 // Displaying current results
110 for (i=0; i < jslines.length; i++) {
111     console.log(i + ": " + jslines[i]);
112 }

The section above confirms that the data is as described. At this stage, I am focused on extracting each of the 3 data values from a 'line' and then repeating the process. I am not concerned if they remain as strings at this point, as they will be converted to numbers later.

I am using https://github.com/d3/d3-dsv/blob/master/README.md#csvParseRows as my guide, although it seems like I may be misunderstanding the necessary steps.

114 var dataArray = d3.csvParseRows(jslines, function(d, i) {
115   return {
116     time: d[0],
117     rx:   d[1],
118     tx:   d[2]
119   };
120 });

I would appreciate any kind suggestions or a functional example of how to parse and prepare data using d3 that is not retrieved directly from a remote or local file by d3 itself. Many examples available seem to involve pulling file content across to the client station through d3, which I aim to avoid.

Thank you, Alan

Answer №1

If you happen to already possess a string, you can easily split it by following this approach:

let sampleString = "1,2,3";
let arraySplit = sampleString.split(",");
console.log(arraySplit[1]);

Specifically tailored for your scenario, you can retrieve the data in the following manner:

let extractedData = jslines.map(function(line) {
  let dataExtracted = line.split(",");
  return({timeStamp: dataExtracted[0], receivedTx: dataExtracted[1], transmittedTx: dataExtracted[2]});
})

Subsequently, proceed with constructing your d3 plot based on the resultant array of objects.

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

Is it possible to have Bootstrap 3 Navigation Tabs positioned at both the top and bottom of a

While working on a Bootstrap 3 website, I discovered that it is possible to have both a top nav-tab and bottom nav-tab section on the same page. These two distinct tab menus can control the display of the same tab content areas. However, I encountered an ...

steps for setting up socket.io client

Would it be possible to reference the socket.io client library using a relative path like: src="/socket.io/socket.io.js" instead of the absolute path: src="https://miweb:6969/socket.io/socket.io.js" To establish a connection with the library, typically ...

Leveraging an array within an SQL IN statement

Here's a two-part query I'm working on using PostGres: My SQL query is structured as follows: $.ajax({ url: "https://something?q=SELECT *database_final_form_merge where territory in ("+terrs+")", type: 'GET', d ...

I expect my webpage to automatically redirect after I submit a user login form

I'm in the process of creating a website with two main pages: a Homepage and an admin panel page. Utilizing the MERN stack for development. At this moment, I have set up a scenario where clicking on the admin link in the navigation bar triggers a us ...

Struggling to display the array after adding a new item with the push method

Seeking assistance in JavaScript as a newcomer. I have written some code to print an array once a new item is added, but unfortunately, it's not displaying the array. I am puzzled as there are no errors showing up in the console either. In my code, I ...

Preventing jQuery parser from turning arrays into objects

My JavaScript data file has the following structure: data = { items : [ {name: 'ABC'}, {name: 'CDF'} ] } After passing this data to $.ajax(type: 'POST', data: data), the converted data appears like this: it ...

Using Angular 5 to showcase multiple charts with Chart.js, each chart appearing on its own tab

I have successfully displayed a single chart, but I am facing an issue while trying to display that chart for each tab of a mat-tab-group with different data on each tab. The chart is a part of a larger dashboard consisting of multiple charts, and I have i ...

The Angular app.component.html is failing to display the newly added component

Having some trouble rendering my new component in the browser. I've set up a fresh project using the Angular CLI and created a component named list-employees. Upon running ng serve -o, the project compiles without errors, but the browser displays a b ...

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

Here is an array of objects I've named mycart[]: [{"id":"6","quantity":"20","price":1500,"title":"casual blue strip"}, {"id":"10","quantity":"2","price":1500,"title":"casual blue round neck"},{"id":"5","quantity":20,"price":150,"title":"casual ...

I designed my higher-order component to allow for dual invocations. How can I integrate Redux within this framework?

I have implemented my higher-order component (HOC) in such a way that it can be invoked twice, emphasizing the concept of "functional programming". However, I am facing challenges in connecting Redux to access state and certain functions. I would greatly ...

Utilize socket communication with node.js to monitor and identify user

I'm attempting to find a method to unsubscribe from a Redis channel when the user navigates to another page within our website. I have attempted to detect a disconnect socket event when the user clicks on a link, but unfortunately, the event is never ...

Examining Resolver Functionality within NestJS

Today I am diving into the world of writing tests for NestJs resolvers. I have already written tests for my services, but now it's time to tackle testing resolvers. However, I realized that there is a lack of documentation on testing resolvers in the ...

Tips for executing a jQuery nested template in a recursive manner

Imagine a world where JSON objects and jQuery templating collide in a thought-provoking inception-like scenario. How can we dive deeper into this rabbit hole? The catch is, I'm a bit lazy and hoping the code will do most of the heavy lifting... Q:& ...

The Bootstrap form validation is preventing the Ajax request from functioning properly

Having successfully implemented a form with Bootstrap validation, I encountered an issue where the AJAX Post method fails to execute after validation. The catch clause does not capture any errors and only the ajax portion of the code doesn't run. Belo ...

Sending an array to another file upon button click event in a React application

Hey everyone, I'm currently getting started with React. I have this interesting situation where I need to handle an array of IDs that are obtained from selected checkboxes. My goal is to pass this array to another file called Employee.js when a button ...

Occasional issue with Bootstrap where jQuery is required for JavaScript

Recently I have started implementing requirejs in my project, but I have encountered a persistent issue that I am unable to resolve. The error message "Bootstrap's JavaScript requires jQuery" randomly appears when I load my application. Below are the ...

Transform your CSV data into JSON using Node.js and store it within a variable for easy access

Currently, I have this code snippet as a starting point and my task is to utilize it in order to convert the content of "world_data.csv" into JSON format. I am unsure of how to store this JSON data in a variable. I suspect that the desired data is tempora ...

Discover the VBA searching formula

In my current code, I am searching for a name in column A of a row and moving it to the corresponding cell 2 columns over if found. However, I want to enhance this process to search against a list of names rather than just one. The list of names is stored ...

Utilize PHP within an HTML form for action without causing a redirection

I am working on an HTML form that looks like this: <form id="ContactForm" name="ContactForm" method="post" action="emailinfo.php"> On the form, there is a submit button that triggers the verify() function: <a href="#" class="button1" onClick="v ...

Using Swift to encode arrays with NSCoder

Currently, I am working on implementing the NSCoder feature, but I have encountered a persistent issue. My main objective is to save an array of strings using NSCoder to a local file and then load it when the app is reopened. Below is the class I have cre ...