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.

Preview here

Todo

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

[netlify]

✅ Deploy Preview for pauseai ready!

Name	Link
🔨 Latest commit	2d3c8fd
🔍 Latest deploy log	https://app.netlify.com/projects/pauseai/deploys/682f1cfb2205e100089cbad9
😎 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 project 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

[joepio]

• Updated a lot of data
• Added modal views, so you can navigate relationships
• Added view and more data for edges, including sources
• Moved the visualisation to a different route /ai-chip-supply-chain
• Added text-only representation for SEO / being indexed by google.

https://deploy-preview-259--pauseai.netlify.app/ai-chip-supply-chain