Tensor diagrams - Penrose graphical notation in D3.js

A package for creating visual tensor diagrams using Penrose graphical notation in D3js. For machine learning, deep learning, quantum computing, quantum information, and other array operations. By Piotr Migdał and Claudia Zendejas-Morales from Quantum Flytrap.

A simple live version: https://jsfiddle.net/stared/60ndm3co/.

Inspirations include:

• tensornetwork.org/diagrams
• Matrices as Tensor Network Diagrams by Tai-Danae Bradley
• Drawing Trace Diagrams with TikZ by Elisha Peterson
• Piotr's longstanding interest in data visualization of array operations
  • ⟨𝜑|𝜓⟩.vue - a Vue-based visualization of quantum states and operations
  • Simple diagrams of convoluted neural networks
  • Symmetries and self-similarity of many-body wavefunctions

If you want to use tensors in the browser, you may be looking for the Quantum-Flytrap/quantum-tensors NPM package. If you are looking to visualize complex vectors and operators (especially for quantum computing), see https://github.com/Quantum-Flytrap/bra-ket-vue.

Local setup

Created using a NPM TypeScript frontend boilerplate metachris/typescript-boilerplate, which uses esbuild, and is described in detail in Blog post: Starting a TypeScript Project in 2021.

# Clone the repository
git clone https://github.com/Quantum-Flytrap/tensor-diagrams
cd tensor-diagrams

# Install dependencies
yarn install

# Now you can run various yarn commands:
yarn lint
yarn test
yarn build-all
yarn esbuild-browser
yarn docs

Feedback

The easiest feedback is by opening a GitHub Issue.