add four-vs-of-data.typ and dropout.typ converted from Tikz versions

add new pie-physics-chemistry-ml.typ and its PDF/PNG/SVG assets

- add '*.pyc' to .gitignore
- update readme.md to reflect new diagram count (115 to 116) and add pie chart to table
- fix relative import of pdf_to_svg_png_compressed from renamed convert_assets.py module

.gitignore

@@ -1 +1,2 @@
 __latexindent_temp.tex
+*.pyc

assets/dropout/dropout.typ

@@ -1,110 +1,111 @@
 #import "@preview/cetz:0.3.1": canvas, draw
 
-#set page(width: auto, height: auto, margin: 5pt)
-
-#let layer-sep = 2.5
-#let node-sep = 1.5
-#let node-radius = 0.3
-#let cross-size = node-radius * 1.2
-
-// Helper function to draw a neural network layer
-#let draw-layer(x-pos, n-nodes, disabled: (), center: false) = {
-  let y-coords = ()
-
-  for idx in range(n-nodes) {
-    // Center vertically if requested (for output layer)
-    let y-offset = if center { (5 - n-nodes) * node-sep / 2 } else { 0 }
-    let y-pos = idx * node-sep + y-offset
-
-    // Draw node as filled circle with black outline
-    draw.circle(
-      (x-pos, y-pos),
-      radius: node-radius,
-      stroke: black + 1pt,
-      fill: white,
-    )
-
-    // Add X if node is disabled
-    if idx + 1 in disabled {
-      // Draw red X with thicker lines
-      draw.line(
-        (x-pos - cross-size, y-pos - cross-size),
-        (x-pos + cross-size, y-pos + cross-size),
-        stroke: red + 2pt,
-      )
-      draw.line(
-        (x-pos - cross-size, y-pos + cross-size),
-        (x-pos + cross-size, y-pos - cross-size),
-        stroke: red + 2pt,
+#set page(width: auto, height: auto, margin: 8pt)
+
+#canvas({
+  import draw: line, circle, content
+
+  let node-style = (stroke: black + 1pt, fill: white)
+
+  let layer-sep = 2.5 // Horizontal separation between layers
+  let node-sep = 1.5 // Vertical separation between nodes
+  let arrow-style = (stroke: black + 1pt, mark: (end: "stealth"), fill: black)
+
+  // Helper function to draw a layer of nodes
+  let draw-layer(x, nodes, prefix: "") = {
+    for ii in range(nodes) {
+      circle(
+        (x, node-sep * (ii + 1)),
+        radius: 0.3,
+        name: prefix + str(ii + 1),
+        ..node-style,
       )
-    } else {
-      y-coords.push(y-pos)
     }
   }
-  return y-coords
-}
-
-// Helper to draw connections between layers
-#let connect-layers(x1, y1s, x2, y2s) = {
-  for y1 in y1s {
-    for y2 in y2s {
-      draw.line(
-        (float(x1), float(y1)),
-        (float(x2), float(y2)),
-        mark: (end: "stealth", fill: black),
-        stroke: black + 1pt,
-      )
+
+  // Helper to connect all nodes between layers
+  let connect-layers(from-prefix, to-prefix, from-nodes, to-nodes) = {
+    for ii in range(from-nodes) {
+      for jj in range(to-nodes) {
+        line(
+          (from-prefix + str(ii + 1)),
+          (to-prefix + str(jj + 1)),
+          ..arrow-style,
+        )
+      }
     }
   }
-}
 
-#canvas({
-  // Left network (before dropout)
-  let x = 0.0
-  let y1s = draw-layer(x, 5)
-
-  x += layer-sep
-  let y2s = draw-layer(x, 5)
-
-  x += layer-sep
-  let y3s = draw-layer(x, 5)
-
-  x += layer-sep
-  let y4s = draw-layer(x, 2, disabled: (), center: true) // vertically center output layer
-
-  // Connect all nodes in adjacent layers
-  connect-layers(0.0, y1s, layer-sep, y2s)
-  connect-layers(layer-sep, y2s, 2 * layer-sep, y3s)
-  connect-layers(2 * layer-sep, y3s, 3 * layer-sep, y4s)
-
-  // Dropout arrow
-  let arrow-x = 3.5 * layer-sep
-  draw.line(
-    (arrow-x, 2 * node-sep),
-    (arrow-x + 2, 2 * node-sep),
-    mark: (end: "stealth", fill: black),
-    stroke: black + 1pt,
-  )
-  draw.content(
-    (arrow-x + 1, 2 * node-sep + 0.3),
-    text(weight: "bold", size: 1.2em, "dropout"),
-  )
+  // Left network (fully connected)
+  // Draw all layers
+  draw-layer(0, 5, prefix: "i") // Input layer
+  draw-layer(layer-sep, 5, prefix: "h1") // First hidden layer
+  draw-layer(2 * layer-sep, 5, prefix: "h2") // Second hidden layer
+
+  // Draw output nodes
+  circle((3 * layer-sep, 2 * node-sep), radius: 0.3, name: "o1", ..node-style)
+  circle((3 * layer-sep, 4 * node-sep), radius: 0.3, name: "o2", ..node-style)
 
-  // Right network (after dropout)
-  x = arrow-x + 3
-  let dy1s = draw-layer(x, 5, disabled: (1, 3))
+  // Connect all layers
+  connect-layers("i", "h1", 5, 5)
+  connect-layers("h1", "h2", 5, 5)
 
-  x += layer-sep
-  let dy2s = draw-layer(x, 5, disabled: (1, 3, 4))
+  // Connect to output nodes
+  for ii in range(5) {
+    line(("h2" + str(ii + 1)), "o1", ..arrow-style)
+    line(("h2" + str(ii + 1)), "o2", ..arrow-style)
+  }
 
-  x += layer-sep
-  let dy3s = draw-layer(x, 5, disabled: (2, 4))
+  // Draw dropout arrow
+  let mid-x = 4 * layer-sep
+  line(
+    (3.5 * layer-sep, 3 * node-sep),
+    (4.5 * layer-sep, 3 * node-sep),
+    ..arrow-style,
+    name: "dropout-arrow",
+  )
+  content(
+    "dropout-arrow.mid",
+    text(weight: "bold", size: 1.2em)[dropout],
+    anchor: "south",
+    padding: 3pt,
+  )
 
-  x += layer-sep
-  let dy4s = draw-layer(x, 2, center: true) // vertically center output layer
+  // Right network (with dropout)
+  // Draw all layers
+  draw-layer(mid-x + layer-sep, 5, prefix: "di")
+  draw-layer(mid-x + 2 * layer-sep, 5, prefix: "dh1")
+  draw-layer(mid-x + 3 * layer-sep, 5, prefix: "dh2")
+
+  // Draw output nodes
+  circle((mid-x + 4 * layer-sep, 2 * node-sep), radius: 0.3, name: "do1", ..node-style)
+  circle((mid-x + 4 * layer-sep, 4 * node-sep), radius: 0.3, name: "do2", ..node-style)
+
+  // Add dropout X marks
+  let x-style = (fill: red, weight: "bold", size: 4em, baseline: -4pt)
+  content("di1", text(..x-style)[×])
+  content("di3", text(..x-style)[×])
+  content("dh11", text(..x-style)[×])
+  content("dh13", text(..x-style)[×])
+  content("dh14", text(..x-style)[×])
+  content("dh22", text(..x-style)[×])
+  content("dh24", text(..x-style)[×])
+
+  // Connect remaining nodes (after dropout)
+  for ii in (2, 4, 5) {
+    for jj in (2, 5) {
+      line(("di" + str(ii)), ("dh1" + str(jj)), ..arrow-style)
+    }
+  }
 
-  // Connect only enabled nodes
-  connect-layers(x - 3 * layer-sep, dy1s, x - 2 * layer-sep, dy2s)
-  connect-layers(x - 2 * layer-sep, dy2s, x - layer-sep, dy3s)
-  connect-layers(x - layer-sep, dy3s, x, dy4s)
+  for ii in (2, 5) {
+    for jj in (1, 3, 5) {
+      line(("dh1" + str(ii)), ("dh2" + str(jj)), ..arrow-style)
+    }
+  }
+
+  for ii in (1, 3, 5) {
+    line(("dh2" + str(ii)), "do1", ..arrow-style)
+    line(("dh2" + str(ii)), "do2", ..arrow-style)
+  }
 })

assets/four-vs-of-data/four-vs-of-data.typ

@@ -0,0 +1,99 @@
+#import "@preview/cetz:0.3.1": canvas, draw
+#import "@preview/cetz-plot:0.1.0": chart
+
+#set page(width: auto, height: auto, margin: 8pt)
+
+#canvas({
+  import draw: *
+
+  let radius = 3
+  let arrow-radius = radius * 1.15 // Slightly larger for arrows
+
+  // Data structure for 8 slices (4 main + 4 darker sub-slices)
+  let data = (
+    // Veracity (orange, top right)
+    ("veracity-main", 75, "Veracity", rgb("#FFA500").lighten(80%)),
+    ("veracity-sub", 15, "", rgb("#FFA500").lighten(60%)),
+    // Volume (blue, top left)
+    ("volume-main", 75, "Volume", rgb("#0000FF").lighten(80%)),
+    ("volume-sub", 15, "", rgb("#0000FF").lighten(60%)),
+    // Velocity (green, bottom left)
+    ("velocity-main", 75, "Velocity", rgb("#00FF00").lighten(80%)),
+    ("velocity-sub", 15, "", rgb("#00FF00").lighten(60%)),
+    // Variety (yellow, bottom right)
+    ("variety-main", 75, "Variety", rgb("#FFFF00").lighten(80%)),
+    ("variety-sub", 15, "", rgb("#FFFF00").lighten(60%)),
+  )
+
+  // Draw main pie chart
+  chart.piechart(
+    data,
+    value-key: 1,
+    label-key: 2,
+    radius: radius,
+    slice-style: data.map(itm => itm.at(3)),
+    stroke: black + .8pt,
+    inner-label: (
+      content: (value, label) => text(weight: "regular")[#label],
+      radius: 120%,
+    ),
+    outer-label: (
+      content: (),
+    ),
+    legend: (label: ()),
+  )
+
+  let arrow-style = (
+    stroke: black + .8pt,
+    mark: (end: "stealth", fill: black, offset: 5pt, scale: .75),
+  )
+
+  // Draw curved arrows using arc
+  // Veracity arrow (top right, 0-90°)
+  arc(
+    (arrow-radius, 0),
+    start: 0deg,
+    stop: 90deg,
+    radius: arrow-radius,
+    ..arrow-style,
+    name: "veracity",
+  )
+  content("veracity.5%", text(size: .8em)[high variance], anchor: "south-west", padding: 3pt)
+  content("veracity.95%", text(size: .8em)[reference data], anchor: "south-west", padding: 3pt)
+
+  // Volume arrow (top left, 90-180°)
+  arc(
+    (0, arrow-radius),
+    start: 90deg,
+    stop: 180deg,
+    radius: arrow-radius,
+    ..arrow-style,
+    name: "volume",
+  )
+  content("volume.5%", text(size: .8em)[kilobytes], anchor: "south-east")
+  content("volume.95%", text(size: .8em)[terabytes], anchor: "south-east", padding: 3pt)
+
+  // Velocity arrow (bottom left, 180-270°)
+  arc(
+    (-arrow-radius, 0),
+    start: 180deg,
+    stop: 270deg,
+    radius: arrow-radius,
+    ..arrow-style,
+    name: "velocity",
+  )
+  content("velocity.5%", text(size: .8em)[static], anchor: "east", padding: 3pt)
+  content("velocity.95%", text(size: .8em)[dynamic], anchor: "north-east", padding: 3pt)
+
+  // Variety arrow (bottom right, 270-360°)
+  arc(
+    (0, -arrow-radius),
+    start: 270deg,
+    stop: 360deg,
+    radius: arrow-radius,
+    ..arrow-style,
+    name: "variety",
+  )
+  content("variety.start", text(size: .8em)[clustered], anchor: "north-west", padding: 3pt)
+  content("variety.95%", text(size: .8em)[heterogeneous], anchor: "north-west", padding: 3pt)
+})

assets/pie-physics-chemistry-ml/pie-physics-chemistry-ml.typ

@@ -0,0 +1,26 @@
+#import "@preview/cetz:0.3.1": canvas
+#import "@preview/cetz-plot:0.1.0": chart
+
+#set page(width: auto, height: auto, margin: 0pt)
+
+#canvas({
+  // Data for pie chart (equal thirds)
+  let data = (
+    ("physics", 1, "Ψ", rgb("#4a90e2")),
+    ("chemistry", 1, "ΔG", rgb("#50c878")),
+    ("ml", 1, "∑", rgb("#ff7f50")),
+  )
+
+  // Draw pie chart
+  chart.piechart(
+    data,
+    value-key: 1,
+    label-key: 2,
+    radius: 3,
+    slice-style: data.map(itm => itm.at(-1)),
+    stroke: white + .2pt,
+    inner-label: (content: (value, label) => [#text(label, size: 4em)], radius: 120%),
+    outer-label: (content: ()), // hide outer labels
+    legend: (label: ()), // hide legend
+  )
+})