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). Create a new array of objects that removes the rows for the years 1940 and 2010, converts all values to numbers, combines the actual and estimated values, and computes the average of Weekday and Sunday values in a new property Average. Do not modify the array in place; make sure your output is a new array. For 1963, the new row should be:

{Year: 1963, Weekday: 58905000, Sunday: 46830000, Average: 52867500}

When computing the average, you can use the spread syntax to copy over most values and add or overwrite others. 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 use 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 4 columns: one for the year, one for weekdays, one for Sundays, and one for the average. 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 year, one for the year 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 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 years as well as range of values. Again, use JavaScript or templates to add the SVG elements. Here, the SVG is 600x400 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 decade. Specifically, given the start of a decade (e.g. 1990), change the appearance of all of that decade’s bars (e.g. 1990–1999) 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 decade = html`<input type="range" id="decade" min="1940" max="2020" step="10" value="1940"></input>`;

Now, other cells can reference the variable decade and any time the slider moves, those cells will reactively execute.

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

<div id="controls">
  <label for="decade">Decade:</label>
  1940
  <input type="range" id="decade" min="1940" max="2020" step="10" value="1"></input>
  2020
</div>

and JavaScript code:

document.getElementById('decade').onchange=(function() { highlightDecade(this.value); });

and finally, define a function highlightDecade that will highlight the specified decades. (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 (decade = 1990); 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 year is in the selected decade.
• 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.