# Parsing data to suite a line chart

**URL:** <https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475>\
**Category:** Help\
**Created:** [August 18, 2021, 9:09am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475 "2021-08-18T09:09:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![moys](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@moys](https://talk.observablehq.com/u/moys)\
**Post date:** [August 18, 2021, 9:09am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/1 "2021-08-18T09:09:00Z")

</div>

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

```auto
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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [August 18, 2021, 10:39am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/2 "2021-08-18T10:39:26Z")

</div>

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](https://observablehq.com/d/8fdae9c2f1b5df90)**
>
> https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475 I converted the info into a csv file.

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

```auto
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,

```auto
  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" }),

```

---

<div class="post-metadata">

**Author:** ![moys](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@moys](https://talk.observablehq.com/u/moys)\
**Post date:** [August 18, 2021, 11:15am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/3 "2021-08-18T11:15:57Z")

</div>

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

 ![grafik](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/b/bcce074ee29cd5e1073f3ebf2288621fbabe54df.png)

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’?

```auto
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")
);

```

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [August 18, 2021, 12:19pm UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/4 "2021-08-18T12:19:06Z")

</div>

Adding await might help.

```auto
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")
);

```

---

<div class="post-metadata">

**Author:** ![moys](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@moys](https://talk.observablehq.com/u/moys)\
**Post date:** [August 18, 2021, 12:51pm UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/5 "2021-08-18T12:51:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hellonearthis/32/3935_2.png) [@hellonearthis](https://talk.observablehq.com/u/hellonearthis)\
**Post date:** [August 18, 2021, 1:33pm UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/6 "2021-08-18T13:33:40Z")

</div>

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

> <https://stackoverflow.com/questions/56539366/getting-data-using-d3-json-is-not-working-while-it-works-using-js-async-await>

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [August 19, 2021, 3:31am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/7 "2021-08-19T03:31:04Z")

</div>

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](https://observablehq.com/@observablehq/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”](https://observablehq.com/d/a703de26f8dee064)**
>
> Building on @hellonearthis’s notebook, here are two examples using Plot. Start by loading, parsing, and tidying the data: Option A: All charts on same y scale Uses Plot’s faceting, which means all the y axes are the same. Depending on your use case,...

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).

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/f/ffdc454ada651d1a0f6bbda0cbe1219a2c6bf53a.png)

---

<div class="post-metadata">

**Author:** ![moys](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@moys](https://talk.observablehq.com/u/moys)\
**Post date:** [August 19, 2021, 4:42am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/8 "2021-08-19T04:42:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![forgottenboy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/forgottenboy/32/6036_2.png) [@forgottenboy](https://talk.observablehq.com/u/forgottenboy)\
**Post date:** [January 19, 2022, 9:56pm UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/9 "2022-01-19T21:56:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![moys](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@moys](https://talk.observablehq.com/u/moys)\
**Post date:** [January 20, 2022, 3:30am UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/10 "2022-01-20T03:30:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![forgottenboy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/forgottenboy/32/6036_2.png) [@forgottenboy](https://talk.observablehq.com/u/forgottenboy)\
**Post date:** [January 22, 2022, 11:09pm UTC](https://talk.observablehq.com/t/parsing-data-to-suite-a-line-chart/5475/11 "2022-01-22T23:09:09Z")

</div>

Awesome, thanks!