Trouble with incrementing JavaScript dictionary values within a nested for loop

Question

Trouble with incrementing JavaScript dictionary values within a nested for loop

I am currently working on analyzing shark attack data with d3.js using a csv file named shark.csv. I have encountered a problem while implementing a nested for-loop in my code. The csv file contains information about shark attacks categorized by continent and year. My goal is to track the frequency of each continent appearing in each year. Here is a snapshot of the shark.csv file:

https://i.sstatic.net/X8k2q.png

and this is the desired outcome that I am aiming for: https://i.sstatic.net/vfW9r.png

(please note that the numbers shown are just examples)

To achieve this, I am storing the occurrence count of each continent name for a specific year in a dictionary object, and updating it as follows:

var allYears = [];

var allConti = [];

var allOccurrences = {};

d3.csv("https://raw.githubusercontent.com/eliasdon/proj/main/shark.csv").then(function(data) {

    // get all unique years
    for (var i = 0; i < data.length; ++i) {
        if (!allYears.includes(data[i].Date)) {
            allYears.push(data[i].Date);
        }
    }

    // get all unique continents
    for (var i = 0; i < data.length; ++i) {
        if (!allConti.includes(data[i].Continent)) {
            allConti.push(data[i].Continent);
        }
    }

    for (var i = 0; i < data.length; ++i) {

        for (var j = 0; j < allYears.length; ++j) {

            for (var k = 0; k < allConti.length; ++k) {

                // check if key for matching year and continent exists in dictionary
                if (!(allYears[j] + " " + allConti[k] in allOccurrences)) {

                    // if not, store it with an initial value of 1
                    allOccurrences[allYears[j] + " " + allConti[k]] = 1;
                } else {

                    // if already exists, increment the value
                    allOccurrences[allYears[j] + " " + allConti[k]]++;
                }
            }
        }
    }
    console.log(allOccurrences);
});

This code performs the following steps:

1- Read the csv file

2- Store all unique years

3- Store all unique continents

4- If there is no entry for the combination of

allYears[j] + " " + allConti[k]

(year and continent), create one with a value of 1.

5- If the entry already exists, increase its value by 1

The issue I am facing is that all the keys representing year and continent pairs end up with values equal to the total number of rows in the csv file.

https://i.sstatic.net/3lg9b.png

I am wondering what might be wrong with my implementation of the for-loop?

javascript csv dictionary for-loop d3.js

Answer 1

Answer №1

Ensure to only increment the values in the dictionary that correspond to the current data iteration within the 3rd outer for-loop

var i = 0; i < data.length; ++i

.

Additionally, note that using a = ++a is redundant. It is recommended to either use a = a + 1 or a++/++a. The most commonly preferred style is a++ for incrementing a variable.

Some more suggestions to consider:

Prefer using let over var
Opt for i++ instead of ++i
Use ' instead of "; better yet, utilize template strings ${a} ${b} instead of string concatenation like a + ' ' + b
Assign a local variable for the key rather than computing it multiple times
Consider using [].forEach instead of traditional for-loops
Use if (a[key]) instead of if (key in a)

let allYears = [];
let allConti = [];
let allOccur = {};

d3.csv("https://raw.githubusercontent.com/eliasdon/proj/main/shark.csv").then(data => {
    allYears = [...new Set(data.map(d => d.Date))];
    allConti = [...new Set(data.map(d => d.Continent))];

    data.forEach(d => {
        let key = `${d.Date} ${d.Continent}`
        allOccur[key] = allOccur[key] || 0;
        allOccur[key]++;
    });

    console.log(allOccur);
});

Answer 2

Ensure to only increment the values in the dictionary that correspond to the current data iteration within the 3rd outer for-loop

var i = 0; i < data.length; ++i

.

Additionally, note that using a = ++a is redundant. It is recommended to either use a = a + 1 or a++/++a. The most commonly preferred style is a++ for incrementing a variable.

Some more suggestions to consider:

Prefer using let over var
Opt for i++ instead of ++i
Use ' instead of "; better yet, utilize template strings ${a} ${b} instead of string concatenation like a + ' ' + b
Assign a local variable for the key rather than computing it multiple times
Consider using [].forEach instead of traditional for-loops
Use if (a[key]) instead of if (key in a)

let allYears = [];
let allConti = [];
let allOccur = {};

d3.csv("https://raw.githubusercontent.com/eliasdon/proj/main/shark.csv").then(data => {
    allYears = [...new Set(data.map(d => d.Date))];
    allConti = [...new Set(data.map(d => d.Continent))];

    data.forEach(d => {
        let key = `${d.Date} ${d.Continent}`
        allOccur[key] = allOccur[key] || 0;
        allOccur[key]++;
    });

    console.log(allOccur);
});

Trouble with incrementing JavaScript dictionary values within a nested for loop

Answer №1

Similar questions

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

Exploring the versatility of orderBy and filter in handling cross-referenced content across multiple JSON objects

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

Displaying a custom error page in Next.js with the appropriate status code

Is there a simple method to submit to a URL without relying on ajax?

What steps should I take to have a button initiate an AJAX request?

verifying an email address through firebase using the verifyPasswordResetCode method

Error encountered while attempting to use single quotation marks in MySQL databases

React Express Error: Unable to access property 'then' of undefined

What is the reason for the error that is being caused by using arrow functions in my code

Vue composable yields a string value

Ways to reposition JavaScript output within a webpage

Exploring ways to display dynamic content within AngularJs Tabs

Using gmaps4rails: A guide on extracting JSON data from the controller

Developing a fresh Outlook email using a combination of javascript and vbscript

Polymerfire: Unable to locate a default bucket

Including additional data to a page after each iteration in order to display the current progress

Refreshing the page using location.reload triggers a reload of various elements

The chat message section is failing to update due to AJAX not refreshing

Module for Npm that includes unique code for both proxy support and non-proxy support configurations