Article Image reimagined with PortalJS

Author Image
Luccas Mateus
3 mins read

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:

Replica home page

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

Replica dataset github page

Our Version: The PortalJS Replica

Introducing the revamped homepage:

Replica homepage

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

Replica showcased dataset 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:

Replica data preview page

… which can be used to filter data by year:

Replica data preview page with filter applied

… or by automatic categories:

Replica data preview page with automatic categories

… or by text matching:

Replica data preview page with keyword matching

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


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!

We are the CKAN experts.

Datopian are the co-creators, co-stewards, and one of the main developers of CKAN. We design, develop and scale CKAN solutions for everyone from government to the Fortune 500. We also monitor client use cases for data to ensure that CKAN is responding to genuine challenges faced by real organizations.

Related blog posts

Case Study Image
3 min read

The OpenSpending Revamp: Behind the Scenes

In our last article, we explored the Open Spending revamp. Now, let's dive into the tech stack that makes it tick. We'll unpack how PortalJS, Cloudflare R2, Frictionless Data Packages, and Octokit com...

Author ImageAuthor Image

Luccas Mateus

João Demenech