Project description

An animated visualization of the global tit-for-tat targeting of goods in the trade war started by American president, Donald Trump. The war started with tariffs on solar panels and washing machines and in just six months grew to include about 10,000 products worth billions of dollars.

What makes this project innovative?

One of our biggest challenges in this piece was animating 10,000 circles on a web page without making it feel sluggish. We chose to use a scrolling interface that consolidated disparate data points to present the sheer size of a trade war that had previously only been discussed in vague, macro-level terms. Countries continued to implement new tariffs as we worked on the story, and the number of products continued to grow. Once there were more than 5,000 products in play, we pivoted to using WebGL shaders to draw animate the circles, pixel by pixel, so that the performance of the piece would feel smooth. We didn’t want to hide the central visualization with the typical method of scrolling a text box over the graphic, so we considered what on the page other than the text could be scrolled when the reader moved the mouse wheel. Eventually, we landed on the timeline itself as the element that would move as the reader scrolled, allowing the text to stay in place, and the visualization to always remain visible. And despite those technical innovations, perhaps the heaviest lift of this piece was consolidating vast amounts of data from five different government entities, often released in PDF format, with a global trade database to estimate the actual cost and impact of the trade war on a product level.

What was the impact of your project? How did you measure it?

The piece was promoted on the homepage of The Times as well as on The Times’s social media accounts on Facebook and Twitter. It received relatively high engagement from readers on social media. It was one of our top-performing interactive pages in 2019.

Source and methodology

Each time a country announced new tariffs, it released a list of the products that would be included, along with each product’s Harmonized Commodity code and the percentage of the tariff on the good specified. Each of those lists had to be converted from PDF, cleaned, then painstakingly matched with trade data from the previous year. The circle sizes were based on the dollar value of imports of the commodities in 2017. Some commodities on which countries imposed tariffs were not imported to those countries in 2017, and are therefore were not shown. In cases where countries released categories of products, as opposed to specific products, all imports of products that fell within those categories were included. The value of China’s imports were based on exports from the United States to China in 2017, as China had not published its full list of imports for 2017 at the time of publication. Except for China, the value of each country’s imports were based on their published records from 2017. For the United States, the value includes imports from China, the European Union, Canada, Mexico, Japan and South Korea. Sources: Commodity data from government releases; import and export data from IHS Markit’s Global Trade Atlas. Specific solar products, washing machines, steel and aluminum products subject to tariffs by the United States are based on an analysis by IHS Markit as well as government publications.

Technologies Used

We used Node.js to process the data behind this piece, and Javascript to build it. We used the D3 library to force-direct the circles, and the regl library to draw them, using the OpenGL Shader Language (glsl).

Project members

By Keith Collins and Jasmine C. Lee Additional work by Adam Pearce, Karl Russell, Jugal Patel, Larry Buchanan and Josh Williams



Click Follow to keep up with the evolution of this project:
you will receive a notification anytime the project leader updates the project page.