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, we only wish to examine Bachelor’s degrees so create a new array that only includes the entries for that type of degree. Second, some of the older data did not include values for the total count (CTOTALT); missing entries are indicated with the value “NA”. Create a new array where the entries that are missing have been filled in with the sum of CTOTALM and CTOTALW. For the others, transform them from the string to an integer. (See this note about IPEDS’s requirement that the sum of these two categories matches the total.) In this new array, the data for 2003 should look like

{YEAR: 2003, CTOTALT: 59292, CTOTALM: 43229, CTOTALW: 16063}

(Note the absence of quotes indicating that these are numbers instead of strings now.) 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})

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 four columns: one for the year, one for the number of graduates allocated to “Men”, one for the number of graduates allocated to “Women”, and one for the total number of graduates. 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.

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 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 half-decades. Specifically, given a half-decade (e.g. 2005), change the appearance of all of those half-decade’s bars (e.g. 2005 through 2009) 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 halfDecade = html`<input type="range" id="half-decade" min="2000" max="2020" value="2000" step="5"></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">Half-Decade:</label>
      2000
      <input type="range" id="decade" min="2000" max="2020" value="2000" step="5"></input>
      2020
    </div>

and JavaScript code:

document.getElementById('half-decade').onchange=(function() { highlightHalfDecade(this.value); });

and finally, define a function highlightHalfDecade 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 (halfDecade = 2005); 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 half 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.