For the live version of this repo, click here.
The map for this project was taken from the NYT's "See Trump's New Tariffs on Every Country".
The NYT piece includes a static map, but doesn't allow interaction or seeing exactly what the tariff values are.
You can click a button to "Size by 2024 Imports", but hovering over the countries or clicking around doesn't give any information about what the import values were.
I used the data available at the bottom of the piece along with information from the Census Bureau, "U.S. International Trade in Goods and Services December and Annual 2024" to create the column charts.
The colors and map style are taken from the NYT piece and the fonts are close approximations from Google Fonts.
The map was created using MapLibre and geojson downloaded from GeoJSON Maps. The Carto base style "Positron" was initially used before I more closely copied the NYT style. Rather than get rid of it, I kept it but visually hid it so I could get rely on its vector tiles for highlighting countries and hovering on the countries.
The NYT Map isn't interactive, and the only countries labeled are the ones that start out labeled in the map I created. But, I wanted to be able to see what the other highlighted countries were, and for the labels to display when I hover over the map.
By adding and manipulating map layers, I can have the additional labels appear only on hover. This allows for exploration but doesn't clutter the map with additional labels.
The charts were created using Highcharts. The charts were created because the original NYT piece doesn't give the values of the tariffs until you get to the table at the bottom. So when their map said "rates as high as 50 percent" it wasn't clear if it was only one country or several countries.
Creating the chart let me see at the same time as the map what exactly the tariff rates were.
Rather than build 3 different charts and swap them out with CSS, I kept the 1 chart and use the buttons to swap out how the data is displayed.
The buttons change the data sort, the y-axis label and values, and the x-axis label.
Below, the x-axis label has been updated to show the countries are sorted by the import value.
Below, the y-axis and its label have been updated for the new data displayed (% of imports) and the x-axis label has been updated to reflect the new sort.
The "Sort by Tariff Rate" chart was so I could see the tariff values at the same time as the map.
"Sort by 2024 Import Value" was created because the NYT map allows you to display the countries sized by their import values, but doesn't provide the values. It only gives comparative information: we imported more from Canada than Thailand.
The second chart is an in-between of viewing the tariff rates and the import values. This chart lets me compare the countries by import value (countries on the left imported more than countries on the right) but see their tariff rates at the same time. By examining the chart, I could see that we imported $500B from Mexico and gave it a tariff rate of 30%, but only $44B from Brazil, and gave it a rate of 50%. I personally found this interesting - why are we punishing goods from countries we don't import much from? Wouldn't we want to encourage trade from these countries? (I have a background in many things but trade and economics are not it.)
This chart replaces the second map view from the NYT. It clearly compares the countries by how much we imported.
This project was partially an exercise in wiring interactivity between the charts and the map.
When hoving over a column, the country the column goes to is highlighted on the map. Likewise, if you hover over a country, the associated column is highlighted and the tooltip displays.
