How do I draw a circle based on my JSON data information in p5.js?

p5.js Coding Questions
1

So, I’m trying to grab data from my JSON file to my code and display the circle size according to the number on my JSON file.

So far this is the code.

var data;
var instagram, snapchat, messenger, facebook, email, instagramCol, snapchatCol, messengerCol, facebookCol, emailCol;
var sizeMultiplier = 20;
var time, size;

function preload (){
data =loadJSON (“Sunday.json”);
}
function setup() {
createCanvas (windowWidth, windowHeight);
background (255);
instagramCol = color (142, 68, 173);
messengerCol = color (133, 193, 233);
snapchatCol = color (247, 220, 111);
facebookCol = color (118, 215, 196);
emailCol = color (178, 186, 187);
}
function draw () {
//12:00 am data
fill (instagramCol);

size = data.[1].[1]*sizeMultiplier; // looking at the 2th array and the first app which would be Messenger. the number is 2, so therefore it would be 2 X 20 right?
circle (500, 500, size);

}
so this comes up with an error saying "Expected an identifier and instead saw ‘[’

I also tried the code this way as well. size = data[1][1]*sizeMultiplier;
This way works, but nothing shows on screen…I also check the console and no errors have popped up.

This is the JSON code

[
{
“12:00 am”: {
“instagram”: 0,
“messenger”: 0,
“snapchat”: 0,
“email”: 0,
“facebook”: 0,
“totalNotification”: 0
}
},

{
     "1:00 am": {
    "instagram": 1,
    "messenger": 2,
    "snapchat": 0,
    "email": 0,
    "facebook": 0,
    "totalNotification": 3
     }
},
]
2

Discourse.Processing.org/faq#format-your-code 
[
  {
    "12:00 am": {
      "instagram": 0,
      "messenger": 0,
      "snapchat": 0,
      "email": 0,
      "facebook": 0,
      "totalNotification": 0
    }
  },
  {
    "1:00 am": {
      "instagram": 1,
      "messenger": 2,
      "snapchat": 0,
      "email": 0,
      "facebook": 0,
      "totalNotification": 3
    }
  }
]

Given the JSON file is initially wrapped up w/ square brackets [] it means its outer datatype is JSONArray.

And you load & store that JSONArray in the variable data.

That JSONArray contains 2 entries wrapped up w/ curly brackets {}.
Thus those entries are of datatype JSONObject.

Seems like you wanna access the property messenger inside the 2nd JSONObject which contains a number value.

Each of those 2 JSONObject entries got 1 property which is a time string that points to another JSONObject.

The time string property from the 2nd JSONObject is named “1:00 am”.

So now we finally got all the “ingredients” in order to reach that number value 2:
const value = +data[1]['1:00 am'].messenger; // should grab value 2

We can also use the operator [] instead of . to access property messenger:
const value = +data[1]['1:00 am']['messenger']; // should grab value 2

If you need more JSON property access examples you can take a look at these 3 online sketches:



1 Like
3

Thank you so much for the explanation this helps a lot! But it doesn’t really fully solve my problem in a way, because I’m trying to grab that value “2” to determine the size of the circle.