Examining the Creation of the Recovery Capital Index Microsite

By Amina Brown, Senior Lead Data Visualization Engineer @ Data Culture

The Recovery Capital Index (RCI) microsite was designed to support Commonly Well’s mission of changing the narrative around addiction recovery. The RCI was established as a measurement to help providers and individuals navigate recovery. By calculating holistic scores about an individual’s path, the RCI rejects the industry standard of treating recovery as binary (“you’re either sober, or you’re not”). Our goal was to work with the team at Commonly Well to communicate how this new measure operates and why it is a necessary step towards improving the recovery process.

The Data

The Discovery

Blueprint of the narrative after the Discovery phase

The Design

Screenshot of text bubble graphics
Leveraging text bubbles to highlight that RCI is a text-based platform

The data visualization design has the responsibility of highlighting how the RCI works in addition to maintaining the human aspect of the data. By leveraging line graphs and a force diagram, we highlighted the individual paths that people take throughout their recovery by representing each one through an individual element. In the case of the force diagram, we had planned to toggle between the overall RCI view with one bubble per individual and the Indicator (sub score) view with three bubbles per individual. This left us with a decision to choose between grouping the indicators by individual, which would preserve the idea that they combined to create the overall profile of each person, or grouping them by indicator type, to better show the personal, social, and cultural health of the various communities. After a delightfully frustrating brainstorming session, we decided the answer was to show both, which meant that Neil Oliver was tasked with combining multiple force simulations to create a transition which moved through both states. As complicated as it is to describe, it was more complicated to build.

Sketch of the force diagram
Initial sketch of the force diagram

The Development

Gif of scrolling animation
Leveraging Webflow scroll animations to highlight the holistic nature of the RCI

In terms of the data visualization development, the interactive nature of the visualizations required a bit more coordination between Webflow and the D3 code to operate. The scrolling visuals leveraged code based observers that targeted certain elements in Webflow, but the implementation of these elements was also imperative. We had to strike the right balance between the observer thresholds and the element positioning and styling to make sure the triggers happened in view at the appropriate time.

The second piece of crucial communication was setting up the various event listeners that contributed to the exploratory nature of the force diagram. Here, in addition to the multiple force simulations, we introduced buttons, a toggle, and a slider with a play animation. Since each one is built differently in Webflow, the event listeners had to be tweaked to match the unique structure of the outputs. The efficacy of this visualization was then further complicated by the underlying data. We had designed the visualization to showcase change over time and between groups, but as many practitioners know, the data doesn’t always support these initiatives. The changes were often hard to see so we made certain adjustments to highlight which elements were changing to draw the eye to them, but the best way to understand it is to check it out below.

Gif of the final force diagram
Final version of the force diagram

The Final Product

“The final microsite has been an immediately valuable asset. It elevates our narrative and brand position. It shows our stakeholders how complex survey data comes together to tell a better and more meaningful story about overcoming addiction”.

Our goal had been to create something that helped further communicate the importance of the RCI and also showed how data can be leveraged to help better the recovery industry without blurring the lines of data privacy. Whether we reached that goal is up to the viewer, so we encourage you to scroll through the site and judge for yourself.



We help organizations build data capabilities and get value from their data.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Data Culture

We help organizations build data capabilities and get value from their data.