100%

Fork of U.S. Trade Policy Dashboard

✓ Published0🌍 Public

Last edited Jul 23, 2025

Created on Jul 23, 2025

This interactive D3.js (v7) world map visualizes U.S. trade policy as of July 2025, coloring countries by deal status—from finalized agreements like Japan’s $550B investment to active negotiations with China and the EU, and threatened tariffs. Hovering reveals tooltips with tariff details, while clicking updates a side panel with country-specific information. The map uses TopoJSON for geographic data and offers World, Asia, and Europe focus views, with color-coded legends and a separate metrics panel highlighting key deal figures.

AI-generated description

U.S. Trade Policy Map 2025

An interactive world map visualization showing current U.S. trade deals, tariff rates, and negotiation status with various countries.

Features

Interactive world map with country-specific trade data
Color-coded countries based on deal status (finalized, negotiating, threatened, etc.)
Multiple view modes: World, Asia Focus, Europe Focus
Hover tooltips with detailed trade information
Click countries for expanded details
Responsive design for mobile and desktop

Trade Data Visualization

The map displays tariff rates and deal status for:

Finalized Deals: Japan ($550B investment deal)
Framework Agreements: Philippines, Indonesia
Announced Deals: Vietnam
Active Negotiations: EU, China
Threatened Tariffs: Multiple countries facing 25-40% tariffs

Technology Stack

D3.js for interactive map visualization
TopoJSON for efficient geographic data
CSS Grid for responsive layout
Natural Earth projection for world view
Mercator projection for regional focus views

Controls

World View: Complete global overview
Asia Focus: Zoomed view of Asian trade partners
Europe Focus: Detailed view of European negotiations
Interactive Elements: Hover for tooltips, click for details
Zoom & Pan: Mouse wheel and drag to navigate

The visualization provides real-time insight into the complex landscape of U.S. international trade relationships and pending negotiations.

MIT Licensed

Similar vizzes

Loading thumbnail…

U.S. Trade Policy Dashboard

This dashboard visualizes U.S. trade policy as of July 2025, showing tariff rates for 18 countries and territories with color-coded bars reflecting deal status (finalized, framework, announced, negotiating, threatened). A sidebar presents status cards and key metrics from the Japan deal, while deadline alerts highlight upcoming negotiation milestones. Built with D3.js v7, the bar chart uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map trade data parsed from the README, with interactive tooltips for each bar.

NNita

88% match

Loading thumbnail…

Fork of Fork of USA Map 2

This interactive choropleth map visualizes US state economic performance metrics across four selectable time periods. Users can toggle between 1-year, 5-year, since-1991, and latest-period data via a dropdown menu. The map uses D3.js v7 with TopoJSON to render geographic boundaries via `d3.geoPath` and a `geoAlbersUsa` projection, while `scaleSequential` and `scaleDiverging` color scales encode metric values. Hover tooltips display state details, and clicking a state opens a side panel with additional information.

NNita

73% match

Loading thumbnail…

Fork of US Economic indicators

This interactive dashboard visualizes U.S. economic indicators, including GDP, income, and inflation, through a four-page interface with navigation buttons. It features a choropleth map of states with a slider for temporal changes, a multi-line chart comparing economic trends, a dashboard with small multiples, and a scatterplot with a slider and trailing dots. Built with D3 v7 and TopoJSON, it renders SVG elements and uses shared tooltips, color legends, and quantized color scales to convey data across all pages.

Ddiwashhumagain@my.unt.edu

72% match

Loading thumbnail…

Fork of Fork of US Economic indicators

This interactive dashboard explores US economic indicators across four linked pages: a choropleth map of state GDP, a multi-line chart of income trends, a small-multiple dashboard of related metrics, and an animated scatterplot with a trailing dot effect. Navigation buttons toggle between pages, with charts rendered lazily on first view. The visualization uses d3.v7 with d3.geoPath for the TopoJSON state map, d3.csv for loading economic datasets, and d3.scaleQuantize for choropleth coloring, all drawn as SVG with shared tooltips and interactive hover states.

Ddiwashhumagain@my.unt.edu

72% match

Loading thumbnail…

Fork of Interactive WorldMap

This interactive world map uses D3.js to visualize country-level economic data, coloring each nation with a categorical scale based on its economy type. The map renders geographic boundaries using d3.geoPath with d3.geoNaturalEarth1 projection, and supports zooming through d3.zoom. Data comes from world-atlas TopoJSON and TSV metadata, while a color legend uses d3-scale-chromatic. Additional code demonstrates animated interpolation between London and New York using d3.geoInterpolate, though that feature appears incomplete in the rendered output.

NNikkko1

71% match

Loading thumbnail…

Fork of Working Region Filter

This interactive treemap visualizes US steel scrap trade data, showing the relative monetary value of imports and exports by partner country within a selected region. Users can filter the view by region and toggle between import and export flows. The visualization uses a hierarchical treemap layout, rendered as SVG, with color intensity reflecting magnitude. Built with D3 v7, the code leverages `d3.hierarchy` and `d3.treemap` to structure and compute rectangle positions, while `d3.scaleSequential` drives the color mapping. Clicking a country cell initiates a drill-down, suggesting further exploration of commodity-level details.

GGayan Priyadarshana

71% match

Loading thumbnail…

Fork of Custom Color TreeMap

This interactive treemap visualizes steel scrap exports from the United States to various partner countries, with each colored rectangle representing a country and its total export value. The visualization uses d3.hierarchy and d3.treemap to compute the layout, with a sequential color scale interpolating from lightblue to darkblue based on value magnitude. Users can click any country cell to drill down into its commodity-level breakdown, while a reset button restores the original country-level view. The code employs D3 v7's data joins and transition methods to smoothly animate between hierarchy levels, with SVG rendering for all elements.

GGayan Priyadarshana

71% match

Loading thumbnail…

Fork of map

This interactive world map colors each country by economy group using a categorical ordinal scale with a spectral color scheme. Users can pan and zoom the map through d3.zoom, while hovering highlights individual countries. The visualization loads geographic data from the world-atlas TopoJSON dataset and joins it with TSV metadata, rendering with d3.geoPath and a natural Earth projection. A custom color legend component displays the ordinal scale, and the code imports utilities from d3 v5 and topojson.

RRahulChaitu999

70% match