# Seeking p5 data visualization help

**URL:** <https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 1, 2020, 1:36am UTC](https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334 "2020-05-01T01:36:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![felixthefein](https://avatars.discourse-cdn.com/v4/letter/f/8baadc/32.png) [@felixthefein](https://discourse.processing.org/u/felixthefein)\
**Post date:** [May 1, 2020, 1:36am UTC](https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334/1 "2020-05-01T01:36:56Z")

</div>

Hello,

I am new to p5, and I am creating a simple data visualization about wind using data from an accelerometer (in a .csv file).

My “x” values are represented by the variable `sensorx`, and my “y” values are represented by `sensory`. I then remap these values with the following:

```auto
  let scaled_sensorx = map(sensorx, 0, 1.5, 0, 300);
  let scaled_sensory = map(sensory, 0, 3, 0, 300);

```

The data is visualized by a single line that expands/contracts and rotates slightly for each data point.

```auto
line((200 - scaled_sensorx), (300 - (scaled_sensory/3)), (400 + scaled_sensorx), (300 + (scaled_sensory/3))); `

```

I was hoping for any suggestions regarding how to make the line less jerky, with more subtle transitions between the data points (note there are about 43,000 rows of data). Perhaps a fading line, or easing?

Any help would be much appreciated.

Thank you!

-ff

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 1, 2020, 8:47am UTC](https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334/2 "2020-05-01T08:47:51Z")

</div>

Hello @felixthefein,

If you want to stick with `line`, you’ll have to implement a smoothing algorithm yourself. Or plot the line on a smaller scale, zoom out so to speak, as everything tends to look more fluid when looked at from afar.

You could also visualize using curves instead of lines. Take a look at the example under the heading [Continuous Spline Curves on the Curves page](https://p5js.org/learn/curves.html).

---

<div class="post-metadata">

**Author:** ![felixthefein](https://avatars.discourse-cdn.com/v4/letter/f/8baadc/32.png) [@felixthefein](https://discourse.processing.org/u/felixthefein)\
**Post date:** [May 1, 2020, 4:15pm UTC](https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334/3 "2020-05-01T16:15:27Z")

</div>

Hello @Sven,

Thank you for the suggestions!

By “zooming out”, do you mean increasing the canvas size and scaling up all the visual elements?

I appreciate the help!

Best,  
ff

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 2, 2020, 8:30pm UTC](https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334/4 "2020-05-02T20:30:24Z")

</div>

Sorry, I meant the opposite. Compare it with a digital photograph. If you zoom or look close to the screen, you’ll start seeing pixels. The photo looks rough (or jerky, if you want). But if you zoom out or back away from the screen: you’ll stop noticing the pixels and the photo looks smoother.

If you visualize your data on a smaller scale, the jerkiness will be less apparent (but still be there, of course). So it’s a bit of a hack. You probably want to implement something smarter, like cubic interpolation. Or, just use curves instead of lines.

---

<div class="post-metadata">

**Author:** ![felixthefein](https://avatars.discourse-cdn.com/v4/letter/f/8baadc/32.png) [@felixthefein](https://discourse.processing.org/u/felixthefein)\
**Post date:** [May 7, 2020, 1:35am UTC](https://discourse.processing.org/t/seeking-p5-data-visualization-help/20334/5 "2020-05-07T01:35:29Z")

</div>

@Sven,

I ended up using a continuous spline curve, and it worked perfectly!

Thank you so much for your suggestions!

Best,  
Felix