Qlik + FORTUNE – How We built The FORTUNE and Global 500 Microsites

The FORTUNE 500 list represents the early stages of data visualization. For the first time, readers could see how each company stacked in the top 500 list each year in a tabular mode, the most basic form of data visualization. A few years later, all that data the FORTUNE team was collecting started to illustrate not only a picture of the present year, but, probably more fascinatingly, it was depicting the trends within the U.S. economy itself.

This year, Qlik partnered with FORTUNE to assist them in bringing the history of the FORTUNE 500 to life, thus continuing FORTUNE’s successful run as the doyen of data journalism. We did that by incorporating the latest wave of data visualization technology into the traditional FORTUNE 500 and the Global 500 lists.

For FORTUNE 500, we at Qlik crafted an experience that guides the readers through 45 years of data. The interactive journey shows some of the most significant moments of our history and how they impacted the list, from the first female CEO in the list, back in 1972, to the more recent great recession in 2008.

In 1990, when the world was changing at an unprecedented pace and globalization was in full swing, FORTUNE’s iconic list branched out into the Global 500 list, including for the first time companies from across the globe. Ever since then, FORTUNE has showcased, not only the U.S.'s largest 500 companies, but also the world's biggest corporations in separated lists.

Our Qlik team, in conjunction with a selected team of FORTUNE’s data journalists and editors, created a second Qlik-enabled webapp to guide the readers across the history of the Global 500 list since its launch back in 1990.

Two Apps, One Soul

The FORTUNE 500 project consisted of two sets of data. On one hand, we had 65 years’ worth of data for the U.S. version of the list, as that list had been compiled since 1955. On the other, we had 30 years of data for the Global 500, starting in 1990. The challenge was to come up with a common visual language that worked for both webapps and data sets, and yet enabled us to develop a unique experience for each list.

We used a shared palette of colors, typography and layouts, in addition to full-screen navigation to create a common visual narrative for both sites.

Telling Stories

After our first meeting with the FORTUNE 500 team, we all understood at Qlik that the project would not be successful without making the stories the centerpieces for both sites.

For the FORTUNE 500, we picked the history of the list itself as the main driver for a narrative that helped us to explain the last 65 years in the U.S. economy. We highlighted some of the most extraordinary moments in the list. For example, one of the most significant of all for the FORTUNE 500 was back in 1995 when the list was extended from industrial companies to include “services” companies in the list. Corporations such as Walmart dominated the top positions of the list ever since then.

The Global 500 narrative had a clear main character, China, and its incredible journey from 1990 (at bottom of the list) to China’s No. 1 ranking by number of Global 500 companies in 2020. The Rise of China is transversal to the site; it touches every single section of it. We added small story threads that contributed to enrich the experience and gave context to the phenomenal rise that China’s economy experienced in the last 25 years.

Qlik, React.js and Other Friends

The websites were built with fullpage.js to recreate full-screen navigation in line with the narratives we were building and with the site’s copy.

React.js is the main framework used by our Demo and Innovation Team for faster Document Object Model manipulation and easier handling of the data; it was our framework of choice for this project, as well.

In parallel to the creation of the website, we extracted the data from the raw FORTUNE lists, created a Qlik Sense app with it, and used the app for early prototyping and discovery. This was fundamental to understand the data and to come up with the right visualizations for each piece.

Once we had the framework setup, we needed to get data from Qlik. For that, we used Qlik’s open source enigma.js to create session objects and picasso.js to define the visualizations.

The Qlik Associative engine was fundamental by providing us incredible speed with the exact set of data at any given time with any set of parameters.

The entire solution was hosted on the cloud, using AWS Fargate and Cloudfront. We needed a serverless but scalable solution to handle all the traffic with minimal losses.

We were given a general idea of the expected concurrency, which we used as a baseline for our load testing. We used the following script (see the link), with multiple users to simulate the traffic for the load and scalability testing: https://github.com/yianni-ververis/website-load-test. In this, we specified the parameters like URL, username and pass for the staging site, as well as 50 as total number of sessions/tabs and the delay for each scrolling. Then, when we ran the scripts, each tab was going through the slides and was making the selections within the engine. Hence, we were able to measure the concurrent traffic in the AWS logs and the memory consumption of our engines. Based on the results, the necessary adjustments were made to the infrastructure for optimal performance.

Making It Fun

One of our goals at Qlik was to make both sites memorable and fun to navigate. To achieve that goal, we decided to think boldly with the visualizations: We wanted full screen charts; big, bold typographies; and interesting charts that make sense right away with very little explanation.

An example of this is the Rise of China animated Scatterplot on the Global 500 webapp. We used the Qlik Sense engine and its data visualization capabilities to recreate (and pay homage to) the quintessential Hans Rosling’s “200 Years That Changed The World” chart.

We created a Qlik Sense hypercube with a country dimension and the three measures we wanted to show: sum of revenues, profits and number of companies. Then, we used picasso.js to create the visualization by simply defining our settings and providing that data from the hypercube to picasso.js using the picasso.js q plugin.

To animate it, we use a loop to make selections and listen for the layout to change, then interpolate from the previous layout to the new layout while providing the picasso.js chart instance with the interpolated data at every step. Quick and easy.

Wrapping Up

As if making a high-level Qlik app mashup wasn’t enough of a challenge, we embraced the even bigger one of producing not one but two webapps with the FORTUNE team. On top of that, we accepted the task to find and create compelling stories within the data and to develop a common visual language for both apps.

Having Qlik Sense handling the data management and data transfer allowed us to only focus in how we wanted our site to look and how we would like to represent the data on the front end. Calculations, aggregations, filtering, business logic and search is all done on the fly by our own Qlik Sense. Then, using several of the Qlik’s Open Source libraries, such as enigma.js, and picasso.js, we brought the data to life in meaningful charts that come in multiple shapes and forms.

This was a fun project for the team, and we want to take this opportunity to thank everyone involved in the project from both the FORTUNE and Qlik teams for a great partnership. Given all that has changed around the globe this year, we are excited that our partnership continues, and we get to bring that story to you with next year’s list and apps.

Fortune 500

• Microsite: https://qlik.fortune.com
• Our partnership: https://www.qlik.com/us/lp/dg/fortune-500
• Qlik World 2020 Session: Bringing the History of the Fortune 500 to Life

Global 500

• Microsite: https://qlik.fortune.com/global500
• Our partnership: https://www.qlik.com/us/lp/dg/global-500