While the Industry Dive Design Department has always created graphic assets for our journalists, 2019 was the first year we formed a team expressly for this purpose. The EDT was officially born when I joined the department in July of 2019. It has only been six months since then, but we’ve already accomplished so much: We’ve experimented with new story formats, introduced interactivity and data visualizations to some of our publications’ biggest stories and established processes that make our workflows more efficient and scalable.

Below are key project and process highlights from 2019.

Data visualizations

One of the primary areas of focus for the EDT is the design and development of data-centric stories – stories that heavily feature insights derived via data analysis. Over the last few months, we experimented with a number of different chart types and article layouts.

To scale data visualizations across our 19 publications, we also empowered our 75+ journalists to create their own charts. The rollout of this distributed system included pre-formatted chart templates, a PDF of guidelines and in-person training.

Our guidelines cover chart selection and usage – e.g. when to use a bar chart vs. a stacked bar chart – and chart design – e.g. when to add gridlines vs. data labels. The templated charts are pre-formatted with Industry Dive’s fonts and brand colors, so the journalists need only plug in data to produce impactful visualizations for their stories.

Examples of charts in our new style

Select data-centric stories designed and coded by the EDT in 2019:

Benchwarmers: What a decade of data says about gender equality at sportswear brands

Retail Dive journalists gathered data on the gender breakdown of executives at three top sportswear retailers over the last 11 years. We visualized these numbers in a chart and paired it with interactive text – by mousing over (or clicking on mobile) text underlined in red, the chart animates to reveal an insight. Connecting the text and the chart enhances both elements: Visualizing an insight helps readers’ comprehension of the text, and verbalizing chart findings can explain how to read the chart.

31 biopharmas at high risk of bankruptcy in 2020

Biopharma Dive analyzed financial data and identified 31 biopharma companies that are at the highest risk of going bankrupt in the next year. We visualized these findings in a couple ways: For a few companies that we wanted to highlight, we plotted their stock values to visually show their decline. For all 31 companies, we created an interactive table with sorting and searching features.

Interactive maps

Maps are another form of data visualization, and, this year, we explored new ways to create interactive versions by leveraging two powerful JavaScript libraries: Leaflet and D3.

Leaflet

Examples of maps built with Leaflet

Leaflet is a popular open-source JavaScript library for maps with various interactive features, most commonly panning, zooming and labeling features. We often create Leaflet maps to visualize locations in a given city or state. Because of Leaflet’s interactive features, readers can mouse over each location for more information about a location. They can also zoom in to see exactly where the location is on the street.

While a news story may reveal a trend on the national- and city-scale, these maps allow readers to zero in on specific neighborhoods (perhaps even their own) to personalize the story.

Select stories designed and coded by the EDT in 2019 that leveraged Leaflet:

Mapping the physical locations of DTC brands

Retail Dive journalists collected data on the first store locations of key direct-to-consumer (DTC) brands. Using Leaflet, we were able to translate this dataset of locations – imagine rows of store addresses – into five explorable maps. Each map is a close-up of a city, with circles identifying store locations.

On the line in California

Waste Dive’s story about California material recycling facilities (MRF) workers includes a map of MRF inspections in the state. Each circle is an MRF, colored by whether it has been inspected in recent years. At a glance, you can see that most MRFs in California have not been inspected, but you can also zoom in to find trends within regions.

D3

Examples of maps built with D3

D3 is another JavaScript library that we heavily lean on for creating maps (and data visualizations, generally). While Leaflet is great for creating maps with zooming and panning features, D3 is a better tool for maps that show trends on a larger scale. (Think data points that are on the city, state, or country level, rather than building or store level.)

Below are select stories designed and coded by the EDT in 2019 that leveraged D3:

Passport to success: How restaurants can make international expansion work

Restaurant Dive journalists gathered data on key restaurant chains’ international expansion plans. The data was on the country-level (e.g. Popeyes plans to expand into Brazil and China); therefore, it didn’t make sense to create a Leaflet map (we don’t care about the actual addresses of these stores). Instead, we created a map bubble chart. Each circle represents a country where a chain has plans to expand, with the size scaled to the number of stores. Looking at the map, there is a clear geographic trend: There is a lot of activity in Asia, especially Southeast Asia since not only are there more circles in this region, but larger circles, implying more and larger expansion plans.

How 5 businesses across the country are weathering the labor shortage

HR Dive journalists talked with five talent professionals about how their businesses are impacted by the recent labor shortage. To put these five businesses into perspective, we plotted their location on a US map and colored each state by its unemployment rate. At a glance, you can see which states have higher or lower unemployment rates, and the relative rates for the states in which the five businesses are located.

Trend trackers

Examples of trackers built in 2019

A tracker is an article type that allows the reader to follow a trend in their industry as it develops over time. Our trackers often span months, sometimes even years, of data, and therefore tend to include a lot of information.

To help our readers more easily browse so much information, we made our default layout a feed. When the number of feed items hits 10, we add sorting and filtering features to aid with navigation.

Select trackers designed and coded by the EDT in 2019: