1. Exercise 1
Modify some parameters in the histogram.js and see what would happen (one by one)
20 in Line 2  50
960 in Line 3  500
.1 in Line 15  .9
“height - y(d.value)” in Line 55 10
Change the column name in data.tsv
value  number
How to fix the problem?

2. Mouse Events in JS and Array Sorting

3. User Interaction Events What event happened and on what element?
Keyboard, mouse events
What event happened and on what element?
General approach
Specify which element can respond to an event
Define what event to respond
Define how to respond

4. Example
ryjs_events_srcelement

5. In Our Case The element to respond event: SVG
What event to respond: mouse click (mousedown)
What to do: sort the data and redraw the chart
Add this statement before the function type()

6. Exercise 2
Check the outputs and figure out how to obtain the x and y coordinates
Modify the JS codes so that only responding clicking the areas left to Y or below X axis.
Modify the JS codes so that bar color changes when the cursor is in and out.

7. Sorting Array Data in JavaScript
See some examples

8. Exercise 3 Add three statements into JS codes.
before the function to read data file.
after the data file is read
Reload the page and type the statements in the Console
Check the values of arrays in the console (one by one)

9. More Tips for the Assignment
Redraw the chart after sorting the array
To redraw the chart, previous bars and axes have to be deleted.