Week 4: Loading Data

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.