roc_curve.typ + sierpinski-triangle.typ and their assets

- increment title from "117 Scientific Diagrams" to "118 Scientific Diagrams" in readme
- update badge links for Typst from "96" to "98"
- convert complex-sign-function.tex to Typst Cetz

Author: janosh

assets/complex-sign-function/complex-sign-function.typ

@@ -0,0 +1,81 @@
+#import "@preview/cetz:0.3.4": canvas, draw, vector, matrix
+#import draw: set-transform, scale, content, line, rect, group
+
+#set page(width: auto, height: auto, margin: 8pt)
+#set text(size: 8pt)
+
+#canvas({
+  draw.set-style(line: (stroke: none))
+  // Set up the transformation matrix for 3D perspective
+  set-transform(matrix.transform-rotate-dir((1, 1, -2), (0, 2, .3)))
+  scale(x: 1.5, z: -1)
+
+  let arrow-style = (mark: (end: "stealth", fill: black, scale: 0.5))
+
+  // Add vertical z-lines at corners and origin
+  for (x, y) in ((-1, -1), (1, -1), (-1, 1), (1, 1)) {
+    draw.line((x, y, -1.2), (x, y, 1.2), stroke: gray + .3pt)
+  }
+  draw.line((0, 0, -1.2), (0, 0, 1.2), stroke: gray + .3pt, ..arrow-style)
+
+
+  // Draw the zero plane (gray, semi-transparent)
+  group({
+    draw.rect((-1, -1, 0), (1, 1, 0), fill: rgb(128, 128, 128, 20), stroke: none)
+  })
+
+  // Draw the blue quadrants (s = -1)
+  group({
+    draw.on-layer(
+      -1,
+      {
+        draw.line(
+          (-1, 0, -1),
+          (0, 0, -1),
+          (0, 1, -1),
+          (-1, 1, -1),
+          fill: rgb(173, 216, 230),
+        )
+        draw.line(
+          (0, -1, -1),
+          (1, -1, -1),
+          (1, 0, -1),
+          (0, 0, -1),
+          fill: rgb(173, 216, 230),
+        )
+      },
+    )
+  })
+
+  // Draw the orange quadrants (s = 1)
+  group({
+    draw.line(
+      (0, 0, 1),
+      (1, 0, 1),
+      (1, 1, 1),
+      (0, 1, 1),
+      fill: rgb(255, 165, 0),
+    )
+    draw.line(
+      (-1, -1, 1),
+      (0, -1, 1),
+      (0, 0, 1),
+      (-1, 0, 1),
+      fill: rgb(255, 165, 0),
+    )
+  })
+
+  // Draw grid lines
+  for x in range(-1, 2) {
+    let style = if x == 0 { arrow-style } else { () }
+    draw.line((x, -1, 0), (x, 1, 0), stroke: gray + .3pt, ..style)
+  }
+  for y in range(-1, 2) {
+    let style = if y == 0 { arrow-style } else { () }
+    draw.line((-1, y, 0), (1, y, 0), stroke: gray + .3pt, ..style)
+  }
+
+  content((1.45, .1, 0), [$"Re"(p_0)$])
+  content((0, 1.6, 0), [$"Im"(p_0)$])
+  content((0, 0, 1.5), [$s(p_0)$])
+})

assets/heatmap/heatmap.typ

@@ -5,7 +5,7 @@
 
 #canvas({
   let cell-size = .7 // Size of each heatmap cell
-  let data = (
+  let cell-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),
@@ -16,7 +16,7 @@
     (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")
+  let row-labels = "abcdefghi".split("").slice(1)
 
   // Draw column labels (1-9)
   for col in range(9) {
@@ -39,7 +39,7 @@
   // Draw heatmap cells
   for row in range(9) {
     for col in range(9) {
-      let value = data.at(row).at(col)
+      let value = cell-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),

assets/roc-curve/roc-curve-hd.png

@@ -0,0 +1,114 @@
+#import "@preview/cetz:0.3.4": canvas, draw
+#import "@preview/cetz-plot:0.1.1": plot
+
+#set page(width: auto, height: auto, margin: 8pt)
+
+// ROC curve functions for different classifiers
+#let perfect_classifier(x) = {
+  if x == 0 { return 0 }
+  if x == 1 { return 1 }
+  if x > 0 { return 0.99 }
+  return 0
+}
+
+#let excellent_classifier(x) = {
+  if x <= 0 { return 0 }
+  if x >= 1 { return 1 }
+  return calc.pow(x, 0.15)
+}
+
+#let good_classifier(x) = {
+  if x <= 0 { return 0 }
+  if x >= 1 { return 1 }
+  return calc.pow(x, 0.3)
+}
+
+#let fair_classifier(x) = {
+  if x <= 0 { return 0 }
+  if x >= 1 { return 1 }
+  return calc.pow(x, 0.6)
+}
+
+#let poor_classifier(x) = {
+  if x <= 0 { return 0 }
+  if x >= 1 { return 1 }
+  return 0.2 * x + 0.8 * x * x
+}
+
+#let random_classifier(x) = x
+
+#canvas({
+  let mark = (end: "stealth", fill: black, scale: 0.7)
+  draw.set-style(
+    axes: (
+      y: (label: (anchor: "south-east", offset: 1.2, angle: 90deg), mark: mark),
+      x: (label: (anchor: "south-east", offset: 1.2), mark: mark),
+    ),
+  )
+
+  plot.plot(
+    size: (8, 8),
+    x-label: "False Positive Rate (1-Specificity)",
+    y-label: "True Positive Rate (Sensitivity)",
+    x-min: 0,
+    x-max: 1,
+    y-min: 0,
+    y-max: 1,
+    x-tick-step: 0.25,
+    y-tick-step: 0.25,
+    x-grid: true,
+    y-grid: true,
+    axis-style: "left",
+    legend: "inner-north",
+    legend-style: (item: (spacing: 0.15), padding: 0.15, stroke: none, offset: (7.8, 0.3)),
+    {
+      plot.add(
+        style: (stroke: gray),
+        domain: (0, 1),
+        samples: 2,
+        random_classifier,
+        label: "Random Guess (AUC = 0.5)",
+      )
+
+      plot.add(
+        style: (stroke: green),
+        domain: (0, 1),
+        samples: 50,
+        perfect_classifier,
+        label: "Near-Perfect Classifier (AUC = 0.99)",
+      )
+
+      plot.add(
+        style: (stroke: blue),
+        domain: (0, 1),
+        samples: 100,
+        excellent_classifier,
+        label: "Excellent Classifier (AUC = 0.93)",
+      )
+
+      plot.add(
+        style: (stroke: purple),
+        domain: (0, 1),
+        samples: 100,
+        good_classifier,
+        label: "Good Classifier (AUC = 0.85)",
+      )
+
+      plot.add(
+        style: (stroke: orange),
+        domain: (0, 1),
+        samples: 100,
+        fair_classifier,
+        label: "Fair Classifier (AUC = 0.73)",
+      )
+
+      plot.add(
+        style: (stroke: red),
+        domain: (0, 1),
+        samples: 100,
+        poor_classifier,
+        label: "Poor Classifier (AUC = 0.65)",
+      )
+    },
+  )
+})

assets/roc-curve/roc-curve.pdf

@@ -0,0 +1,14 @@
+title: ROC Curve
+tags:
+  - statistics
+  - classification
+  - machine learning
+  - performance metrics
+  - data science
+  - model evaluation
+description: |
+  The Receiver Operating Characteristic (ROC) curve is a widely used evaluation tool in statistics that plots the True Positive Rate (Sensitivity) against the False Positive Rate (1-Specificity) at various classification thresholds.
+
+  This visualization compares classifiers of different performance levels, from near-perfect (AUC = 0.99) to poor (AUC = 0.65), with a random classifier (AUC = 0.5) as baseline. The Area Under the Curve (AUC) serves as a threshold-independent measure of classifier performance, with values closer to 1.0 indicating better discrimination ability.
+
+  ROC curves are particularly valuable in domains requiring careful trade-off between sensitivity and specificity, such as medical diagnostics (balancing false negatives vs. false positives), fraud detection (minimizing false alerts while catching true fraud), and information retrieval (evaluating ranking algorithms). They provide insights into model behavior across all possible decision thresholds, allowing practitioners to select operating points that best align with application requirements and costs of different types of errors.

assets/roc-curve/roc-curve.png

@@ -0,0 +1,97 @@
+#import "@preview/fractusist:0.3.0": lsystem, lsystem-use
+
+#set page(width: auto, height: auto, margin: 0pt)
+#set text(fill: white, size: 6pt)
+
+// Sierpiński triangle with Au(100) surface background
+#box({
+  let triangle_size = 128pt
+  let margin = 12pt
+  let canvas_width = triangle_size + 2 * margin
+  let canvas_height = triangle_size * calc.pow(3, 0.5) / 2 + 2 * margin
+
+  rect(
+    width: canvas_width,
+    height: canvas_height,
+    fill: rgb(50, 50, 50),
+    {
+      // Gold atoms in hexagonal close-packed arrangement
+      let horizontal_spacing = 2.5pt
+      let vertical_spacing = 2.2pt
+      let dot_radius = 1pt
+      let rows = int(canvas_height / vertical_spacing)
+      let cols = int(canvas_width / horizontal_spacing)
+
+      for y in range(-3, rows + 3) {
+        let offset = if calc.odd(y) { horizontal_spacing / 2 } else { 0pt }
+
+        for x in range(-3, cols + 3) {
+          place(
+            dx: x * horizontal_spacing + offset,
+            dy: y * vertical_spacing,
+            circle(
+              radius: dot_radius,
+              fill: rgb(200, 50, 50),
+              stroke: none,
+            ),
+          )
+        }
+      }
+
+      // Sierpiński triangle
+      place(
+        dx: margin / 2,
+        dy: margin / 2,
+        {
+          lsystem(
+            ..lsystem-use("Sierpinski Triangle"),
+            order: 5,
+            step-size: 4,
+            start-angle: 1,
+            fill: rgb(255, 230, 100),
+            stroke: 0.5pt + rgb(200, 140, 0),
+          )
+        },
+      )
+
+      // 10nm scale bar
+      let scale_bar_width = horizontal_spacing * 8
+      let (scale_bar_height, scale_bar_margin) = (2pt, 12pt)
+
+      place(
+        dx: canvas_width - scale_bar_width - scale_bar_margin,
+        dy: scale_bar_margin / 5,
+        rect(width: scale_bar_width, height: scale_bar_height, fill: white),
+      )
+
+      place(
+        dx: canvas_width - scale_bar_width - scale_bar_margin + scale_bar_width / 2 - 7pt,
+        dy: scale_bar_margin / 5 + scale_bar_height + 2pt,
+        [10 nm],
+      )
+
+      // Legend
+      let color_square_size = 4pt
+
+      place(
+        block(
+          inset: (x: 3pt, y: 2pt),
+          radius: 2pt,
+          fill: rgb(30, 30, 30),
+          {
+            grid(
+              columns: (color_square_size, auto),
+              column-gutter: 2.5pt,
+              row-gutter: 3pt,
+              rect(width: color_square_size, height: color_square_size, fill: rgb(200, 50, 50), radius: 1pt), [Au(100)],
+              rect(width: color_square_size, height: color_square_size, fill: rgb(255, 230, 100), radius: 1pt),
+              [Fe/C3PC],
+
+              rect(width: color_square_size, height: color_square_size, fill: rgb(200, 140, 0), radius: 1pt), [BPyB],
+            )
+          },
+        ),
+      )
+    },
+  )
+})

assets/roc-curve/roc-curve.svg

@@ -0,0 +1,29 @@
+title: Sierpiński Triangle
+description: |
+  A Sierpiński triangle is a fractal with the overall shape of an equilateral triangle, subdivided recursively into smaller equilateral triangles. The diagram shows a fifth-order Sierpiński triangle, which was experimentally realized out of Fe/C3PC molecules on a reconstructed Au(100)-(hex) in https://doi.org/10.1021/jacs.7b05720.
+
+  The visualization shows a yellow Sierpiński triangle (representing Fe/C3PC molecules) with a gold border (representing BPyB molecules) on a background of red dots arranged in a hexagonal close-packed pattern (representing the Au(100) substrate atoms). Previous molecular Sierpiński triangle fractals were limited to fourth-order due to kinetic growth constraints.
+
+references:
+  - li_construction_2017:
+      title: Construction of Sierpiński Triangles up to the Fifth Order
+      authors: Chao Li, Xue Zhang, Na Li, Yawei Wang, Jiajia Yang, Gaochen Gu, Yajie Zhang, Shimin Hou, Lianmao Peng, Kai Wu, Damian Nieckarz, Paweł Szabelski, Hao Tang, Yongfeng Wang
+      year: 2017
+      publisher: Journal of the American Chemical Society
+      doi: 10.1021/jacs.7b05720
+      page: 13701-13707
+      volume: 139
+      issue: 39
+
+tags:
+  - fractal
+  - self-assembly
+  - surface science
+  - nanotechnology
+  - materials science
+  - molecular assembly
+  - self-similar structure
+  - mathematical pattern
+  - Au(100) surface
+  - ultrahigh vacuum
+  - recursive pattern