I had initially wanted to work with generative text to create poems in my native language (Bengali), which would have translations in English. Midway through this project however, I realized how challenging it was as the rules of grammar in English and Bengali are quite different, and I couldn’t just make one-to-one sentences, even simple ones.
Then I decided to go through the Kaggle website to search for suitable datasets. The dataset on the Device market in India over last 15 years (https://www.kaggle.com/datasets/michau96/device-market-in-india-over-last-15-years) was a trending dataset, so I decided to use that. Since the dataset was on a monthly basis, I first used Excel to take averages across each year, converting the dataset to an annual one.
When it came to making the plot itself, I first tried getting the basic stacked histogram right. This was done using rectMode(CORNERS) as it allows to specify the opposite corners of the rectangle. The x position for each bar was specified using the Year column and the y position and height using the percentage value of each column normalized to the desired height of the plot.
rectMode(CORNERS); //to allow stacking of the bars
//bar for mobile
fill(this.mobileColor);
rect(
(this.dataYear - 2007) * w,
y,
w * (this.dataYear - 2007 + 1),
y - (h / 100 * this.mobile)
);
//bar for desktop
fill(this.desktopColor);
rect(
(this.dataYear - 2007) * w,
y - (h/100 * this.mobile),
w * (this.dataYear - 2007 + 1),
y - (h / 100 * this.mobile) - (h / 100 * this.desktop)
);
//bar for tablet
fill(this.tabletColor);
rect(
(this.dataYear - 2007) * w,
y - (h / 100 * this.mobile) - (h/100 * this.desktop),
w * (this.dataYear - 2007 + 1),
y - h
);
After that, I decided to work on the graph legend. The legend class takes one of the bars and makes the legend based off of that (this works since every bar is identical when it comes to the number of groups and the color associated with each group).
Finally, I wanted to add a level of interactivity in the form of a popup that comes up when you hover over a bar, similar to the statistics website Statista (statista.com). I tried using the mouseOver() event listener, but that didn’t work with the bar object for some reason, so I decided to go with the hard route of checking mouseX and mouseY against the bar’s dimensions.
The final result is below:
I would have loved to make this more generalized and capable of visualizing any dataset loaded by a user (kind of like ggplot in R). In that case, the program would need to work for any number of columns. But until I figure out how to make function arguments optional, this is kind of impossible.