676 Wonder Hues

For this project, I needed to use data visualization, but instead of portraying it in a graph or a static image, I was striving to make it look dynamic while also giving agency to people to have a personalized experience. To start with, I began looking for different sets of data, but none of them were as customizable to each person as much as their names. However, there are millions of names, and it would not be possible to link all those names in a CSV file. Hence, there was an alternative way, getting a smaller sample of names and counting the number of names associated with each alphabet. To begin, I was able to get 7000 different male and female names, then using Excel I counted the number of names that starts with each alphabet. Next, I imported the Excel to my project in p5. After hours of brainstorming , I was able to modify a previous code of mine to give different visual illusions. By using only the initial of each name, I am only limited to 26 different combinations. However, by using the person’s first and last name initials, I am able to bump it to 676 different visual illustrations and hence the project name “676 wonder hues”.

Below are a few patterns to different initials.

Initials: “PM”

Initials: “DS”

Part of the code

function setup() {
  createCanvas(600, 600);

  let alphabet = names.getColumn("alphabet");
  let frequency = names.getColumn("freq");

  sampleName = "P,M";

  let splitString = split(sampleName, ",");

  alpha1 = splitString[0];
  alpha2 = splitString[1];

}

function getValue(targetAlphabet) {
  let alphabet = names.getColumn("alphabet");
  let frequency = names.getColumn("freq");
  let rowNum = names.getRowCount();

  for (let i = 0; i < rowNum; i++) {
    if (alphabet[i] === targetAlphabet) {
      return frequency[i];
    }
  }
}

Reflections and improvement

In the future I want to add a section on the screen for the user to input their initials.I also look forward to add more color combinations to increase the customizability of the visual illustration.