Assignment 2

a. Data Processing (JavaScript) (10 pts)

In this section, do not use loops. Use Array functions map, filter, reduce, and/or forEach. Also, do not change the order of the data items (i.e. do not sort the array). First, note that the Business Not Located may be zero, but that is indicated with the value “NA” and thus the column has string values. Create a new array where these values have been converted to integers and “NA” values are set to zero. Do not modify the array in place; use the spread syntax to copy over most values and add or overwrite others. Second, create another new array where each object has a Total Inspections column that sums all the different inspection results (all columns except year and month). Again, do not modify the array in place; create new objects using the spread syntax. The full output is available here.

Hints:

• JavaScript has a unary plus operator and parseInt method that will convert a string into an integer.
• Outside of Observable, make sure your JavaScript occurs after the HTML elements are defined. HTML is processed sequentially. You may also use an onload function.
• When creating a new object, remember that you can put variables inside of curly braces (e.g. {key1: var1, key2: var2}).
• Given an object obj = {key1: var1, key2: var2}, {...obj, key2: 13} overwrites the key2 value with the new value 13.

b. Table (JavaScript + HTML) (15 pts)

Once you have verified that your function works correctly, display the results in text on your web page. If you were not able to get part a to work correctly, you may store the output here in a JavaScript variable. To create the table, you will need to dynamically create HTML elements in your web page. You may either create a <div> element for the table and add the necessary elements to it using JavaScript, or use templating to dynamically create the rows. I recommend using Observable , but you may also use innerHTML and template literals. Your table should have 10 columns: one for the year, one for month, and one for each of the counts. Add headers to the top of the table to indicate what is shown in each column. Your table should be sorted, but do this by creating a copy of the array using toSorted (leave the original array unsorted).

Hints:

• When not using templates, JavaScript’s document.getElementById or document.querySelector function to get a reference to the parent div element.
• You will probably want to create multiple elements for each month, one for the month and one for each value shown.
• Use a map that uses the object keys to create the individual entries instead of hard-coding them all.

Hints:

• In SVG, (0,0) is at the upper-left of the figure.
• Think about how you can map the year and month to a y-value. It will be different from the example from class.
• Leave some space for labels!
• It will be easiest to use SVG text elements to add labels. Text elements require a child text node with the text to be displayed.
• Try to use a functional method instead of loops here.

a. Chart (20 pts)

Now, redo Part 2 but as a vertical bar chart, meaning that bars grow from the bottom to the top of the canvas. Again, add axes labels to indicate the starting and ending months as well as range of values. Again, use JavaScript or templates to add the SVG elements. Here, the SVG is 400x300 pixels.

Hints:

• In SVG, (0,0) is at the upper-left of the figure.
• Remember that the x,y coordinates of a rectangle are also the upper-left so use subtraction to determine the y-coordinate (or a transform).

b. [CS 627] Interaction (15 pts)

Now, update your code for the vertical bar chart so that a user can highlight a group of bars by quarters. A quarter is three consecutive months of the year. Specifically, given a quarter (e.g. 2nd Quarter of 2023), change the appearance of all of those quarters’s bars (e.g. 2023-04, 2023-05, 2023-06) to stand out from the others. This should be static; you should not update the highlighted bar based on where the mouse is. In either case, use the class attribute to specify the style of the highlighted bars and write the corresponding CSS to specify the change to the style. If using Observable, you can use an input to set a variable that you can use reactively in your template.

viewof quarter = html`<input type="range" id="quarter" min="0" max="7" value="0"></input>`;

Now, other cells can reference the variable quarter and any time the slider moves, those cells will reactively execute. Note that the quarters start at 0 which is the 1st quarter of 2023, and 7 is the 4th quarter of 2024.

The other approach is to add the following HTML after your vertical barchart:

<div id="controls">
  <label for="quarter">Quarter:</label>
  2023-1
  <input type="range" id="quarter" min="0" max="7" value="1"></input>
  2024-4
</div>

and JavaScript code:

document.getElementById('quarter').onchange=(function() { highlightQuarter(this.value); });

and finally, define a function highlightQuarter that will highlight the specified quarters. (You could also put this directly in the onchange function if you wish.) In addition, if you wish to use a different input to trigger the highlighting (e.g. a text field), this is also ok. However, you may not simply have the user define the variable (quarter = 3); it must use an <input> element as we are trying to improve user interaction.

Hints

• When using templates, the ternary operator can be useful in defining the class attribute. Think about how you test whether a month is in the selected quarter.
• If using the other approach, consider updating the code in part a to assign an id attribute to each bar. Remember ids cannot should not start with a number! Remember you can change the class attribute of an element by modifying the DOM via setAttribute calls.