The heat map Python script was run on two different databases. The first was the database I compiled during the data collection process on the Coder Coder YouTube video. The heat map generated from this database is referred to as the learner programmer heat map. The second database was produced by another member of the research team, who ran the data collection process on a YouTube video that was approximately 5 hours long by a professional programmer. The heat map generated from this database is referred to as the professional programmer heat map. Figure 1 shows the heat map of the learner programmer, and figure 2 shows the heat map of the professional programmer.
The tick marks on the y-axis of the heat maps denote line numbers corresponding to the line numbers in the programmer’s final code file entry. As shown from the gradient color bar on the right side of the heat map, the color intensity of the rectangular bars designates the number of changes each line number has undergone. A lighter red color signifies a fewer number of changes and a darker red indicates a greater number of changes. The text overlaid on each rectangular bar is the corresponding code text from each line of the programmer’s final code file entry. This allows us to directly see which lines result in a greater or fewer number of changes.
Analysis
Looking at both the learner programmer’s heat map and the professional programmer’s heat map, we can identify the “hot” lines, or darker shaded areas, as well as the “cold” lines, or lighter tinted areas. The “hot” lines are classified as problem areas and the “cold” lines are classified as success areas.
Problem Areas
When analyzing the heat map of the learner programmer, we can look at the darker shaded areas to see that their problem areas include selecting and appending elements, using querySelectors, and extracting nested JSON data. Selecting and appending elements refers to lines 24 and 39, and seems to be a recurring issue regardless of context. This is where the programmer is selecting an element with a particular id attribute and appending another element to it. As seen in lines 5 and 6, using querySelectors is also a trouble spot for the learner programmer. Extracting nested JSON data, as found in lines 22-23 and lines 31-32, involves obtaining desired or necessary pieces of information from a JSON file. It is clear this is difficult for the learner programmer to do since it occurs in two distinct situations in the code. An anomaly among the problem lines of the learner programmer’s heat map was found in line 12, where the getDinoImage() function is called. Due to its similarity to other lines in the code, I believe the SequenceMatcher ratio may have misinterpreted its corresponding matching line while undergoing the logic section of the script, making line 12 an outlier.
As indicated by the darker shaded regions on the professional programmer’s heat map, we can see that their problem areas were nested loop statements, nested if statements, and querySelectors. Nested loop statements, seen in lines 47-54, involve a for loop that contains other for loops or actions within the loop. Similar to nested loop statements, nested if statements are multiple if statements contained within each other or contained within other function calls. As seen in lines 18-29 and lines 58-72, nested if statements were a significant problem area for the professional programmer. One similar problem area between the learner programmer and the professional programmer was using querySelectors. This can be seen in lines 67, 91, 110, and 146 of the professional programmer’s heat map; due to the span of multiple areas of the code, it is clear that querySelectors are a recurring problem.
Success Areas
On the other hand, we can look at the lighter-tinted sections on the learner programmer’s heat map to see that their area of success was writing repeated functions. Repeated functions are functions that were created and modified, then copied and used again for another variable with very similar uses. For example, the getDinoName() function, a portion of which is seen in lines 15-19 is modeled off the getDinoImage() function, a portion of which is seen in lines 27-33, so getDinoName() is a repeated function and is also an area of success.
Looking at the lighter-tinted regions on the heat map of the professional programmer, we can see that their success areas were defining variables, updating variables, and writing if statements. Defining variables refers to the initial call of the name and value of a variable, as seen in lines 2-10 and 16-17 of the professional programmer’s heat map. Updating variables, as seen in lines 81-87, was also a successful area, and refers to variables that are updated after being defined earlier within the program. Writing if statements, as seen in lines 124-133, refers to functions that were written with clearly defined if and else statements. This indicates that the professional programmer was easily able to write if statements that were in a non-nested format. Overall, the professional programmer had more subject areas of success than the learner programmer.