# Reading data from CSV into separate traces

**URL:** <https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787>\
**Category:** plotly.js\
**Created:** [November 13, 2017, 7:22pm UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787 "2017-11-13T19:22:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![angelop](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@angelop](https://community.plotly.com/u/angelop)\
**Post date:** [November 13, 2017, 7:22pm UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787/1 "2017-11-13T19:22:39Z")

</div>

I am attempting to utilize Plotly (based on D3) to read through a CSV and return data into three separate traces - one for each year, in this case.

My hope is to create a chart such as depicted in this [Codepen](https://codepen.io/angelop/pen/QOgNzm), but without the hard-coded data of sales data, by dealer and year.

I have researched a few examples of D3 reading CSV data but am unclear how to read my data into the separate traces by year.

Please note I also attempted to post at [Stackoverflow](https://stackoverflow.com/questions/47271409/plotly-d3-reading-data-from-csv-into-separate-traces) as well.

I apologize that I am new to JavaScript in general. Please point me in the correct direction. Thank you!

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [November 13, 2017, 10:52pm UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787/2 "2017-11-13T22:52:38Z")

</div>

Can you share a snippet of your CSV file to help us help you?

---

<div class="post-metadata">

**Author:** ![angelop](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@angelop](https://community.plotly.com/u/angelop)\
**Post date:** [November 13, 2017, 11:49pm UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787/3 "2017-11-13T23:49:00Z")

</div>

A sample of the CSV can be found @ [https://github.com/apodagrosi/datasets/blob/master/PlotlyTest\_Summary\_SalesByDealerByYear.csv](https://github.com/apodagrosi/datasets/blob/master/PlotlyTest_Summary_SalesByDealerByYear.csv)

Below are two of the examples I have been attempting to build upon:  
Plotly example – reading CSV ([https://codepen.io/plotly/pen/eNaErL](https://codepen.io/plotly/pen/eNaErL))  
Plotly example – basic time series ([https://codepen.io/plotly/pen/NvazKR](https://codepen.io/plotly/pen/NvazKR))

Thank you for any assistance or direction!

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [November 14, 2017, 3:09pm UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787/4 "2017-11-14T15:09:28Z")

</div>

Here’s one way to do it:

https://codepen.io/etpinard/embed/preview/VrzwyP?height=300&slug-hash=VrzwyP&default-tabs=js,result&host=https://codepen.io&embed-version=2

---

<div class="post-metadata">

**Author:** ![angelop](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@angelop](https://community.plotly.com/u/angelop)\
**Post date:** [November 15, 2017, 12:53pm UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787/5 "2017-11-15T12:53:03Z")

</div>

This is exactly what I am looking for!

I then utilized ‘[category order](https://plot.ly/javascript/reference/#carpet-aaxis-categoryorder)’ to order the x-axis values even with years that had no data.

Thank you for your help!

---

<div class="post-metadata">

**Author:** ![NLCW88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nlcw88/32/2737_2.png) [@NLCW88](https://community.plotly.com/u/NLCW88)\
**Post date:** [March 9, 2018, 10:27am UTC](https://community.plotly.com/t/reading-data-from-csv-into-separate-traces/6787/6 "2018-03-09T10:27:43Z")

</div>

Hi there,

I think I have a similar problem, and I am also relatively new to Javascript.  
I am also trying to create a graph with multiple traces. However, this is a scatterplot, and the traces are in different frames, so as to facilitate a button interaction.

The current code is in the link below. However, as with the initial query it is hard coded in. Ideally, I would like to be able to take the x and y values of each trace from a single CSV. Would this be possible to do?

Link here: [https://codepen.io/NLCW88/pen/LdPMRP](https://codepen.io/NLCW88/pen/LdPMRP)

Thanks and best regards!
