This interactive was developed at Column Five Media for an initiative launched by the Bill and Melinda Gates Foundation. The aim of the initiative is to develop and implement a community centered framework for college preparation, called the College Readiness Indicator Systems (CRIS), to sites across the US. The interactive was developed to provide administrators and educators with an interactive tool that would help them develop and implement their community-focused CRIS. The client came to the agency with specific brand guidelines, which helped us create the academic look. A core requirement was to have the interactive guide users in a step-by-step, mostly linear, fashion – making sure the user always had a clear path. There's a live version that is widely distributed, courteousy of the consortium, and the designs of the interactive make a couple of cameos in educational videos on the CRIS framework.
This was, perhaps, my first foray into writing a state based interactive. The interactive lacks a designated state model that is parsed to produce the different views (the USDA Hungry Pests interactive is a better example of this). Further, the selectors are hardcoded inside the JavaScript, a practice I have come to avoid due to the inherent challenges in maintainability and debugging such an approach precipitates. Despite the less than ideal scripting, the HTML and CSS in this interactive is fairly interesting and complex, with lots of layers, overlays, horizontally sliding elements, and nested scrolling elements. In terms of libraries, this was mostly a jQuery project, though I did use Knockout.js and D3.js for a few minor functionalities. The mini scrollbars make use of the appropriately named jQuery perfect-scrollbar plugin.