D3 - Coding with Readability and Usefulness, no more d variable

One of the things I find so irritating is the overuse of letters which lack sufficient readability (to understand code without having to dig into the back-end to gain meaning).

I'm learning and working on D3 stuff and I see many examples using the letter d. This d stands for data, obviously. BUT, almost everything in the world is a d (i.e. data). Needless to say, I had to update code to ensure better understanding and programming. Here's my example of better coding using D3.

Before

groups.selectAll('text')
    .data(function (d) {
        console.log(d);
        return d;
    })
    .enter()
    .append('text')
    .text( function (d, i) {
        console.log(i);
        if (typeof d === 'number')
        {
            console.log("data type is a number, not object...skipping.");
            return;
        }
        console.log(d);
        return d.x;
    });

After

groups.selectAll('text')
    .data(function (arr) {
        console.log(arr);
        return arr;
    })
    .enter()
    .append('text')
    .text( function (obj, i) {
        console.log(i);
        if (typeof obj === 'number')
        {
            console.log("data type is a number, not object...skipping.");
            return;
        }
        console.log(obj);
        return obj.x;
    });

In the After, I updated the d within the data method into "arr" as its a data array representing the dataset passed in. I updated the d within the text method into "obj" as its a data object of the data array passed in.

I hope this helps somebody.

Blessings,

Debugging - PHP + Javascript - Unexpected Token <

I recently came across an unusual error in the JavaScript Console when processing my PHP code into JavaScript to display in the browser. The line number provided in the console is misleading - b/c it's not the actual line number with the error. So I don't use the 'line number' information to debug.

Error

Code

The root cause is how either PHP is calculating the 'addition assignment' operation (i.e. a += b; ) within JavaScript tags during compilation or how JavaScript is processing the PHP output before displaying to the browser. I'm not exactly sure as this would require more research and investigation on my part which I don't currently have time - yay, deadlines!

Initial Attempt

At first, I thought I needed to replace the shorthand 'addition assignment' operator into its expanded equivalent. (See the green arrow in my image below.)

The expanded equivalent would be:

a = a +b;

or according to my code:

// line 91

$num_of_users_per_org[$k][1] = $num_of_users_per_org[$k][1] + 1;

Solution

At last (within 5 minutes), I figured out that I need to initialize the 2nd array in my multi-dimensional array corresponding to 'user_count'.  (See the light green arrow in my image below.)

Proof

After adding the code and rendering again in the browser, our results pass and the code works. Bingo!

Click on image to enlarge (see clearly)

Nice Debugging Reference

https://davidwalsh.name/fix-javascript-errors