Data.fivethirtyeight.com reimagined with PortalJS

We at the PortalJS team are longtime fans of the FiveThirtyEight website. We consider the authors one of the best in their business when it comes to data journalism and data visualization. Having said that, we wanted to use some of their work to proof-test the current state of PortalJS. Currently, they store a list of all the data they use on their articles + related content at FiveThirtyEight, a very cleverly-designed and simple data catalog, and we believed we could replicate and improve it using our framework, our main goal was to add a dataset showcase page highlighting the datasets in a cleaner way for the end users.

Meet PortalJS

If you are out of the loop and are new to PortalJS, it's more than a JavaScript framework. It's designed specifically for data portals and equips editors with the tools to craft compelling narratives using data. With our unique Data-Driven Stories feature, you can blend structured text with data visualizations, transforming data from just a collection of bytes into insightful stories that can spark real change.

The Driving Force Behind the Project

The original FiveThirtyEight data portal has a great UI. It is elegantly simplistic, beautifully displaying multiple datasets - making it an ideal candidate for replication. Our intention was to leverage PortalJS to amplify the portal’s functionality, mainly by implementing a showcase page that previews data in a user-friendly way. Adhering to our principles of open-source and free data, all datasets are available to the public on GitHub.

A Peek into the Original FiveThirtyEight Website

In the original FiveThirtyEight data portal, that's what the homepage looks like:

And by clicking on the info button users are redirected to the GitHub repo associated with a particular dataset:

Our Version: The PortalJS Replica

Introducing the revamped homepage:

Not much changed, but note the addition of an "Explore" button, which takes users to the new dataset showcase page:

Lo and behold! We now have a page that pullsinformation directly from GitHub for a specific dataset and presents it in a way accessible to non-tech users. Powered by Markdown and the @portaljs/components package, we can add whatever we want to this page, such as file previews:

… which can be used to filter data by year:

… or by automatic categories:

… or by text matching:

Additionally, we've incorporated the ability to download data in either the original format (CSV) or converted to JSON.

Conclusion

Our journey to replicate and enhance the FiveThirtyEight data portal using PortalJS has been both exciting and insightful. We are happy with the result of this small experiment, and with the valuable learnings learned. This isn't just about successfully adding the new dataset showcase page or creating an interface that non-technical users find inviting. It's about the bigger picture. These kinds of replicas allow us to experiment with the framework, uncover new use cases, and identify areas for improvement.

Key Takeaways

• User-Friendly Data Access: We've significantly improved how users access and interact with datasets. From year-based filters to automatic categories and text matching, we've equipped users with a variety of options to explore data.
• Flexible Data Download: By enabling users to download data in both CSV and JSON formats, we've ensured a flexible approach to data usage that caters to diverse needs.
• Improved Data Narratives: With Markdown and the @portaljs/components package, we've transformed cold, hard data into engaging narratives, making the language of data more relatable.
• Continuous Improvement: This experiment served as a real-world test for our framework, helping us identify its strengths and areas for improvement. It's these real-world trials that fuel our ongoing commitment to refining PortalJS.

Stay tuned!