AI chip supply chain visualization - Building the Pause Button

[joepio]

Component that shows the AI Chip supply chain. Part of the deliverables for the Building the Pause Button research project.

Todo

• Functional node positioning
• Colored legend
• Basic info shown
• Click to show info
• Responsive
• Align design with rest of website
• Consider using a library for positioning (currently all custom code)
• Fact-check
• Show national information (good idea @farhanpapin)
• Make relations weighted, show percentage on hover (thanks @molsonkiko)

[netlify]

✅ Deploy Preview for pauseai ready!

Name	Link
🔨 Latest commit	167f929
🔍 Latest deploy log	https://app.netlify.com/sites/pauseai/deploys/678672c64bf87500080bb9be
😎 Deploy Preview	https://deploy-preview-259--pauseai.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[farhanpapin]

The boxes are color coded to type of company. We need a way to color code country as well. That would be a good visualization for policy makers. Maybe the color of text? or we could have the column as the type of company and box color as country code?
Also need to think about

1. A visual representation of choke hold.
2. The intensity of choke hold (broken edge as opposed to weighted edge)

[farhanpapin]

We also need a way to specify suppliers to only one node of the supply chain. (for example Zeis supplies to ASML). ASML also supplies to ASE. Shinkawa, Toray etc supply to ASE.

[molsonkiko]

I would have more horizontal separation between each stage, to reduce the number of edges that pass through another node.

Agree with @farhanpapin that the edges between a supplier and a supply-ee should probably be weighted. I'd say a gold standard would be to have:

• the thickness of the edge should a linear function of the percentage of a given thing that flows through that edge
  • e.g., if 75% of the lithography share goes from LithoCorp1 to FoundryCorp1, 15% from LithoCorp1 to FoundryCorp2, and 10% from LithoCorp2 to FoundryCorp1, it should be visually apparent that the dominant flow is from LithoCorp1 to FoundryCorp1
• It is possible to hover over an edge to see what percent of the market share flows through that edge