# Changing data visualisation through MousePressed function in p5.js?

**URL:** <https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196>\
**Category:** Coding Questions\
**Created:** [September 28, 2020, 2:09pm UTC](https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196 "2020-09-28T14:09:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 28, 2020, 2:09pm UTC](https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196/1 "2020-09-28T14:09:15Z")

</div>

Hey everyone, okay so this issue has got me super confused.  
So basically I would like the sketch to show a data visualisation of one JSON file. (being a Sunday data). But when I mousePress, the data would represent another days data visualisation…(so Monday’s data and etc.)

So basically each time I mousePress, I would like to have the sketch represent a new data. Is that possible in any???

Any references/links and or suggestions would be great!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 28, 2020, 4:41pm UTC](https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196/2 "2020-09-28T16:41:57Z")

</div>

You need to loop through an array.  
Maybe you want to watch [this](https://www.youtube.com/watch?v=rJaXOFfwGVw&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r&ab_channel=TheCodingTrain) series, especially the three videos about JSON.

---

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 29, 2020, 1:55am UTC](https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196/3 "2020-09-29T01:55:10Z")

</div>

So if I had a JSON file like this, this one only represents one day of data…I’m confused on how to write it in another days data… Would I just do another JSON data? and if so how do I change it through mousePressed? Still through loop?  
also the code I’ve used to link this data in my p5.js sketch is

```auto
function draw () {
  for (whichHour=0; whichHour<data.hours.length; whichHour++){

```

JSON Data

```auto
 {
    "hours":[
      {"time": "12:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
    },
    {
        "time": "1:00 am",
        "instagram": 1,
        "messenger": 2,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 3
    },
    {
        "time": "2:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
    },
    {
        "time": "3:00 am",
        "instagram": 0,
        "messenger": 0,
        "snapchat": 0,
        "email": 0,
        "facebook": 0,
        "totalNotification": 0
    },
]

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 29, 2020, 10:16am UTC](https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196/4 "2020-09-29T10:16:24Z")

</div>

You need to look for the right path to loop trough.  
In this case “data.hours[n].time”  
If you want also day keys, you need to **nest** the “hours” array into the “days” array and access the path accordingly.

https://editor.p5js.org/noelpil/sketches/3ZGOcecdG

---

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 29, 2020, 10:59am UTC](https://discourse.processing.org/t/changing-data-visualisation-through-mousepressed-function-in-p5-js/24196/5 "2020-09-29T10:59:41Z")

</div>

aaahhh thank you for the clarification! 🙂