Skip to content

Commit

Permalink
convert geometric-bayes.typ, heatmap.typ, conv2d.typ to Cetz from LaTeX
Browse files Browse the repository at this point in the history
  • Loading branch information
@janosh
janosh committed Jan 23, 2025
1 parent 102015b commit 5f7f4b9
Show file tree
Hide file tree
Showing 5 changed files with 291 additions and 3 deletions.
139 changes: 139 additions & 0 deletions assets/conv2d/conv2d.typ
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
#import "@preview/cetz:0.3.1": canvas, draw

#set page(width: auto, height: auto, margin: 5pt)

#canvas({
import draw: line, content, rect, on-layer

let cell-size = 0.6
let matrix-sep = 1.5
let highlight = rgb(255, 200, 150) // orange!30
let kernel-color = rgb("#9ae7e1") // teal!30
let result-color = rgb(200, 200, 255) // blue!30
// Helper to draw a matrix cell
let draw-cell(pos, value, fill: none, name: none) = {
rect(
pos,
(pos.at(0) + cell-size, pos.at(1) + cell-size),
fill: fill,
name: name,
stroke: .5pt,
)
if value != none {
content(
(pos.at(0) + cell-size / 2, pos.at(1) + cell-size / 2),
$#value$,
)
}
}
// Helper to draw a matrix
let draw-matrix(origin, shape, values, highlights: (), name: none) = {
let (rows, cols) = shape
for ii in range(rows) {
for jj in range(cols) {
let pos = (origin.at(0) + jj * cell-size, origin.at(1) - ii * cell-size)
let idx = ii * cols + jj
let cell-name = if name != none { name + "-" + str(ii) + "-" + str(jj) }
draw-cell(
pos,
if idx < values.len() { values.at(idx) },
fill: if (ii, jj) in highlights { highlight },
name: cell-name,
)
}
}
}
// Draw input matrix I
let input-origin = (0, 4)
let input-values = (
..(0, 1, 1, 1, 0, 0, 0),
..(0, 0, 1, 1, 1, 0, 0),
..(0, 0, 0, 1, 1, 1, 0),
..(0, 0, 0, 1, 1, 0, 0),
..(0, 0, 1, 1, 0, 0, 0),
..(0, 1, 1, 0, 0, 0, 0),
..(1, 1, 0, 0, 0, 0, 0),
)
draw-matrix(
input-origin,
(7, 7),
input-values,
highlights: ((0, 3), (0, 4), (0, 5), (1, 3), (1, 4), (1, 5), (2, 3), (2, 4), (2, 5)),
name: "I",
)
content(
(input-origin.at(0) + 7 * cell-size / 2, 0),
$bold(I)$,
name: "I-label",
)
// Draw multiplication symbol
content((rel: (1, 0), to: "I-3-6"), text(size: 18pt)[$*$], name: "times")
// Draw kernel matrix K
let kernel-origin = (input-origin.at(0) + 7 * cell-size + matrix-sep, input-origin.at(1) - 2 * cell-size)
let kernel-values = (1, 0, 1, 0, 1, 0, 1, 0, 1)
draw-matrix(
kernel-origin,
(3, 3),
kernel-values,
name: "K",
)
// Fill kernel matrix background
rect("K-0-0.north-west", "K-2-2.south-east", fill: kernel-color, stroke: none)
// Redraw matrix on top of background
draw-matrix(kernel-origin, (3, 3), kernel-values, name: "K")
content(
(kernel-origin.at(0) + 3 * cell-size / 2, 0),
$bold(K)$,
name: "K-label",
)
// Draw equals sign
content((rel: (1, 0), to: "K-1-2"), text(size: 18pt)[$=$], name: "equals")
// Draw result matrix
let result-origin = (kernel-origin.at(0) + 3 * cell-size + matrix-sep, input-origin.at(1) - cell-size)
let result-values = (
..(1, 4, 3, 4, 1),
..(1, 2, 4, 3, 3),
..(1, 2, 3, 4, 1),
..(1, 3, 3, 1, 1),
..(3, 3, 1, 1, 0),
)
draw-matrix(result-origin, (5, 5), result-values, name: "R")
// Draw highlighted cell in result matrix
on-layer(
-1,
rect("R-0-3.north-west", "R-0-3.south-east", fill: result-color, stroke: none),
)
content(
(result-origin.at(0) + 5 * cell-size / 2, 0),
$bold(I * K)$,
name: "R-label",
)
// Draw connection lines
let dash-style = (stroke: (dash: "dashed", paint: rgb(150, 220, 200)))
line("I-0-5.north-east", "K-0-0.north-west", ..dash-style)
line("I-2-5.south-east", "K-2-0.south-west", ..dash-style)
let result-style = (stroke: (dash: "dashed", paint: rgb(150, 150, 220)))
line("K-0-2.north-east", "R-0-3.north-west", ..result-style)
line("K-2-2.south-east", "R-0-3.south-west", ..result-style)
// Add small multiplication symbols in highlighted region
for ii in range(3) {
for jj in (3, 4, 5) {
content(
("I-" + str(ii) + "-" + str(jj) + ".south-west"),
text(size: 6pt)[×#calc.rem(ii + jj, 2)],
anchor: "south-west",
padding: 1pt,
)
}
}
})
87 changes: 87 additions & 0 deletions assets/geometric-bayes/geometric-bayes.typ
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
#import "@preview/cetz:0.3.1": canvas, draw

#set page(width: auto, height: auto, margin: 3pt)

#set text(fill: white)

#canvas({
import draw: rect, content, line

// Define dimensions
let width = 8
let height = 5
let left-col-width = 2
let right-col-width = 2
let mid-col-width = width - left-col-width - right-col-width
let gap = 1 // Gap between middle and right column

let left-x = 0
let mid-x = left-col-width
let right-x = width - right-col-width

// Define vertical divisions
let p-e-height = height / 2
let p-h-e-height = height * 3 / 8

let colors = (
orange: rgb("#FFA500"),
teal: rgb("#008080"),
dark-blue: rgb("#1E2F4F"),
dark-gray: rgb("#404040"),
darker-blue: rgb("#363399"),
darkest-gray: rgb("#171717"),
)
// Left column - p(H)
rect((left-x, 0), (mid-x, p-e-height), fill: colors.orange, stroke: white, name: "p-e-given-h")
content("p-e-given-h", $p(E|H)$)
rect((left-x, p-e-height), (mid-x, height), fill: colors.teal, stroke: white, name: "p-not-e-given-h")
content("p-not-e-given-h", $p(not E|H)$)
// Middle column - p(¬H)
rect((mid-x, 0), (right-x - gap, p-e-height / 2), fill: colors.dark-blue, stroke: white, name: "p-e-given-not-h")
content("p-e-given-not-h", $p(E|not H)$)
rect(
(mid-x, p-e-height / 2),
(right-x - gap, height),
fill: colors.dark-gray,
stroke: white,
name: "p-not-e-given-not-h",
)
content("p-not-e-given-not-h", $p(not E|not H)$)
// Right column - posterior probabilities
rect((right-x, 0), (width, p-h-e-height), fill: colors.darker-blue, stroke: white, name: "p-h-given-e")
content("p-h-given-e", $p(H|E)$)
rect((right-x, p-h-e-height), (width, height), fill: colors.darkest-gray, stroke: white, name: "p-not-h-given-e")
content("p-not-h-given-e", $p(not H|E)$)
// Left brace for p(H)
content(
"p-not-e-given-h.north",
text(fill: black)[
#math.overbrace(
box(width: 5em),
$p(H)$,
)
],
name: "brace-ph",
padding: (5pt, 0, 15pt),
)
// Right brace for p(¬H)
content(
"p-not-e-given-not-h.north",
text(fill: black)[
#math.overbrace(
box(width: 7.5em),
$p(not H)$,
)
],
name: "brace-not-ph",
padding: (5pt, 0, 15pt),
)
})
62 changes: 62 additions & 0 deletions assets/heatmap/heatmap.typ
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
#import "@preview/cetz:0.3.1": canvas, draw

#set page(width: auto, height: auto, margin: 3pt)

#canvas({
import draw: rect, content

let cell-size = .7 // Size of each heatmap cell
let data = (
(74, 25, 39, 20, 3, 3, 3, 3, 3),
(25, 53, 31, 17, 7, 7, 2, 3, 2),
(39, 31, 37, 24, 3, 3, 3, 3, 3),
(20, 17, 24, 37, 2, 2, 6, 5, 5),
(3, 7, 3, 2, 12, 1, 0, 0, 0),
(3, 7, 3, 2, 1, 36, 0, 0, 0),
(3, 2, 3, 6, 0, 0, 45, 1, 1),
(3, 3, 3, 5, 0, 0, 1, 23, 1),
(3, 2, 3, 5, 0, 0, 1, 1, 78),
)
let row-labels = ("a", "b", "c", "d", "e", "f", "g", "h", "i")

// Draw column labels (1-9)
for col in range(9) {
content(
((col + 1) * cell-size, 0),
str(col + 1),
name: "col-label-" + str(col + 1),
)
}

// Draw row labels (a-i)
for row in range(9) {
content(
(0, -(row + 1) * cell-size),
row-labels.at(row),
name: "row-label-" + row-labels.at(row),
)
}

// Draw heatmap cells
for row in range(9) {
for col in range(9) {
let value = data.at(row).at(col)
rect(
((col + 1) * cell-size - cell-size / 2, -(row + 1) * cell-size - cell-size / 2),
((col + 1) * cell-size + cell-size / 2, -(row + 1) * cell-size + cell-size / 2),
fill: rgb(
// Purple (90%, 70%, 90%) to Yellow (90%, 90%, 70%)
90%, // Red stays constant at 90% for pastel effect
50% + value / 78 * 20%, // Green increases with value
50% - value / 78 * 20%, // Blue decreases with value
),
name: "cell-" + str(row) + "-" + str(col),
)
content(
((col + 1) * cell-size, -(row + 1) * cell-size),
text(fill: if value < 40 { white } else { black }, str(value)),
name: "value-" + str(row) + "-" + str(col),
)
}
}
})
4 changes: 2 additions & 2 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,13 @@ Have a TikZ/Cetz diagram you'd like to share? [Submit a PR](https://github.com/j
| ![`feynman-diagram-one-point.png`](assets/feynman-diagram-one-point/feynman-diagram-one-point.png) | ![`feynman-diagram-propagator-loop.png`](assets/feynman-diagram-propagator-loop/feynman-diagram-propagator-loop.png) |
| [`fluctuations`](https://janosh.github.io/diagrams/fluctuations) &nbsp;[![LaTeX][latex-logo]](assets/fluctuations/fluctuations.tex) | [`four-vs-of-data`](https://janosh.github.io/diagrams/four-vs-of-data) &nbsp;[![LaTeX][latex-logo]](assets/four-vs-of-data/four-vs-of-data.tex)&nbsp;[![Typst][typst-logo]](assets/four-vs-of-data/four-vs-of-data.typ) |
| ![`fluctuations.png`](assets/fluctuations/fluctuations.png) | ![`four-vs-of-data.png`](assets/four-vs-of-data/four-vs-of-data.png) |
| [`generative-adversarial-network`](https://janosh.github.io/diagrams/generative-adversarial-network) &nbsp;[![LaTeX][latex-logo]](assets/generative-adversarial-network/generative-adversarial-network.tex) | [`geometric-bayes`](https://janosh.github.io/diagrams/geometric-bayes) &nbsp;[![LaTeX][latex-logo]](assets/geometric-bayes/geometric-bayes.tex) |
| [`generative-adversarial-network`](https://janosh.github.io/diagrams/generative-adversarial-network) &nbsp;[![LaTeX][latex-logo]](assets/generative-adversarial-network/generative-adversarial-network.tex) | [`geometric-bayes`](https://janosh.github.io/diagrams/geometric-bayes) &nbsp;[![LaTeX][latex-logo]](assets/geometric-bayes/geometric-bayes.tex)&nbsp;[![Typst][typst-logo]](assets/geometric-bayes/geometric-bayes.typ) |
| ![`generative-adversarial-network.png`](assets/generative-adversarial-network/generative-adversarial-network.png) | ![`geometric-bayes.png`](assets/geometric-bayes/geometric-bayes.png) |
| [`graph-isomorphism`](https://janosh.github.io/diagrams/graph-isomorphism) &nbsp;[![LaTeX][latex-logo]](assets/graph-isomorphism/graph-isomorphism.tex)&nbsp;[![Typst][typst-logo]](assets/graph-isomorphism/graph-isomorphism.typ) | [`gravitons`](https://janosh.github.io/diagrams/gravitons) &nbsp;[![LaTeX][latex-logo]](assets/gravitons/gravitons.tex) |
| ![`graph-isomorphism.png`](assets/graph-isomorphism/graph-isomorphism.png) | ![`gravitons.png`](assets/gravitons/gravitons.png) |
| [`harm-osc-energy-freq`](https://janosh.github.io/diagrams/harm-osc-energy-freq) &nbsp;[![LaTeX][latex-logo]](assets/harm-osc-energy-freq/harm-osc-energy-freq.tex) | [`harm-osc-energy-inv-temp`](https://janosh.github.io/diagrams/harm-osc-energy-inv-temp) &nbsp;[![LaTeX][latex-logo]](assets/harm-osc-energy-inv-temp/harm-osc-energy-inv-temp.tex) |
| ![`harm-osc-energy-freq.png`](assets/harm-osc-energy-freq/harm-osc-energy-freq.png) | ![`harm-osc-energy-inv-temp.png`](assets/harm-osc-energy-inv-temp/harm-osc-energy-inv-temp.png) |
| [`heatmap`](https://janosh.github.io/diagrams/heatmap) &nbsp;[![LaTeX][latex-logo]](assets/heatmap/heatmap.tex) | [`higgs-potential`](https://janosh.github.io/diagrams/higgs-potential) &nbsp;[![LaTeX][latex-logo]](assets/higgs-potential/higgs-potential.tex) |
| [`heatmap`](https://janosh.github.io/diagrams/heatmap) &nbsp;[![LaTeX][latex-logo]](assets/heatmap/heatmap.tex)&nbsp;[![Typst][typst-logo]](assets/heatmap/heatmap.typ) | [`higgs-potential`](https://janosh.github.io/diagrams/higgs-potential) &nbsp;[![LaTeX][latex-logo]](assets/higgs-potential/higgs-potential.tex) |
| ![`heatmap.png`](assets/heatmap/heatmap.png) | ![`higgs-potential.png`](assets/higgs-potential/higgs-potential.png) |
| [`high-entropy-alloy`](https://janosh.github.io/diagrams/high-entropy-alloy) &nbsp;[![LaTeX][latex-logo]](assets/high-entropy-alloy/high-entropy-alloy.tex) | [`isotherms`](https://janosh.github.io/diagrams/isotherms) &nbsp;[![LaTeX][latex-logo]](assets/isotherms/isotherms.tex)&nbsp;[![Typst][typst-logo]](assets/isotherms/isotherms.typ) |
| ![`high-entropy-alloy.png`](assets/high-entropy-alloy/high-entropy-alloy.png) | ![`isotherms.png`](assets/isotherms/isotherms.png) |
Expand Down
2 changes: 1 addition & 1 deletion site/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
<a href="{repository}/blob/main/license">MIT licensed</a> (free to reuse)&ensp;
<a href={repository}><Icon icon="octicon:mark-github" inline />&nbsp;Repo</a>
</p>
<p>
<p style="margin: auto; max-width: 40em;">
Have a TikZ image you'd like to share with attribution?
<a href="{repository}/pulls">Submit a PR</a> with a <code>.tex</code> or
<code>.typ</code>
Expand Down

0 comments on commit 5f7f4b9

Please sign in to comment.