Changing data visualisation through MousePressed function in p5.js?

p5.js Coding Questions
1

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!

2

You need to loop through an array.
Maybe you want to watch this series, especially the three videos about JSON.

2 Likes
3

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

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

JSON Data

 {
    "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
    },
]
4

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.

5

aaahhh thank you for the clarification! :slight_smile: