var gallery;
var waffles = [];
var data;
var days = ["Activities Weekday", "Activities Weekends", "Other", "Favourite Activity", "How often dinner", "How often friends", "Activity to do more"];
var values = ['Watch TV', 'Play Computer Games', 'Engage in Hobbies', 'Go out for Dinner', 'Go to the Pub', 'Watch a show', 'Go for a walk', 'Meet Friends', 'Weekend Away', 'Watch a band', 'Other'];
function preload() {
// Load the data here so it's ready before setup runs.
data = loadTable('./data/myData.csv', 'csv', 'header', function() {
console.log("Data loaded successfully");
}, function() {
console.log("Error loading data");
});
}
function setup() {
// Create a canvas to fill the content div from index.html.
var c = createCanvas(1024, 576);
c.parent('app');
// Create a new gallery object.
gallery = new Gallery();
// Add other visualization objects to the gallery.
gallery.addVisual(new TechDiversityRace());
gallery.addVisual(new TechDiversityGender());
gallery.addVisual(new PayGapByJob2017());
gallery.addVisual(new PayGapTimeSeries());
gallery.addVisual(new ClimateChange());
gallery.addVisual(new Offences());
gallery.addVisual(new PetrolPrices());
// gallery.selectVisual(new Waffle());
// Create one Waffle instance that manages all seven waffle charts.
if (data && data.getRowCount() > 0) {
gallery.addVisual(new Waffle(20, 20, 200, 200, 10, 10, data, days, values));
// gallery.addVisual(ne Waffle()); // Add the single Waffle visualization to the gallery
gallery.selectVisual(waffles); // Select the Waffle visual by default
} else {
console.log("Data is not loaded or empty.");
}
}
function draw() {
background(255);
if (gallery.selectedVisual != null) {
gallery.selectedVisual.draw();
for(var i = 0; i < days.length; i++){
waffles[i].draw();
}
for(var i = 0; i < waffles.length; i++){
waffles[i].checkMouse(mouseX, mouseY)
}
}
}
thtas script
function Waffle(x, y, width, height, boxes_across, boxes_down, table, days, values) {
this.name = "Evening Activities";
this.id = "Waffle";
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.boxes_across = boxes_across;
this.boxes_down = boxes_down;
this.table = table;
this.days = days;
this.values = values;
this.currentDayIndex = 0; // Track the currently displayed day
this.boxes = [];
this.categories = [];
this.loaded = false;
this.preload = function() {
// Load data if needed
this.loaded = true;
this.setup();
};
this.setup = function() {
if (!this.loaded) {
console.log('Data not yet loaded');
return;
}
this.addCategories(this.days[this.currentDayIndex]);
this.addBoxes();
};
this.addCategories = function(day) {
console.log('Adding categories for day:', day);
var colours = ["aqua", "yellow", "purple", "red", "blue", "green", "orange", "pink", "black", "grey"];
this.categories = []; // Reset categories for the new day
for(var i = 0; i < this.values.length; i++) {
this.categories.push({
"name": this.values[i],
"count": 0,
"colour": colours[i % colours.length]
});
}
var column = this.table.getColumn(day);
for(var i = 0; i < column.length; i++) {
var catLocation = this.categoryLocation(column[i]);
if(catLocation != -1) {
this.categories[catLocation].count++;
}
}
for(var i = 0; i < this.categories.length; i++) {
this.categories[i].boxes = Math.round((this.categories[i].count / column.length) * (this.boxes_down * this.boxes_across));
}
console.log('Categories added for day:', this.categories);
};
this.categoryLocation = function(categoryName) {
for(var i = 0; i < this.categories.length; i++) {
if(categoryName === this.categories[i].name) {
return i;
}
}
return -1;
};
this.addBoxes = function() {
console.log('Adding boxes for day');
var currentCategory = 0;
var currentCategoryBox = 0;
const boxWidth = this.width / this.boxes_across;
const boxHeight = this.height / this.boxes_down;
this.boxes = []; // Reset boxes for the new day
for(var i = 0; i < this.boxes_down; i++) {
this.boxes.push([]);
for(var j = 0; j < this.boxes_across; j++) {
if (currentCategoryBox === this.categories[currentCategory].boxes) {
currentCategoryBox = 0;
currentCategory++;
}
this.boxes[i].push(new Box(this.x + (j * boxWidth), this.y + (i * boxHeight), boxWidth, boxHeight, this.categories[currentCategory]));
currentCategoryBox++;
}
}
console.log('Boxes added for day:', this.boxes);
};
this.draw = function() {
for(var i = 0; i < this.boxes.length; i++) {
for(var j = 0; j < this.boxes[i].length; j++) {
if(this.boxes[i][j].category != undefined) {
this.boxes[i][j].draw();
}
}
}
};
this.checkMouse = function (mouseX, mouseY) {
for(var i = 0; i < this.boxes.length; i++) {
for(var j = 0; j < this.boxes[i].length; j++) {
if(this.boxes[i][j].category != undefined) {
const mouseOver = this.boxes[i][j].mouseOver(mouseX, mouseY);
if(mouseOver != false) {
push();
fill(255);
textSize(20);
const tWidth = textWidth(mouseOver);
textAlign(LEFT, TOP);
rect(mouseX, mouseY, tWidth + 20, 40);
fill(255);
text(mouseOver, mouseX + 10, mouseY + 10);
pop();
break;
}
}
}
}
};
// this.updateDay = function(index) {
// if (index >= 0 && index < this.days.length) {
// this.currentDayIndex = index;
// this.setup(); // Update the Waffle table for the new day
// }
// };
}
then another
function Box(x, y, width, height, category) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.category = category;
this.mouseOver = function(mouseX, mouseY) {
if (mouseX > this.x && mouseX < this.x + this.width &&
mouseY > this.y && mouseY < this.y + this.height) {
return this.category.name;
}
return false;
};
this.draw = function() {
fill(this.category.colour);
rect(this.x, this.y, this.width, this.height);
};
}
i am making a vis app and all other areas are find, but cannot get 7 waffle charts for each day column of code very frustrating. either i get 7 buttons or i get 1 button 1 chart.
enter image description here the image will show what i mean.
ived tried just adding waffle to the gallery then it stops others from working, looping through again i get boxes on each other visualisation. it is probably something so small but i just cannot figure it out
