Assignment 2

a. Data Processing (JavaScript) (10 pts)

In this section, do not use loops. Use Array functions map, filter, reduce, and/or forEach. The first task is to create a new array that does not include the entires for 1940 and 2010 (for 2010, better if you check for invalid (--) entries). Then, convert all values to numbers. JavaScript has a parseInt method that will parse a string into an integer that will work well here. Next, compute a new property that stores the Average for Weekday and Sunday. Store the result in a new array. In this new array, the data for 2020 should look like

{Year: 2020, Weekday: 24299333, Sunday: 25785036, Average: 25042184.5}

(note the absence of quotes indicating that these are numbers instead of strings now). The full output is availabe here. If you didn’t convert correctly, the + operator will do concatentation.

Hints:

• 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})
• Methods like Object.entries and Object.fromEntries may be useful in iterating through object properies.

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 dyanmically create the rows. I recommend using Observable , but you may also use innerHTML and template literals. Your table should have four columns: one for the year, one for Weekday circulation, one for the Sunday circulation, and one for the Average circulation. Add headers to the top of the table to indicate what is shown in each column.

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 mutliple elements for each year, one for the year and one for each value shown.

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.
• 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 600x300 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 barchart so that a user can highlight a group of bars by decade. Specifically, given a decade (e.g. 1980), change the appearance of all of those decade’s bars (e.g. 1980 through 1989) 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" value="1940" step="10"></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" value="1940" step="10"></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 = 1950); 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.