|
| 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.0" /> |
| 6 | + <title>tsb — Index & RangeIndex Playground</title> |
| 7 | + <style> |
| 8 | + :root { |
| 9 | + --bg: #0d1117; |
| 10 | + --surface: #161b22; |
| 11 | + --border: #30363d; |
| 12 | + --text: #e6edf3; |
| 13 | + --accent: #58a6ff; |
| 14 | + --green: #3fb950; |
| 15 | + --orange: #d29922; |
| 16 | + --font-mono: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace; |
| 17 | + } |
| 18 | + * { box-sizing: border-box; margin: 0; padding: 0; } |
| 19 | + body { |
| 20 | + background: var(--bg); |
| 21 | + color: var(--text); |
| 22 | + font-family: system-ui, -apple-system, sans-serif; |
| 23 | + line-height: 1.6; |
| 24 | + padding: 2rem; |
| 25 | + max-width: 900px; |
| 26 | + margin: 0 auto; |
| 27 | + } |
| 28 | + a { color: var(--accent); } |
| 29 | + h1 { color: var(--accent); margin-bottom: 0.5rem; } |
| 30 | + h2 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.25rem; } |
| 31 | + p { color: #8b949e; margin-bottom: 1rem; } |
| 32 | + pre { |
| 33 | + background: var(--surface); |
| 34 | + border: 1px solid var(--border); |
| 35 | + border-radius: 0.5rem; |
| 36 | + padding: 1rem; |
| 37 | + font-family: var(--font-mono); |
| 38 | + font-size: 0.875rem; |
| 39 | + overflow-x: auto; |
| 40 | + margin-bottom: 1rem; |
| 41 | + } |
| 42 | + code { |
| 43 | + font-family: var(--font-mono); |
| 44 | + font-size: 0.875em; |
| 45 | + } |
| 46 | + .output { |
| 47 | + background: #1c2333; |
| 48 | + border: 1px solid var(--green); |
| 49 | + border-radius: 0.5rem; |
| 50 | + padding: 1rem; |
| 51 | + font-family: var(--font-mono); |
| 52 | + font-size: 0.875rem; |
| 53 | + color: var(--green); |
| 54 | + margin-bottom: 1.5rem; |
| 55 | + white-space: pre-wrap; |
| 56 | + } |
| 57 | + .back { margin-bottom: 2rem; display: inline-block; } |
| 58 | + .section { |
| 59 | + background: var(--surface); |
| 60 | + border: 1px solid var(--border); |
| 61 | + border-radius: 0.75rem; |
| 62 | + padding: 1.5rem; |
| 63 | + margin-bottom: 1.5rem; |
| 64 | + } |
| 65 | + </style> |
| 66 | +</head> |
| 67 | +<body> |
| 68 | + <a class="back" href="index.html">← Back to roadmap</a> |
| 69 | + <h1>🏷️ Index & RangeIndex</h1> |
| 70 | + <p> |
| 71 | + The <code>Index</code> type is the immutable, ordered sequence of labels |
| 72 | + that underpins both <code>Series</code> (row axis) and <code>DataFrame</code> |
| 73 | + (row + column axes). <code>RangeIndex</code> is a memory-efficient subclass |
| 74 | + for integer ranges. |
| 75 | + </p> |
| 76 | + |
| 77 | + <div class="section"> |
| 78 | + <h2>Creating an Index</h2> |
| 79 | + <pre> |
| 80 | +import { Index, RangeIndex } from "tsb"; |
| 81 | + |
| 82 | +// String labels |
| 83 | +const labels = new Index(["a", "b", "c", "d"], "letters"); |
| 84 | +// → Index([a, b, c, d], name='letters') |
| 85 | + |
| 86 | +// Numeric labels |
| 87 | +const nums = new Index([10, 20, 30]); |
| 88 | +// → Index([10, 20, 30]) |
| 89 | + |
| 90 | +// RangeIndex (memory-efficient integer range) |
| 91 | +const range = new RangeIndex(5); |
| 92 | +// → RangeIndex(start=0, stop=5, step=1) → [0, 1, 2, 3, 4] |
| 93 | + |
| 94 | +const stepped = new RangeIndex(0, 10, 2); |
| 95 | +// → RangeIndex(start=0, stop=10, step=2) → [0, 2, 4, 6, 8] |
| 96 | + </pre> |
| 97 | + </div> |
| 98 | + |
| 99 | + <div class="section"> |
| 100 | + <h2>Properties</h2> |
| 101 | + <pre> |
| 102 | +const idx = new Index(["x", "y", "z"], "axis"); |
| 103 | + |
| 104 | +idx.size // 3 |
| 105 | +idx.shape // [3] |
| 106 | +idx.ndim // 1 |
| 107 | +idx.empty // false |
| 108 | +idx.name // "axis" |
| 109 | +idx.isUnique // true |
| 110 | +idx.hasDuplicates // false |
| 111 | +idx.isMonotonicIncreasing // true (x < y < z) |
| 112 | + </pre> |
| 113 | + </div> |
| 114 | + |
| 115 | + <div class="section"> |
| 116 | + <h2>Label Look-up</h2> |
| 117 | + <pre> |
| 118 | +const idx = new Index(["a", "b", "c", "a"]); |
| 119 | + |
| 120 | +idx.getLoc("b") // 1 (unique → single int) |
| 121 | +idx.getLoc("a") // [0, 3] (duplicated → array) |
| 122 | +idx.contains("c") // true |
| 123 | +idx.isin(["a", "c"]) // [true, false, true, true] |
| 124 | + </pre> |
| 125 | + </div> |
| 126 | + |
| 127 | + <div class="section"> |
| 128 | + <h2>Set Operations</h2> |
| 129 | + <pre> |
| 130 | +const a = new Index([1, 2, 3]); |
| 131 | +const b = new Index([2, 3, 4]); |
| 132 | + |
| 133 | +a.union(b) // Index([1, 2, 3, 4]) |
| 134 | +a.intersection(b) // Index([2, 3]) |
| 135 | +a.difference(b) // Index([1]) |
| 136 | +a.symmetricDifference(b) // Index([1, 4]) |
| 137 | + </pre> |
| 138 | + </div> |
| 139 | + |
| 140 | + <div class="section"> |
| 141 | + <h2>Sorting & Aggregation</h2> |
| 142 | + <pre> |
| 143 | +const idx = new Index([30, 10, 20]); |
| 144 | + |
| 145 | +idx.sortValues() // Index([10, 20, 30]) |
| 146 | +idx.argsort() // [1, 2, 0] |
| 147 | +idx.min() // 10 |
| 148 | +idx.max() // 30 |
| 149 | +idx.argmin() // 1 |
| 150 | +idx.argmax() // 0 |
| 151 | + </pre> |
| 152 | + </div> |
| 153 | + |
| 154 | + <div class="section"> |
| 155 | + <h2>Manipulation (immutable — always returns new Index)</h2> |
| 156 | + <pre> |
| 157 | +const idx = new Index(["a", "b", "c"]); |
| 158 | + |
| 159 | +idx.append(new Index(["d", "e"])) // Index([a, b, c, d, e]) |
| 160 | +idx.insert(1, "x") // Index([a, x, b, c]) |
| 161 | +idx.delete(0) // Index([b, c]) |
| 162 | +idx.drop(["b"]) // Index([a, c]) |
| 163 | +idx.rename("new_name") // Index([a, b, c], name='new_name') |
| 164 | + </pre> |
| 165 | + </div> |
| 166 | + |
| 167 | + <div class="section"> |
| 168 | + <h2>Missing Values</h2> |
| 169 | + <pre> |
| 170 | +const idx = new Index([1, null, 3]); |
| 171 | + |
| 172 | +idx.isna() // [false, true, false] |
| 173 | +idx.notna() // [true, false, true] |
| 174 | +idx.dropna() // Index([1, 3]) |
| 175 | +idx.fillna(0) // Index([1, 0, 3]) |
| 176 | + </pre> |
| 177 | + </div> |
| 178 | + |
| 179 | + <div class="section"> |
| 180 | + <h2>RangeIndex — Memory Efficient</h2> |
| 181 | + <pre> |
| 182 | +// Only stores start/stop/step — values computed on the fly |
| 183 | +const r = new RangeIndex(0, 1_000_000); |
| 184 | +r.size // 1000000 |
| 185 | +r.at(500) // 500 |
| 186 | + |
| 187 | +// Negative step |
| 188 | +const desc = new RangeIndex(10, 0, -2); |
| 189 | +desc.toArray() // [10, 8, 6, 4, 2] |
| 190 | + |
| 191 | +// Slicing preserves RangeIndex type |
| 192 | +r.slice(10, 20) // RangeIndex(start=10, stop=20, step=1) |
| 193 | + </pre> |
| 194 | + </div> |
| 195 | + |
| 196 | + <footer style="text-align: center; padding: 2rem 0; color: #8b949e; font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 2rem;"> |
| 197 | + <p> |
| 198 | + <a href="index.html">tsb playground</a> · |
| 199 | + Built by <a href="https://github.com/githubnext/autoloop">Autoloop</a> |
| 200 | + </p> |
| 201 | + </footer> |
| 202 | +</body> |
| 203 | +</html> |
0 commit comments