Parsing data to suite a line chart

[moys]

I have a data as below in a .csv file.

dataDescription 3-Aug-21    4-Aug-21    5-Aug-21    6-Aug-21    7-Aug-21
Latency_PRL 551.08  551.34  551.55  551.74  551.9
Supliment_PRL   552.5   552.8   553.3   553.65  553.95
Variant_PRL 582.52  583.06  583.38  583.68  584.02
Heat_PRL    870.37  870.63  870.37  870.2   870.42
Humidity_PRL    889.77  889.8   889.9   889.93  890.08
Latency_PS  117.69  120.1   122.08  123.84  125.53
Supliment_PS    100.14  101.2   103 104.27  105.36
Variant_PS  12.65   13.29   13.68   14.05   14.47
Heat_PS 7.37    7.67    7.38    719 7.43
Humidity_PS 34.57   34.63   34.94   35.03   35.51
Latency_Index   15012   32829   27850   24319   24716
Supliment_Index 12904   16613   21496   19396   16037
Variant_Index   2440    7363    4567    4282    4867
Heat_Index  3220    6619    4518    7487    12557
Humidity_Index  5605    6457    11978   11709   11532

This is actually 3 different tables in 1. If you look at the column dataDescription, you will notice that the first 5 rows have ‘PRL’ , the second 5 have ‘PS’ and the last five have ‘Index’. So, first five rows is one set of data, the 2nd five the next set & so on.

I want to build 3 line charts (one for 'PRL, another for PS & one more for Index).

I am able to filter the data for each item as below & do not know how to proceed further.

d3.csv("info.csv").then((item) =>
  item
    .map((item) => {
      const values = item.dataDescription.split("_");
      return { attributeA: values[0], attributeB: values[1], ...item };
    })
    .filter((item) => item.attributeB === "PRL")
);

The output is an array but the dates are keys them selves instead of values.

So, the 2 question I have is

1. How to I make a Line chart (just for PRL for now)
2. Do I have to repeat the code 3 times is i have to build 3 line charts (in actual data, there are many more items & I would like to avoid writing the code multiple times)?

I am a newbie to JS & D3, so please guide. Thanks.

[hellonearthis]

Might be easier to start with plot than d3. So you are looking at doing something like this?

parsing-data-to-suite-a-line-chart

Biggest part is structuring the data your using. So your data object could look like this. note the (…) would be the dates

data = {
 PRL:[
{attributeA: "Latency", attributeB: "PRL", dataDescription: "Latency_PRL" ...},
{attributeA: "Supliment", attributeB: "PRL", dataDescription: "Supliment_PRL" ...},
{attributeA: "Variant", attributeB: "PRL", dataDescription: "Variant_PRL" ...},
{attributeA: "Heat", attributeB: "PRL", dataDescription: "Heat_PRL", ...},
{attributeA: "Humidity", attributeB: "PRL", dataDescription: "Humidity_PRL" ...}
]
PS:[
{attributeA: "Latency", attributeB: "PS", dataDescription: "Latency_PS" ...},
{attributeA: "Supliment", attributeB: "PS", dataDescription: "Supliment_PS" ...},
{attributeA: "Variant", attributeB: "PS", dataDescription: "Variant_PS" ...},
{attributeA: "Heat", attributeB: "PS", dataDescription: "Heat_PS", ...},
{attributeA: "Humidity", attributeB: "PS", dataDescription: "Humidity_PS" ...}
]
Index:[
{attributeA: "Latency", attributeB: "Index", dataDescription: "Latency_Index" ...},
{attributeA: "Supliment", attributeB: "Index", dataDescription: "Supliment_Index" ...},
{attributeA: "Variant", attributeB: "Index", dataDescription: "Variant_Index" ...},
{attributeA: "Heat", attributeB: "Index", dataDescription: "Heat_Index", ...},
{attributeA: "Humidity", attributeB: "Index", dataDescription: "Humidity_Index" ...}]
}

Then in the plot you would put something like,

  Plot.line(data.PRL, {x: "3-Aug-21", y: "attributeA", stroke: "#C2E812" }),
  Plot.line(data.PS, {x: "3-Aug-21", y: "attributeA", stroke: "#C2E812" }),
  Plot.line(data.index, {x: "3-Aug-21", y: "attributeA", stroke: "#C2E812" }),

[moys]

I am actually trying to build something like the plot below.

In the page you provided the solution, you assigned the result of d3.csv into the variable ‘data’. I am unable to do it.
my code is as below. Since i don’t have a URL, I am feeding the .csv file directly. However the output is a promise & not the array (the promise indeed does have the array under ‘PromiseResult’.
How to get the array to the variable ‘data’?

const data = d3.csv("info.csv").then((item) =>
  item
    .map((item) => {
      const values = item.dataDescription.split("_");
      return { attributeA: values[0], attributeB: values[1], ...item };
    })
    .filter((item) => item.attributeB === "PRL")
);

[hellonearthis]

Adding await might help.

const data = await d3.csv("info.csv").then((item) =>
  item
    .map((item) => {
      const values = item.dataDescription.split("_");
      return { attributeA: values[0], attributeB: values[1], ...item };
    })
    .filter((item) => item.attributeB === "PRL")
);

[moys]

Adding await does not work (await always has to be inside an async function). I will keep trying

[hellonearthis]

I guess I was thinking observable and not javascript. This might help.

Getting data using d3.json() is not working, while it works using JS async await.. Why?

[tophtucker]

I’m not sure about the await issue. It sounds like you’re doing this outside of Observable, right? This is mainly an Observable help forum, but it might help to see an example where it’s broken.

As for your other question, it’s definitely possible to make all three charts without repeating the code! Here are two examples of how, both using Plot. One uses faceting; the other uses d3.groups and then maps over that to create the three charts.

You can see the code and charts in this notebook:

Re: “Parsing data to suite a line chart”

That notebook loads the sample data you posted at the start of the thread as a File Attachment called data.csv (thanks to @hellonearthis). If you fork that notebook, you can click the icon on the right to replace the sample data.csv with your real CSV. The charts will update automatically (so long as the columns work the same way in the real CSV).

[moys]

Yes, the await issue is outside of observable (it on my local machine where I am trying to make a line charts using D3).

Regarding the plot itself, thanks for the example. I will try to replicate it on my machine.

[forgottenboy]

@moys, did you ever figure this one out? I’m running into a similar issue.

[moys]

@forgottenboy Yes. I was able to figure it out. You can find my code here → GitHub - moyscode/moyscode.github.io and the working webpage with charts here → https://moyscode.github.io/

[forgottenboy]

Awesome, thanks!