Skip to content

Commit 5462313

Browse files
lawrencerowlandlawrencerowland
committed
sorted pics, tidied card index, added 4th app
1 parent 222b14c commit 5462313

9 files changed

Lines changed: 695 additions & 3 deletions

File tree

‎app-index.csv‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
#,name,description,origin,model,tags,explainer post,notes
2-
1,currying-B,currying demonstration with concrete mappings,Claude,3.5,"set, currying",,
3-
2,push-out-pull-back,"stop getting mixed up between push outs and pullbacks, products and Co products",ChatGPT,4,"education, pushout, product",,
4-
3,presheaves-and-opposite-categories,"explains why pre sheaves are a functor from the Opposite category using a node colouring example",Claude,Sonnet 3.5,"presheaves, functors",,
2+
1,currying-B,currying demonstration with concrete mappings,Claude,Sonnet 3.5,"set, currying",,
3+
2,push-out-pull-back,"stop getting mixed up between push outs and pullbacks, products and Co products",Claude,Sonnet 3.5,"education, pushout, product",,
4+
3,presheaves-and-opposite-categories,explains why pre sheaves are a functor from the Opposite category using a node colouring example,Claude,Sonnet 3.5,"presheaves, functors",,
5+
4,functors-as-objects,why sometimes to see functors as objects,Claude,Sonnet 3.5,"functors, arrow_category",,

‎apps/functors-as-objects/functors-as-objects.tsx‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import React, { useState } from 'react';
2+
import { ArrowRight, ArrowDown, MoveHorizontal } from 'lucide-react';
3+
4+
const CategoryTheoryVisualization = () => {
5+
const [activeView, setActiveView] = useState('categories');
6+
const [showNaturalTransformation, setShowNaturalTransformation] = useState(false);
7+
8+
// Styles
9+
const boxStyle = "border-2 rounded-md p-3 flex items-center justify-center text-center font-semibold";
10+
const categoryBoxStyle = `${boxStyle} border-blue-500 bg-blue-100`;
11+
const functorBoxStyle = `${boxStyle} border-purple-500 bg-purple-100`;
12+
const objectBoxStyle = `${boxStyle} border-green-500 bg-green-100`;
13+
const morphismStyle = "flex items-center justify-center text-gray-700 font-medium";
14+
const buttonStyle = "px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 font-medium";
15+
const activeButtonStyle = "px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 font-medium";
16+
17+
return (
18+
<div className="flex flex-col space-y-8 p-4 max-w-4xl mx-auto">
19+
<div className="text-center">
20+
<h1 className="text-2xl font-bold mb-4">Understanding Functors as Objects</h1>
21+
<p className="mb-6">This visualization demonstrates how functors can be viewed as both morphisms and objects in different contexts.</p>
22+
23+
<div className="flex space-x-4 justify-center mb-6">
24+
<button
25+
className={activeView === 'categories' ? activeButtonStyle : buttonStyle}
26+
onClick={() => setActiveView('categories')}
27+
>
28+
Functors as Morphisms
29+
</button>
30+
<button
31+
className={activeView === 'functorCategory' ? activeButtonStyle : buttonStyle}
32+
onClick={() => setActiveView('functorCategory')}
33+
>
34+
Functors as Objects
35+
</button>
36+
<button
37+
className={activeView === 'arrowCategory' ? activeButtonStyle : buttonStyle}
38+
onClick={() => setActiveView('arrowCategory')}
39+
>
40+
Arrow Category
41+
</button>
42+
</div>
43+
</div>
44+
45+
{activeView === 'categories' && (
46+
<div className="flex flex-col space-y-8">
47+
<h2 className="text-xl font-semibold text-center">Functors as Morphisms in Cat</h2>
48+
<p className="text-center">In the category Cat, small categories are objects and functors are morphisms between them.</p>
49+
50+
<div className="flex justify-between items-center">
51+
<div className="w-1/3">
52+
<div className={categoryBoxStyle}>
53+
<div>
54+
<div className="text-lg mb-2">Category C</div>
55+
<div className="flex flex-col space-y-2">
56+
<div className={objectBoxStyle}>Object C₁</div>
57+
<div className={objectBoxStyle}>Object C₂</div>
58+
<div className={morphismStyle}>
59+
<ArrowRight size={16} className="mx-1" />
60+
Morphisms
61+
<ArrowRight size={16} className="mx-1" />
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div className={morphismStyle}>
69+
<div className="flex flex-col items-center">
70+
<div>Functor F</div>
71+
<ArrowRight size={24} />
72+
</div>
73+
</div>
74+
75+
<div className="w-1/3">
76+
<div className={categoryBoxStyle}>
77+
<div>
78+
<div className="text-lg mb-2">Category D</div>
79+
<div className="flex flex-col space-y-2">
80+
<div className={objectBoxStyle}>Object D₁</div>
81+
<div className={objectBoxStyle}>Object D₂</div>
82+
<div className={morphismStyle}>
83+
<ArrowRight size={16} className="mx-1" />
84+
Morphisms
85+
<ArrowRight size={16} className="mx-1" />
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<div className="text-center">
94+
<p>Here, functors map objects to objects and morphisms to morphisms, preserving the structure.</p>
95+
<p>The functor F takes objects C₁, C₂ from category C and maps them to objects D₁, D₂ in category D.</p>
96+
</div>
97+
</div>
98+
)}
99+
100+
{activeView === 'functorCategory' && (
101+
<div className="flex flex-col space-y-8">
102+
<h2 className="text-xl font-semibold text-center">Functors as Objects in a Functor Category</h2>
103+
<p className="text-center">In the functor category [C, D], functors from C to D are objects, and natural transformations are morphisms.</p>
104+
105+
<div className="grid grid-cols-3 gap-6">
106+
<div className={functorBoxStyle}>
107+
<div>
108+
<div className="text-lg mb-2">Functor F: C → D</div>
109+
<div className="text-sm">Maps objects and morphisms</div>
110+
</div>
111+
</div>
112+
113+
<div className={functorBoxStyle}>
114+
<div>
115+
<div className="text-lg mb-2">Functor G: C → D</div>
116+
<div className="text-sm">Maps objects and morphisms</div>
117+
</div>
118+
</div>
119+
120+
<div className={functorBoxStyle}>
121+
<div>
122+
<div className="text-lg mb-2">Functor H: C → D</div>
123+
<div className="text-sm">Maps objects and morphisms</div>
124+
</div>
125+
</div>
126+
</div>
127+
128+
<div className="text-center">
129+
<p>These functors are now objects themselves in the functor category [C, D]</p>
130+
<button
131+
className={buttonStyle}
132+
onClick={() => setShowNaturalTransformation(!showNaturalTransformation)}
133+
>
134+
{showNaturalTransformation ? "Hide" : "Show"} Natural Transformation
135+
</button>
136+
</div>
137+
138+
{showNaturalTransformation && (
139+
<div className="flex justify-center items-center space-x-6">
140+
<div className={functorBoxStyle}>
141+
<div>Functor F</div>
142+
</div>
143+
144+
<div className="flex flex-col items-center">
145+
<div>Natural Transformation α: F ⇒ G</div>
146+
<MoveHorizontal size={24} />
147+
</div>
148+
149+
<div className={functorBoxStyle}>
150+
<div>Functor G</div>
151+
</div>
152+
</div>
153+
)}
154+
155+
{showNaturalTransformation && (
156+
<div className="text-center">
157+
<p>A natural transformation α provides a systematic way to transform functor F into functor G.</p>
158+
<p>It can be thought of as a morphism between functors in the functor category.</p>
159+
</div>
160+
)}
161+
</div>
162+
)}
163+
164+
{activeView === 'arrowCategory' && (
165+
<div className="flex flex-col space-y-8">
166+
<h2 className="text-xl font-semibold text-center">Arrow Category Example</h2>
167+
<p className="text-center">The arrow category shows how morphisms in one category become objects in another category.</p>
168+
169+
<div className="flex justify-center space-x-10">
170+
<div className="flex flex-col items-center">
171+
<div className="text-lg font-semibold mb-4">Original Category C</div>
172+
<div className="flex items-center space-x-4">
173+
<div className={objectBoxStyle}>A</div>
174+
<div className="flex flex-col">
175+
<div className="flex items-center">
176+
<ArrowRight size={24} />
177+
<span className="mx-2">f</span>
178+
</div>
179+
<div className="flex items-center mt-2">
180+
<ArrowRight size={24} />
181+
<span className="mx-2">g</span>
182+
</div>
183+
</div>
184+
<div className={objectBoxStyle}>B</div>
185+
</div>
186+
<div className="mt-2">Morphisms f, g: A → B</div>
187+
</div>
188+
189+
<ArrowDown size={32} className="mt-20" />
190+
191+
<div className="flex flex-col items-center">
192+
<div className="text-lg font-semibold mb-4">Arrow Category C↓</div>
193+
<div className="flex space-x-6">
194+
<div className={boxStyle + " border-orange-500 bg-orange-100"}>
195+
<div>
196+
<div className="text-lg mb-2">Morphism f</div>
197+
<div className="text-sm">as an object</div>
198+
</div>
199+
</div>
200+
201+
<div className={boxStyle + " border-orange-500 bg-orange-100"}>
202+
<div>
203+
<div className="text-lg mb-2">Morphism g</div>
204+
<div className="text-sm">as an object</div>
205+
</div>
206+
</div>
207+
</div>
208+
<div className="mt-4">Now morphisms f and g are objects in the arrow category!</div>
209+
</div>
210+
</div>
211+
212+
<div className="text-center bg-gray-100 p-4 rounded-md">
213+
<p className="font-semibold">Key Insight:</p>
214+
<p>The arrow category demonstrates that what functions as a morphism in one context can be treated as an object in another.</p>
215+
<p>Similarly, functors (which are morphisms in Cat) can be treated as objects in functor categories.</p>
216+
</div>
217+
</div>
218+
)}
219+
220+
<div className="mt-8 text-center text-gray-700 border-t pt-4">
221+
<p>This demonstration illustrates why "it is sensible to take things like functors as objects" - the distinction between objects and morphisms depends on which category we're working in.</p>
222+
</div>
223+
</div>
224+
);
225+
};
226+
227+
export default CategoryTheoryVisualization;

‎apps/functors-as-objects/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Pushout vs Pullback Explorer</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<p><a href="../../index.html">Back to app index</a></p>
12+
<script type="module" src="./src/index.jsx"></script>
13+
</body>
14+
</html>

‎apps/functors-as-objects/src/App.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.app-container {
2+
padding: 1rem;
3+
}

0 commit comments

Comments
 (0)