Envy designed a data-driven experience where users could explore 3,000 survey participants’ answers.
Ligonier Ministries, a Christian institution based out of Orlando, FL.
Make the data interactive
Ligonier contracted LifeWay Research to conduct a survey about individual religious belief that involved 3,000 participants and took 2 years to conduct. That’s a lot of work to simply throw in a PDF that few people will read. Instead, building a fully-interactive site not only makes the data more accessible; it makes it shareable as well.
Make the data palatable
Some of the world’s most vital information may still lay dormant in some wordy research article, read by few eyes. It’s an artform making data interesting. That’s something at Envy we’re not unaccustomed to, and it’s something Ligonier needed for their findings.
Let users draw their own conclusions
Truth in data visualization lies not only in what’s sold as important, but the ability for people to look at well-organized data and discover the same conclusion and even new conclusions for themselves.
Research + Prototype
Active vs Passive Data Navigation
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.
We decided on styled bivariate area chart as the best readout for the information. Anyone can make a graph pretty, but just because something’s pretty doesn’t mean it’s true. Or easily understandable.
Design + Build
With D3 at our disposal, we can not only create interesting animations like the site’s startup screen, but actually make it using real data. Here, the actual survey answers are laid out on a radial axis for visual interest (don’t worry—the data is broken down more helpfully below).
We allowed users to create their own profiles for any question, and see how fellow Americans of different regional, faith, and education backgrounds answered the same question. Users can see how big their sample size is, in the top-right legend. We also warned users when they dropped to a low sample size, teaching about data validity in a simple way.
Like Christianity itself, the Ligonier brand is a blend of modern and ancient thought. What better way to show that than with traditional serif typography juxtaposed against whitespace and dynamically-generated data visualization?
Using D3.js, we were able to dynamically generate graphs in the browser without the need for a backend server. As users navigate the data, charts redraw instantly 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.
Client-side code: engaging interactions
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.
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.
Repetition grounds experiences
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.
Envy designed a helpful visualization of this data and implemented an impressive solution very quickly. This project would have floundered without them.Dirk Naves, Chief Creative Officer