fakhrudin-mfm / college-majors-visualisation

Interactive Data Visualisation of U.S College Majors

college-majors-visualisation

An interactive, scrollable visualisation of College Majors in the United States, built using D3.js. The Goal of this project was to learn how to create a narrative visualisation which changed state based on the user's scroll position on the page. I utilised several resources to learn the necessary techniques, most useful of them being Jim Vallandingham's article on the topic.

A full write-up detailing how this project was created can be found at my blog here

The most useful techniques I learned in this project include:

• Using .transition() before every attribute change to allow interruptable animations
• Using named transitions for the animations which must be completed
• Using .raise() to reorder elements - Will append current selection to the end of the parent element
• Creating all elements initially, and using the opacity attribute to bring them in and out of view
• Using d3.dispatch() to generate events, which dispatches events based on the user's scroll position