How we helped the Current analyze and visualize public salary data
For this project, I helped the Current analyze and visualize data from a survey it conducted of 1,900 public media employees. The survey results included salary data, demographic information and other work-related fields such as years of experience and organization information.
The staff had two goals in mind when we started this project. First, they wanted to run an article that highlighted findings from the dataset that would include various static and interactive charts. However, they also wanted users to be able to explore the dataset to see how their salaries compared to those of other public media journalists with similar work experiences and demographics around the country. To do this, I built this interactive interface using Observable.
Interactive Data Visualizations with Observable Notebooks and D3.js
However, building D3 charts and graphs from scratch can be tedious at best. In 2018, Bostock launched Observable, a browser-based computational notebook that lets users quickly build and share visualizations. You can also copy notebooks that other users have created, so you don’t have to reinvent the wheel every time you start a new project.
Observable makes this process significantly easier by doing much of this work for you. Observable’s views allow you to define an input element and then dynamically reference the input’s value.
For example, you could create a simple number input like this:
Whenever you want to access the value that the user enters in this text field, you can just reference the “minimum” view.
If you had a charting function that would plot an array of objects passed as a parameter and you wanted the user to be able to filter out points below a certain value, you could filter the data using the “minimum” view. Whenever the user changes the input field’s value, Observable will rerender the chart based on the filtered data.
Observable offers several easy embed options that allow you to drop your charts into other websites. The simplest allows you to export your charts as iFrames that you can place directly into many content management systems. However, one possible drawback of this method is that each embedded chart will include an irremovable credit line at the bottom that will link back to the notebook.
To handle this, I turned to GitHub Pages and NPR’s Pym.js responsive iFrame library. I knew that for the searchable interface I also wanted more control over the structure of the various components I was importing from Observable, so I built a very basic Pym-enabled HTML page hosted (for free) on GitHub Pages where I pasted the Observable runtime code and formatted the cells. I then used a Pym shortcode WordPress plugin to embed the interface into the site.