Imessages Data visualization

I started this project trying to work with Whatsapp Data. Retrieving the Data from Whatsapp is a bit complicated or need a longer process. I had downloaded IExplorer an app that Backup your phone and store it’s Data on your Mac. However certain Datas like facebook and Whatsapp need some sort of permission. I was able to retrieve a file SQlite, I downloaded the SQlite browser for it, it turns out it dissects every fragment of the data into a separate csv… meaning, Media.csv, messages.scv and chatlog.scv separate which makes it complicated to work with the data, because they opened funny not completed.


I found that with IExplorer it is easier to retrieve Imessages and directly convert them to CSV files. So I did that and combined few chats in one big document and played with the Data in P5js. I was able to make the Data be visualized but I think I need to work more on the output and the code to get a nicer better outcome.


P5js Sketch;

I tried to give each category a color to see the outcome proportionally to each other: messages, names, phone number, date.
The idea is to show the different visualization of one conversation according to another. This Data is a combination of of many conversation just to get the Data out.
AS soon as the visualization is fixed into something more appealing I will post the bulk difference of the same sketch changing according to the conversation.

var nanou;
var nanouArray

function preload() {
nanou = loadTable(
function setup() {
createCanvas(600, 600);

var nanouArray = nanou.getArray();
// var nanouArray = nanou.getArray();
//for (var i = 0; i < nanouArray.length; i++)
// print(nanouArray[i]);

function draw() {
this.x = random(width);
this.y = random(height);
this.diameter = random(10, 30);
this.speed = 0;

var nanouArray = nanou.getArray();
for (var i = 0; i < nanouArray.length; i++){
fill(255, 0, 0, 200);
ellipse(i+this.x, this.y + nanou.getString(i, “Message”), this.diameter, this.diameter);
//ellipse(i*10,100, nanouArray[i], 25, 25);
//ellipse(i*10,100, nanouArray[i], 25, 25);
fill(0,0, 255, 200);
ellipse(i+this.x+10, 100 + nanou.getString(i, “Phone Number”), this.diameter, this.diameter);

fill(0,255, 255, 200);
ellipse(i+this.x, 300 + nanou.getString(i, “Name”), this.diameter, this.diameter);

fill(40,140, 150, 100);
ellipse(i+this.x, 170 + nanou.getString(i, “Subject”), this.diameter, this.diameter);

fill(170,0, 200, 100);
ellipse(i+this.x, 450 + nanou.getString(i, “Attachments”), this.diameter, this.diameter);

fill(255,255, 0, 200);
ellipse(i+this.y, 400 + nanou.getString(i, “Date”), this.diameter, this.diameter);


this.move = function() {
this.x += (-20, -30);
this.y += (-40,-30);

data p5js

Leave a Reply

Your email address will not be published. Required fields are marked *