Envy Labs designed a data-driven experience where users could explore 3,000 survey participants’ answers.
Let It Shine
Ligonier contracted LifeWay Research to administer a survey investigating modern religious views that involved 3,000 participants and took 2 years to conduct—a lot of work to simply throw in a PDF that few will read. Building an interactive site would make the data more accessible and shareable.
It’s an artform making data interesting, but fortunately that’s something we’re accustomed to at Envy Labs. Striking the balance between visceral intrigue and research integrity can be tough, but it’s a non-negotiable.
Truth in data visualization means alerting viewers to significant correlations quickly, but viewers could have found those themselves if they knew where to look. This data viewer should put the tools in users’ hands to reaffirm what’s stated, and let them draw new conclusions from the same dataset.
A Time To Search
Good data visualization finds a balance between active and passive data navigation. Should users simply be handed the most interesting correlations, or should they discover for themselves? For this project, we opted to split the project in half: starting with a narrative essay where users could passively read through Ligonier’s key talking points, and ending with a data explorer where users can navigate and subset the data however they choose.
After exploring several options, a styled bivariate area chart was a good readout for a Likert scale survey. Anyone can make a graph pretty, but just because something’s pretty doesn’t mean it’s true. Or easily understandable.
Design + Develop
Of Single Essence
With D3.js at our disposal, the same data pervades both the breakdowns and visual adornments. Here, the actual survey answers are laid out on a radial axis for visual interest with a detailed breakdown immediately below.
Teaching Along The Way
In the process of exploring data, users can see how big their sample size is. We were able to teach users about statistical integrity and the dangers of low sample size when it’s appropriate. Users learn about basic research without interrupting their experience.
New Patch, Old Garment
Like Christianity itself, the Ligonier brand is a blend of modern and ancient thought. What better way to represent that than with transitional serif type paired with modernist whitespace and animated data visualization?
Using D3.js, we were able to generate real-time graphs in the browser without the need for a backend or prerendering. As users navigate the data, charts redraw without any server requests or unnecessary loading times. Further, the entire site is 1MB (gzipped) and caches well, allowing even users on slow connections to have complete access within a few seconds.
Climbing Mountains of Data
Users can stay engaged and continue to dive deeper and deeper into the data without having to wait for new HTTP requests to be completed. Everything happens the instant something is clicked.
In With The New
By taking influence from a typical bivariate area chart and expanding it to suit Ligonier’s needs, a custom chart type was created that clearly depicts what the range of responses to each question looks like.
All data visualization takes a second to grasp what is being shown, but to change the chart type every time data appeared would be too overwhelming. By repeating the chart style, a user will become very familiar with what is being shown and will continually become faster at recognizing patterns.
We helped RedVector remotely train tens of thousands of firefighters, EMTs, and public service workers across the US.