Exercise:
Part 1
Already added: Using code from the previous session, remove all svg contents, code for everything except Part 3.3 to Part 3.5
Note: this is the same code from before, we just loaded in data from the conference. Look at the data
Refresh the page and notice what happens
Inspect the rectangle data in the developer tools
Hover over rect -> Right-click -> Inspect -> Properties tab -> rect -> __data
Part 2
Change y to 80 instead of random, see what happens
Instead of randomly spreading them, put them side by side in a line. What happens?
Get the index of each element and use it on the x axis
Change the widths of rectangles to 2
Add a delay immediately after the transition
.delay((d,i)=>i*10)
Part 3
Change the colors to reflect university affiliation
Give them different y values based on affiliation
Add text for affiliation at the end
Part 4
Using another transition and a delay, slide the rects together (and the text) to form a bar chart
Add the count to the text
Change affiliation to "Year of Study"