Assignment 2

a. Data Processing (JavaScript) (10 pts)

The first task is to create a new array that counts the total number of inspections (including “Not Inspected” counts) for each month. Write a JavaScript function getTotals (without loops) that takes the array of inspection data as described above and returns a new array that contains an object for each month with the inspection date and the total number of inspections. You may not use loops, but should instead use Array’s map,filter,reduce, and/or forEach methods.

The results for getTotals(inspectionData) should match the following:

[{"Inspection Date":"2018-01","Total":1582},{"Inspection Date":"2018-02","Total":1369},{"Inspection Date":"2018-03","Total":1561},{"Inspection Date":"2018-04","Total":1690},{"Inspection Date":"2018-05","Total":1604},{"Inspection Date":"2018-06","Total":1589},{"Inspection Date":"2018-07","Total":1207},{"Inspection Date":"2018-08","Total":1423},{"Inspection Date":"2018-09","Total":1361},{"Inspection Date":"2018-10","Total":1493},{"Inspection Date":"2018-11","Total":1295},{"Inspection Date":"2018-12","Total":1018},{"Inspection Date":"2019-01","Total":1375},{"Inspection Date":"2019-02","Total":1412},{"Inspection Date":"2019-03","Total":1621},{"Inspection Date":"2019-04","Total":1657},{"Inspection Date":"2019-05","Total":1770},{"Inspection Date":"2019-06","Total":1660},{"Inspection Date":"2019-07","Total":1488},{"Inspection Date":"2019-08","Total":1653},{"Inspection Date":"2019-09","Total":1465},{"Inspection Date":"2019-10","Total":1809},{"Inspection Date":"2019-11","Total":1580},{"Inspection Date":"2019-12","Total":1562},{"Inspection Date":"2020-01","Total":1724},{"Inspection Date":"2020-02","Total":1328},{"Inspection Date":"2020-03","Total":1581},{"Inspection Date":"2020-04","Total":1285},{"Inspection Date":"2020-05","Total":1299},{"Inspection Date":"2020-06","Total":1202}]

You can use the console.log function to print the output of getTotals to the Console (a tab in Developer Tools panel of your browser).

Hints:

• Make sure your JavaScript occurs after the HTML elements are defined. HTML is processed sequentially. You may also use an onload function.
• To access a property whose name has spaces, dot notation will not work. Use square brackets instead (e.g. var["Name with Spaces"])
• When creating a new object, remember that you can put variables inside of curly braces (e.g. {"key1": var1, "key2": var2})

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

Once you have verified that your function works correctly, display the results (the output of getTotals) in text on your web page. If you were not able to get part a to work correctly, you may store the output above in a JavaScript variable. To create the table, you will need to dynamically create HTML elements in your web page. Create a <div> element for the table, and add the necessary elements to it using JavaScript. To begin, add the following HTML:

<div id="table">
   <!-- NOTHING GOES HERE, USE JAVASCRIPT -->
</div>

Your table should have two columns: one for the month, and one for the number of inspections. Add headers to the top of the table to indicate what is shown in each column. The following helper functions may be useful (you may copy them directly to your solution and/or modify them):

function makeElt(name, attrs, appendTo)
{
    var element = document.createElement(name);
    if (attrs === undefined) attrs = {};
    for (var key in attrs) {
        element.setAttribute(key, attrs[key]);
    }
    if (appendTo) {
        appendTo.appendChild(element);
    }
    return element;
}

function makeTextNode(text, appendTo)
{
    var node = document.createTextNode(text);
    if (appendTo) {
        appendTo.appendChild(node);
    }
    return node;
}

You may also use innerHTML and template literals

Hints:

• Use JavaScript’s document.getElementById or document.querySelector function to get a reference to the div element.
• You will probably want to create two elements for each month, one for the month and one for the total number of inspections.

Hints:

• In SVG, (0,0) is at the upper-left of the figure.
• 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.
• For a challenge, 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 days as well as range of values. Start with an empty div, and use JavaScript to add the SVG and SVG elements. Here, the SVG is 600x500 pixels.

<div id="barchart2">
   <!-- NOTHING GOES HERE, USE JAVASCRIPT -->
</div>

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] Highlighting (15 pts)

Now, write a function that will highlight a specific bar by month. Specifically, write a function highlightMonth that given a month (e.g. “2020-02”) will change the appearance of that bar to stand out from the others. This should be static; you should not update the highlighted bar based on where the mouse is. Add the following HTML after the barchart2 div; you should now be able to test how well your function works.

    <div id="controls">
      <label for="month">Month:</label>
      2018-01
      <input type="range" id="month" min="0" max="29" value="0"
         onchange="highlightMonth((2018 + Math.floor(this.value / 12)) + '-' + (this.value % 12 + 1).toString().padStart(2,'0'))"> 
      2020-06
    </div>

Note that the code inside of the highlightMonth transforms a number from 0 to 29 into the YYYY-mm string format. If you wish to use a different input to trigger the highlighting (e.g. a text field), this is also ok.

Hints

• Update the code in part a to assign an id attribute to each bar
• Remember ids cannot start with a number!
• You can change the class attribute of an element by modifying the DOM