Category: F2023 – Mang

For this assignment, I opted to create a rainfall data visualization for my hometown, Islamabad. The motivation behind this choice was because it serves as a nostalgic reminder of the lush, rainy climate in Islamabad, which I truly miss in contrast to the super hot weather here in Abu Dhabi.

Initially, I began with a simple bar chart. However, during my research on data visualization techniques, I stumbled upon Chart.js, which I decided to incorporate into my assignment due to its ability to provide a visually engaging representation of the data. I sourced my dataset from Kaggle, which contained various columns related to weather, including minimum and maximum temperatures. However, I chose to focus solely on the column that documented the maximum monthly rainfall in Islamabad.

Here’s how my barchart looks like:

Working with the dataset was relatively straightforward, as I had prior experience working with CSV files. One aspect of my code that I particularly like is the part dedicated to visualizations.

function createChart() {
  let options = {
    type: 'bar',
    data: {
      labels: months,
      datasets: [
        {
          backgroundColor: originalColor, // Set original color
          borderColor: 'rgb(0, 50, 100)',
          borderWidth: 2,
          barPercentage: 1,
          data: rainfallData,
          label: 'Monthly Heaviest Rainfall (mm)',
        },
      ],
    },
    options: {
      title: {
        display: true,
        text: title,
      },
      legend: {
        display: false,
      },
      scales: {
        xAxes: [
          {
            ticks: {
              autoSkip: false, // Prevent auto-rotation
              maxRotation: 0, // Set rotation angle to 0 degrees (horizontal)
              minRotation: 0, // Set rotation angle to 0 degrees (horizontal)
              fontSize: 8, // Adjust the font size of x-axis labels
            },
            categorySpacing: 40, // Increase the spacing between category (label) items
          },
        ],
        yAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: 'Monthly Heaviest Rainfall (mm)',
            },
          },
        ],
      },
   
        }
      },

I’m pleased with the feature that displays the corresponding rainfall value when hovering over each bar. This functionality simplifies the process of interpreting the chart, eliminating the need to constantly refer to the x and y axes.

Overall, I’m satisfied with how this assignment turned out. However, in future projects, I’d like to incorporate more interactivity to make the visualization more engaging and enjoyable for users.

As an NYUAD student, the door problem is real! Not just the door problem, but many other design problems existed until last semester, and thankfully, many have been rectified since then. From confusingly flipped maps to the oddly configured staircase leading from the performance gym to Falcon Field, I explored these design dilemmas around campus in a class called ‘Wayfinding’, and it wasn’t just about designing for spaces; it was about designing for people. This echoes Norman’s advocacy for human-centered design. I like his thoughts on feedback and why it’s necessary. I’ve impatiently pressed the pedestrian crossing button multiple times, assuming it’s not functioning.  I’d definitely have much more patience if someone told me it was working.

I’m passionate about both technology and design, Norman’s discussion of the paradox of technology fascinated me. In a time where the Apple iPhone 15 and the latest iOS updates are hailed for their cool features, people have started to acknowledge their downsides, such as overheating or performance slowdowns, which overshadow their umpteen benefits. Just as Don Norman mentions, Experience is critical, for it determines how fondly people remember their interactions. Despite the cute bubblegum pink phone color, a full-screen display, or the customizable call features, issues like overheating and lag are starting to deter users and will probably determine how people will remember their user experience with Apple products from now on. It’s a reminder that even the most aesthetically pleasing designs must prioritize functionality and the user experience above all else.

All in all, I really enjoyed this reading as his writing style was quite engaging as well as conveyed all the important concepts and distinctions about them. As I start introspecting more on this reading, I want to think as both, a user and a designer. In the shoes of a user, Am I paying enough attention to the signifiers and affordances that designed objects and interfaces provide? As a designer, how do I navigate the balance between the right amounts of feedback to give or how would I make something more Human-centered?

 

After reading the chapter, I feel the author said exactly what I thought. Some designs are inhumane. NYUAD is a great example. I remember the designer of NYUAD was famous and great. However, some aspects of the design really piss me off. For instance, I understand the doors are automatic so that disabled people can enter. However, It also led to many other problems, including maintenance issues, slow reactions (leading to traffic), etc. Many different ways could fix this issue, for example, changing the opening method of the doors from swinging to sliding, adding specific gateways for people with disabilities, and so on. However, it might negatively influence the aesthetics of the design itself. I guess that is why it hasn’t been fixed.

Another thing about the article that interests me is that the author said the engineers are too logical. I immediately thought of a concept in design called “affordance.” This term generally refers to an object’s aspects that define its uses and how it could be used. If this concept can be applied to designing and making it evident how it should be used, it should become a good design. However, I also understand the difficulties in doing this, especially in machines with multiple functions or complicated properties. Still, it should be applied to many daily items since they are not that complex, and usually, people using it are not professionals.

As a Computer Science major, optimization and logic are two things that we are constantly trained to hammer into our brains. We are conditioned to increase efficiency at the cost of understandability (why do something in 4 lines of code when you can do it in one?). Needless to say, Donald Norman’s take on technology and devices felt like a breath of fresh air. I especially liked his criticisms of conventional engineering, wherein the center of all design and development is logic. I agree with his stance that humans do not function inherently with logic and instead are unpredictable and experimental. I especially like this line of thinking because it brings to the forefront the question – is there any way we can even define basic human logic? There are so many factors at play in the way humans function, in this case, some of the most important being neurodivergence and disability. The way neurodivergent or disabled individuals navigate life is so drastically different than the way we do, their fundamental understanding of logic will be very different than ours. So when an engineer is asked about his design and his answer is logic, is he pompous to assume the way he functions is fundamental logic?

I also like his emphasis on being able to explore a device, a concept I feel is much lost in this day and age. With the initial advent of technology, with it being all clunky and whatnot, emphasis was placed to showcase not only how it worked, but the various ways one could interact with it. These days, it is assumed that everyone knows how to use a touchscreen or share via Bluetooth, so more emphasis is placed on how seamless it is. This assumption that everybody knows how to use these devices, and more importantly, how not to break these devices, makes them inaccessible to the general public.

concept:

For this assignment, I saw this piece by Aaron Koblin and I immediately knew I wanted to visualize some form of auditory data. Initially, I wanted to do musical data, but I knew it was difficult to do because of the lack of datasets and the rate limits of using APIs for platforms like Spotify. However, browsing on Kaggle I found a dataset of heartbeat sounds and I knew it’d be perfect for the job.

Initially I wanted to do something similar to Koblin’s piece, I graphed the waveforms as lines corresponding to the amplitude. But frankly, they looked ugly and it was because the audio wasn’t as dense as the ones Koblin was using. I instead graphed them as a continuous graph, and the line reminded me of a heartbeat monitor, so I stylistically updated my project to look like that.

All of the lines when static are green, and when you click the screen, a random heartbeat is chosen and it is dynamically drawn in red with different parameters so that the peaks and changes are more pronounced.

code highlights

I’m proud of the draw function, because it took me a while how to figure out how to do it (statically and then dynamically).

  drawSelf() {
    noFill();
    stroke(0,100,0);
    drawingContext.shadowBlur = 15;
    drawingContext.shadowColor = '#8FBC8B'
    if (!this.audio.isPlaying()){
    beginShape();
    for (let i = 0; i < this.peaks.length; i++) {
      vertex(this.startX + i, this.startY - this.peaks[i] * this.scalingFactor);
    }
    endShape();
    } else {
      let vol = currentAmp.getLevel();

      this.volumeHistory.push(vol);
      stroke(128, 0, 0);
      drawingContext.shadowBlur = 15;
      drawingContext.shadowColor = color(255, 0, 0);
      beginShape();
      for (let i = 0; i < this.volumeHistory.length; i++) {
        vertex(this.startX + i, this.startY - this.volumeHistory[i] * this.scalingFactor * 4);
      }
      endShape();
    }

}

improvements

I think the transition from a sound wave being drawn directly to going back to its static form is too abrupt, so I’d like to find a way to improve that.

I think this assignment piece was a clear embodiment of all the things I learned whilst binge-watching ‘The Coding Train’ and making notes for every line of code that was introduced in the videos, for the past 5 days. Using all that I learned about functions, classes, if and for loops as well as boolean operations, I created a piece that’s more reliant on its meaning than its objective visuals. I used this assignment as a means of me dipping my foot into the water to test its current, hence it’s simplistic style.

I wanted to portray nostalgia/ melancholy of the past. Specific images I had in mind as reference were faded, warm-toned depictions of one’s memories in movies and hazy light circles. I utilised warm-toned colours to symbolise such melancholy and its movement and opacity to illustrate the idea that whilst the memory is fleeting and obscured, the emotions and ties related to it is prominent to the individual. Because of the piece’s mediocre, primitive(?) interactivity, that allows a gradual transition into blackness, I was also able to successfully depict the notion of “letting go”: letting go of the ties that bind us to the past in order for us to face the present and future.

Like the previous post, I was proud of all aspects of the code since I consider myself still relatively new to the p5.js javascript language. However, I must point out that I was especially proud of implementing and randomly assigning 3 different colours to the ‘blurs’ objects. This as well as attributing a boolean value to a variable to control an if condition and making sure ‘blurs’ objects remained contained within the canvas.

if (this.x < 0) {
      this.x = this.r; 
    } else if (this.x > width) {
      this.x = width - this.r; 
    }
if (this.y < 0) {
      this.y = this.r; 
    } else if (this.y > height) {
      this.y = height - this.r; 
    }
  }

(I think it’s hard to select specific code snippets relating to a single part because it’s sprinkled around the code i.e., some are in setup(), draw() or in class…) To make it easier to manage, I split the piece into different feasible parts: 1) creating randomly positioned/ sized ellipses, 2) randomly assigning 3 different colours to ellipses, 3) causing transparency to increase once mouse is pressed, 4) making sure ellipses don’t escape the canvas. Sometimes I would get confused with variable/ object names so there was a lot of trial and error in determining how to resolve relating errors. Some specific parts required research as I’m still ignorant to the vast amount of functions/ keywords that do specific things e.g., manually adding transparency to the ‘blurs’ objects:

let transparentColor = color(red(this.colour), green(this.colour), blue(this.colour), this.alpha);
fill(transparentColor);

Overall, despite its simplistic nature I am very satisfied. I feel that through this assignment I was able to solidify my knowledge to a greater degree. However, I do feel that this is fleeting so I’ll have to go through the entire javascript file and make notes on each code line function so that it doesn’t remain a surface-level knowledge. I’m very happy that I finally included some level of interactivity but for next time, I would like to use a type of interactivity that evokes a more complex sequence of events.
***I’m so sorry for the late submission. It might not be worth a grade but I still wanted to try it out for my sake. 

 

For this assignment, I visualized the “Cost of Living 2017” dataset in a circular diagram. I thought circular diagram would look much neater and allows to visualize much more countries than other diagrams. Also, it showcases the extremes very well, allowing us to compare the most expensive and most affordable places to live in a single glance.

In my circular design, each country from the dataset finds its place along the perimeter. The distance from the center of the circle to each country is determined by its cost of living. So, the more expensive a country, the farther out from the center it appears. To keep things visually appealing, I also added dots and text labels to each country.

One of the trickier parts of this project was making sure that the dots and text labels rotated in sync. I also had to figure out how to represent each country’s cost of living accurately by adjusting the length of the lines connecting them to the center. I’m particularly proud of successfully aligning the rotation of text and dots. I think achieving this synchronization made the diagram more intuitive and easy to understand.

// Calculate the rotation angle based on the length of the data
  const angleIncrement = 360 / (data.length - 2);

  // Define a scaling to make the diagram bigger
  const scaleFactor = 2;

  // Get the rotated text and dots based on the CSV data
  for (let i = 1; i < data.length; i++) {
    const rowData = data[i].split(",");
    const countries = rowData[0]; // coutries
    const cost = parseFloat(rowData[1]); // parse the cost as a floating-point number

    // Calculate the rotation angle based on the index
    const rotationAngle = radians(textRotation + i * angleIncrement);

    // Calculate the radius based on the cost and scaling 
    const radius = cost * scaleFactor;

    const x = centerX + radius * cos(rotationAngle);
    const y = centerY + radius * sin(rotationAngle);

    // Draw a line from the center to the dot
    stroke("#FF5733");
    line(centerX, centerY, x, y);

    // Display the dot with the same rotation angle
    push();
    translate(x, y);
    rotate(rotationAngle);
    noStroke();
    fill("#FF5733"); 
    ellipse(0, 0, 4, 4); 
    pop();

    // Display the rotated text of countries next to the dot
    push();
    translate(x, y);
    rotate(rotationAngle); // apply the same rotation to the countries
    noStroke();
    text(countries, 20, 0); // display the countries
    pop();

In the future works, I’d like to explore more creative ways to present data. I want to achieve a good balance between functionality and aesthetics, making the visualizations not only informative but also visually engaging and fun.

Initially, I wanted to make a nice data visualization, but by my standards, it would only be cool if the data was live. There’s little glamour in loading a CSV file — even Excel can do that. However, I really struggled to find a free API that lets you make bulk requests, and I couldn’t get around the request limit without paying for it. I settled for a project on loading/displaying text, and came up with my alphabet soup idea.

I tried creating a bowl of p5 alphabet soup, which lets you add new letters by typing on your keyboard. The alphabets all float randomly on the canvas, but they can bunch together if you haven’t pressed space. When they hit space, the bunch is ‘complete’, and the next time the user types, a new bunch is created. Under the hood, each bunch is just an array of “Letter” objects, each of which have their own position and speed. At the end of every array, there’s an invisible space, which I’m moving across the screen, and all the letters simply follow the next letter in the array. A little Perlin noise and rotation is used to simulate some turbulence in the liquid.

Additionally, the user can also use the mouse to scramble the letters on the screen. If the pointer is too close to a certain Letter, the Letter is separated from the bunch and it will go on moving independently. Whether the Letter was in the active bunch or an already completed bunch, it will be extracted from its array and added to a different one called floatingLetters. In this array, all the Letter objects are always moving around randomly. Letters in this array can also be scrambled — the user just has to hover the pointer near a Letter.

The logic to make the letters bunch together was a little tricky to pin down, and a bunch in this context wasn’t really like a boid. They have to (loosely) maintain a left to right order, and that depends on which direction they’re moving in. I eventually took the gradient (speed differential) of the last letter in the array, and made the rest of the letters arrange themselves accordingly. For example, if the next Letter is moving down and right, the current Letter will be drawn slightly to the left and up. If the next Letter is moving up and right, the current Letter will be drawn slightly to the left and below, and so on. There are four such cases.

calculateNewPosition(nextX, nextY, nextSpeedX, nextSpeedY) {
    this.rotation += noise(this.x * 0.01, this.y * 0.01) * 0.01;
    if (nextSpeedX > 0 && nextSpeedY > 0) {
      this.updatePosition(
        nextX - 30 + noise(xOff) * 20,
        nextY + noise(yOff) * 20
      );
    }
    if (nextSpeedX > 0 && nextSpeedY < 0) {
      this.updatePosition(
        nextX - 30 + noise(xOff) * 5,
        nextY + 30 + noise(yOff) * 5
      );
    }
    if (nextSpeedX < 0 && nextSpeedY < 0) {
      this.updatePosition(
        nextX + 30 + noise(xOff) * 5,
        nextY + 30 + noise(yOff) * 5
      );
    }
    if (nextSpeedX < 0 && nextSpeedY > 0) {
      this.updatePosition(
        nextX + 30 + noise(xOff) * 5,
        nextY - 30 + noise(yOff) * 5
      );
    }
  }

This is the final sketch:

I used a font that resembles the letters in alphabet soup, and each letter also has a shadow. In real soup, letters are always going above and below the surface of the liquid, which makes sometimes makes look smaller, fainter. I think I could make this more realistic if I added varying opacity to each letter. If the Letter objects randomly had a lower opacity, it would look like they were drowning a little.

Dan Norman takes a strictly humanistic stance in the opening of his book, which can be summed up nicely in this one line from the chapter: “It is the duty of machines and those who design them to understand people. It is not our duty to understand the arbitrary, meaningless dictates of machines.” His ideas are well informed and drawn from experience in both engineering and cognitive science, and I do in fact agree with him on the subject of the gap between designers’ faith in users who are willing to trial and error, and the very limited size of such a user base. Most people do really just want to get on with whatever they’re doing. However, the same people also want things to look nice. For example, almost all of us care about the aesthetic qualities of appliances we put in our homes. There’s people like the English couple mentioned in the book with the fancy washing machine, who don’t bother to learn about the machine’s functions but still keep the high-tech appliance around probably because it just looks nicer.

Another interesting case study would be SMEG, a home appliance company with a focus on design. They consistently get a bad rap for the poor quality of their products, which are simply not good investments. Yet, SMEG remains immensely popular, and consumer behavior shows that people are willing to pay much more for an appliance, be it of poorer quality, for something that just looks nice. Thus, I have this lingering question for Dan Norman: “so what?” Humans were born into an unbending, mystifying nature. But people still made it work, weaved clothes from flowers of cotton and learned to bake bread from grains. Now, is a washing machine with one too many functions really going to the nemesis to human development? Are we expected to be so lazy that reading a device manual becomes too much to ask? I’m really not talking about bad design — if I have to struggle to read text on a website in an avant-garde font, maybe that’s a design choice worth reevaluating. But some pretty doors that blend into a building’s facade, which can be swung open by pushing on either one of just two ends, shouldn’t really be that much of a headache to most people, considering once you’ve taken a minute to figure out which end to push, you can forever go on enjoying the nice design of a normally functioning door.

When I find a door that doesn’t work or a machine acting strangely, I often joke with my mom that maybe the person who made it learned everything online. I really liked how this text talks about the hidden problems with everyday things, how we use machines, and why it’s important to make technology that works well with people, not the other way around.

In fact, this text got me thinking about making things we use every day easier for everyone. For example, let’s talk about SIRI. I get annoyed that I have to change my way of speaking just to make it understand me. I think it should understand English no matter how I speak it. And if I struggle with this, I can imagine how tough it must be for someone with a speech problem. SIRI is supposed to help us, but it doesn’t always do a good job.

When we make machines and stuff, it’s not just about how they look or how fancy they are. We learned this from what happened at Three Mile Island. At first, they blamed the people working there for the problems, saying it was their fault. But then, Don Norman and other experts looked into it more and found that it was also because the machines were hard to understand and use.

Personally, I find it interesting how Don Norman changed from being an engineer who cared mostly about technical stuff to someone who saw how important it is to understand how people think and act when designing things. His journey is really fascinating.