Repository navigation
Expand file tree
/
Copy pathgallery.html
More file actions
2712 lines (2529 loc) · 239 KB
/
Copy pathgallery.html
File metadata and controls
2712 lines (2529 loc) · 239 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ja" data-theme="default">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>部品の一覧（見本）</title>
<!-- tools/gallery.mjs が各部品の demo.html と README.md から作る。手で直さない。数値・会社はすべて架空か公の事実 -->
<style>
/* m-fishbone */
.vcap{font-size:27px;color:var(--muted);text-align:center;margin-bottom:6px}
/* m-tree */
.vcap{font-size:27px;color:var(--muted);text-align:center;margin-bottom:6px}
/* m-compare */
.vlabel{font-size:27px;color:var(--muted);margin:0 0 6px}
/* m-cycle */
.vcap{font-size:27px;line-height:1.3;margin:0 0 6px;color:var(--muted)}
/* m-timeline */
.vcap{font-size:27px;line-height:1.3;margin:0 0 6px;color:var(--muted)}
/* m-timer */
/* 1 枚目は Studio の部品の一覧の見本の絵（本文の枠で撮る）にもなる。時計の 0 が枠の左端に付いて切れて見えないよう、少し内側に置く */
.slide:first-of-type .body{padding:0 10px}
/* m-venn */
.vlabel{font-size:27px;color:var(--muted);margin:0 0 6px}
</style>
</head>
<body>
<script>/* m-curves */
(function(){
// 見本の数値：対数正規の予測分布 LN(0, 0.6^2) の平均・中央値・90% 分位点を計算して、縦線の点列にする
document.addEventListener("DOMContentLoaded", function(){
var s = 0.6, pdf = function(x){ return Math.exp(-Math.pow(Math.log(x), 2) / (2 * s * s)) / (x * s * Math.sqrt(2 * Math.PI)); };
var mean = Math.exp(s * s / 2), med = 1, q90 = Math.exp(s * 1.2815516);
var v = function(x){ return [[x, 0], [x, pdf(x)]]; };
document.getElementById("pred-data").textContent = JSON.stringify([
{label: "予測分布 *p*(*y*|*w*)", f: "exp(-pow(log(x),2)/(2*0.36))/(x*0.6*sqrt(2*PI))", xr: [0.02, 4], tone: "fg", labelAt: 3, anchor: "right", dy: -30},
{label: "中央値", pts: v(med), tone: "term", anchor: "left", ly: 0.04},
{label: "平均", pts: v(mean), tone: "emph", anchor: "right", ly: 0.04},
{label: "90% 分位点", pts: v(q90), tone: "accent2", dash: true, anchor: "right", dx: -4}
]);
});
})();
</script>
<script>/* m-seq */
(function(){
// 見本の数値：分散 1 が既知の正規モデルで、平均 θ の事後分布 N(μ_n, σ_n^2) を観測 1 個ずつ更新する（事前 N(0, 1.5^2)。観測 ys は架空の値）
document.addEventListener("DOMContentLoaded", function(){
var ys = [1.8, 0.9, 1.4, 2.1, 1.2, 1.6], m0 = 0, s0 = 1.5, xs = [];
for (var i = 0; i <= 280; i++) xs.push(+(-3 + 7 * i / 280).toFixed(4));
var pdf = function(m, s){ return xs.map(function(x){ return +(Math.exp(-0.5 * Math.pow((x - m) / s, 2)) / (s * Math.sqrt(2 * Math.PI))).toFixed(5); }); };
var steps = [], prec = 1 / (s0 * s0), num = m0 / (s0 * s0);
steps.push({dens: pdf(m0, s0), readout: {"*n*": 0, "*μ*_n": m0, "*σ*_n": s0}});
ys.forEach(function(y, n){
prec += 1; num += y;
var m = num / prec, s = 1 / Math.sqrt(prec);
steps.push({dens: pdf(m, s), readout: {"*n*": n + 1, "*μ*_n": m, "*σ*_n": s}, mark: y});
});
document.getElementById("seq-data").textContent = JSON.stringify({xs: xs, steps: steps, digits: {"*n*": 0}, markLabel: "*y*_n"});
});
})();
</script>
<div id="stage">
<section class="slide">
<h2>部品の一覧（45 個、179 枚）</h2>
<div class="body">
<p>部品ごとに、説明の 1 枚と見本のスライドが続く。→ で段階を進める。</p>
<p>m-fishbone（変わった） m-flow（変わった） m-particles（変わった） m-quad（変わった） m-tree（変わった） m-balance m-bars m-boxplot m-cards m-ci m-code m-codetree m-collect m-compare m-curves m-cycle m-folds m-gendai m-heatmap m-hissan m-hist m-kakijun m-kanbun m-keyboard m-kobun m-kpi m-map-japan m-map-world m-mapping m-market m-menu m-numberline m-orbit m-pie m-predict m-sampling m-scatter m-score m-seq m-sweep m-syntax m-tape m-timeline m-timer m-venn</p>
</div>
</section>
<section class="slide">
<h2>m-fishbone（変わった、v2.8.0）</h2>
<div class="body">
<p>原因と結果の図（特性要因図・フィッシュボーン図）を、大骨 1 本ずつ組み立て、最後に結果（頭）を出す。座標は書かず、配置はパーツが決める</p>
<ul>
<li>伝えたいこと：原因と結果</li>
<li>見せ方：fade・draw・grow</li>
<li>系列：標準パーツ 見本のスライド：3 枚</li>
</ul>
</div>
</section>
<section id="g-fishbone-1" class="slide">
<h2>配送の遅れの原因（架空）</h2>
<div class="body">
<m-fishbone aria-label="配送の遅れの特性要因図" style="height:440px">
<script type="application/json">{
"effect": {"label": "配送の遅れ", "note": "1 日 12 件"},
"nodes": [
{"id": "p", "label": "人"},
{"id": "p1", "label": "人手が足りない", "parent": "p"},
{"id": "p11", "label": "繁忙期の採用が遅い", "parent": "p1"},
{"id": "p2", "label": "道に慣れていない", "parent": "p"},
{"id": "m", "label": "機械"},
{"id": "m1", "label": "車の故障が多い", "parent": "m"},
{"id": "m2", "label": "端末の反応が遅い", "parent": "m"},
{"id": "h", "label": "方法"},
{"id": "h1", "label": "積み込みの順が悪い", "parent": "h", "tone": "emph"},
{"id": "h2", "label": "経路を手で決めている", "parent": "h"},
{"id": "z", "label": "材料"},
{"id": "z1", "label": "伝票の記入漏れ", "parent": "z"},
{"id": "z2", "label": "箱の大きさがばらばら", "parent": "z"}
]
}</script>
</m-fishbone>
</div>
<div class="concl"><span>→ 人・機械・方法・材料（4M）に分けて原因を洗い出す</span></div>
</section>
<section id="g-fishbone-2" class="slide">
<h2>植物が育たないのはなぜ（order="effect-first"）</h2>
<div class="body">
<m-fishbone order="effect-first" aria-label="植物が育たない原因" style="height:440px">
<script type="application/json">{
"effect": {"label": "植物が\n育たない"},
"nodes": [
{"id": "l", "label": "光"},
{"id": "l1", "label": "日当たりが悪い", "parent": "l"},
{"id": "l2", "label": "光の当たる時間が短い", "parent": "l"},
{"id": "w", "label": "水"},
{"id": "w1", "label": "水が足りない", "parent": "w"},
{"id": "w2", "label": "水のやりすぎ", "parent": "w"},
{"id": "w21", "label": "根が腐る", "parent": "w2"},
{"id": "s", "label": "土"},
{"id": "s1", "label": "肥料が足りない", "parent": "s"},
{"id": "s2", "label": "水はけが悪い", "parent": "s"},
{"id": "t", "label": "温度"},
{"id": "t1", "label": "気温が低い", "parent": "t", "note": "15 ℃ 未満"},
{"id": "t2", "label": "昼と夜の差が大きい", "parent": "t"}
]
}</script>
</m-fishbone>
</div>
<div class="concl"><span>→ 結果を先に置き、光・水・土・温度の順に原因を足す</span></div>
</section>
<section id="g-fishbone-3" class="slide">
<h2>見せ方の種類（variant）</h2>
<div class="body">
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px">
<div><div class="vcap">箱と字、それから線（fade、既定）</div>
<m-fishbone variant="fade" aria-label="遅刻の原因（fade）" style="height:340px">
<script type="application/json">{"effect": {"label": "遅刻"}, "nodes": [{"id": "a", "label": "自分"}, {"id": "a1", "label": "寝坊", "parent": "a"}, {"id": "a2", "label": "準備が遅い", "parent": "a"}, {"id": "b", "label": "交通"}, {"id": "b1", "label": "電車の遅れ", "parent": "b"}, {"id": "b2", "label": "道の混雑", "parent": "b"}]}</script>
</m-fishbone></div>
<div><div class="vcap">線を引いてから箱と字（draw）</div>
<m-fishbone variant="draw" aria-label="遅刻の原因（draw）" style="height:340px">
<script type="application/json">{"effect": {"label": "遅刻"}, "nodes": [{"id": "a", "label": "自分"}, {"id": "a1", "label": "寝坊", "parent": "a"}, {"id": "a2", "label": "準備が遅い", "parent": "a"}, {"id": "b", "label": "交通"}, {"id": "b1", "label": "電車の遅れ", "parent": "b"}, {"id": "b2", "label": "道の混雑", "parent": "b"}]}</script>
</m-fishbone></div>
<div><div class="vcap">背骨の側から伸びる（grow）</div>
<m-fishbone variant="grow" aria-label="遅刻の原因（grow）" style="height:340px">
<script type="application/json">{"effect": {"label": "遅刻"}, "nodes": [{"id": "a", "label": "自分"}, {"id": "a1", "label": "寝坊", "parent": "a"}, {"id": "a2", "label": "準備が遅い", "parent": "a"}, {"id": "b", "label": "交通"}, {"id": "b1", "label": "電車の遅れ", "parent": "b"}, {"id": "b2", "label": "道の混雑", "parent": "b"}]}</script>
</m-fishbone></div>
</div>
</div>
<div class="concl"><span>→ 書かなければ最初の見せ方（fade）になる</span></div>
</section>
<section class="slide">
<h2>m-flow（変わった、v2.8.0）</h2>
<div class="body">
<p>流れ図の箱と矢印をステップごとに出して、図を組み立てる</p>
<ul>
<li>伝えたいこと：手順・工程</li>
<li>見せ方：1 種類</li>
<li>系列：標準パーツ 見本のスライド：3 枚</li>
</ul>
</div>
</section>
<section id="g-flow-1" class="slide">
<h2>ベイズ決定の流れ</h2>
<div class="body">
<m-flow style="height:420px">
<script type="application/json">{
"nodes": [
{"id": "w", "label": "観測 *w*", "x": 0, "y": 40, "w": 220, "h": 80, "step": 1},
{"id": "p", "tex": "p(y\\mid w)", "x": 330, "y": 40, "w": 240, "h": 80, "step": 1},
{"id": "L", "label": "損失 *L*(*y*, *a*)\n（与えられる）", "x": 330, "y": 260, "w": 240, "h": 100, "step": 2, "tone": "muted"},
{"id": "r", "tex": "r(a\\mid w)", "x": 680, "y": 150, "w": 220, "h": 80, "step": 3},
{"id": "a", "label": "決定 *a*^*", "x": 1000, "y": 150, "w": 184, "h": 80, "step": 4, "tone": "emph"}
],
"edges": [
{"from": "w", "to": "p", "step": 1, "label": "予測"},
{"from": "p", "to": "r", "step": 3},
{"from": "L", "to": "r", "step": 3, "dash": true},
{"from": "r", "to": "a", "step": 4, "label": "最小化", "tone": "emph"}
]
}</script>
</m-flow>
</div>
<div class="concl"><span>→ 予測と損失から期待損失 <i>r</i> を作り，それを最小にする <i>a</i> を選ぶ</span></div>
</section>
<section id="g-flow-2" class="slide">
<h2>お金とサービスの流れ（架空）</h2>
<div class="body">
<m-flow style="height:420px">
<script type="application/json">{
"nodes": [
{"id": "co", "label": "自社", "x": 470, "y": 20, "w": 240, "h": 80, "step": 1, "tone": "emph"},
{"id": "cu", "label": "顧客の会社", "x": 60, "y": 300, "w": 260, "h": 80, "step": 1},
{"id": "us", "label": "社員（使う人）", "x": 860, "y": 300, "w": 300, "h": 80, "step": 2},
{"id": "cl", "label": "クラウド", "x": 950, "y": 20, "w": 220, "h": 80, "step": 3, "tone": "muted"}
],
"edges": [
{"from": "co", "to": "cu", "kind": "service", "label": "使う権利", "shift": 14, "step": 1},
{"from": "cu", "to": "co", "kind": "money", "amount": "月 3 万円", "shift": 14, "step": 2, "pulse": [2, 3]},
{"from": "cu", "to": "us", "kind": "service", "label": "配る", "step": 2},
{"from": "us", "to": "co", "kind": "data", "label": "使い方の記録", "step": 3, "pulse": true},
{"from": "co", "to": "cl", "kind": "money", "amount": "売上の 15 %", "step": 3}
]
}</script>
</m-flow>
</div>
<div class="concl"><span>→ 会社が払い，社員が使い，記録が戻る</span></div>
</section>
<section id="g-flow-3" class="slide">
<h2>1 から <i>n</i> までの和を求める手順（判断とくり返し）</h2>
<div class="body">
<m-flow aria-label="1 から n までの和を求める流れ図" style="height:420px">
<script type="application/json">{
"nodes": [
{"id": "init", "label": "*S* ← 0, *i* ← 1", "x": 0, "y": 70, "w": 220, "h": 80, "step": 1},
{"id": "dec", "label": "*i* ≤ *n* ?", "x": 290, "y": 40, "w": 260, "h": 140, "step": 1, "shape": "diamond"},
{"id": "add", "label": "*S* ← *S* + *i*", "x": 640, "y": 70, "w": 230, "h": 80, "step": 2},
{"id": "inc", "label": "*i* ← *i* + 1", "x": 950, "y": 70, "w": 220, "h": 80, "step": 2},
{"id": "out", "label": "*S* を出力", "x": 305, "y": 300, "w": 230, "h": 80, "step": 4, "tone": "emph"}
],
"edges": [
{"from": "init", "to": "dec", "step": 1},
{"from": "dec", "to": "add", "label": "はい", "step": 2},
{"from": "add", "to": "inc", "step": 2},
{"from": "inc", "to": "dec", "loop": "top", "label": "くり返す", "step": 3},
{"from": "dec", "to": "out", "label": "いいえ", "step": 4, "tone": "emph"}
]
}</script>
</m-flow>
</div>
<div class="concl"><span>→ <i>i</i> が <i>n</i> をこえるまで足してから，<i>S</i> を出力する</span></div>
</section>
<section class="slide">
<h2>m-particles（変わった、v2.8.0）</h2>
<div class="body">
<p>状態変化の粒子の並び方と間隔、化学変化で保存される原子の数を見せる</p>
<ul>
<li>伝えたいこと：仕組みをモデルで見る・手順・工程・比べる（量・特徴）</li>
<li>見せ方：1 種類</li>
<li>系列：数理・統計 見本のスライド：4 枚</li>
</ul>
</div>
</section>
<section id="g-particles-1" class="slide">
<h2>水の状態変化</h2>
<div class="body"><m-particles style="height:440px"><script type="application/json">{"substance":"水"}</script></m-particles></div>
<div class="concl"><span>粒子の数と大きさは同じ。並び方と間隔が変わる</span></div>
</section>
<section id="g-particles-2" class="slide">
<h2>水素の燃焼</h2>
<div class="body"><m-particles mode="reaction" style="height:440px"><script type="application/json">{"reactants":[{"formula":"H2","n":2},{"formula":"O2","n":1}],"products":[{"formula":"H2O","n":2}]}</script></m-particles></div>
<div class="concl"><span>水素と酸素から水ができても、原子の数は変わらない</span></div>
</section>
<section id="g-particles-3" class="slide">
<h2>鉄と硫黄の化合</h2>
<div class="body"><m-particles mode="reaction" style="height:440px"><script type="application/json">{"reactants":[{"formula":"Fe","n":1},{"formula":"S","n":1}],"products":[{"formula":"FeS","n":1}]}</script></m-particles></div>
<div class="concl"><span>鉄と硫黄の原子が結び付き、硫化鉄ができる</span></div>
</section>
<section id="g-particles-4" class="slide">
<h2>炭素の燃焼</h2>
<div class="body"><m-particles mode="reaction" style="height:440px"><script type="application/json">{"reactants":[{"formula":"C","n":1},{"formula":"O2","n":1}],"products":[{"formula":"CO2","n":1}]}</script></m-particles></div>
<div class="concl"><span>炭素と酸素から二酸化炭素ができる</span></div>
</section>
<section class="slide">
<h2>m-quad（変わった、v2.8.0）</h2>
<div class="body">
<p>2 軸の位置づけ（ポジショニングマップ・SWOT 風の 4 象限）に、点をステップごとに 1 つずつ置く</p>
<ul>
<li>伝えたいこと：位置づけ（2 軸）</li>
<li>見せ方：1 種類</li>
<li>系列：標準パーツ 見本のスライド：2 枚</li>
</ul>
</div>
</section>
<section id="g-quad-1" class="slide">
<h2>報告書づくりの道具の位置づけ（架空）</h2>
<div class="body">
<m-quad quads-step="1" style="height:430px">
<script type="application/json">{
"x": {"lo": "手で書く", "hi": "自動で下書き"},
"y": {"lo": "導入が重い", "hi": "すぐ使える"},
"quads": {"tr": "空いている場所", "tl": "", "bl": "", "br": "", "fill": "tr"},
"items": [
{"label": "表計算の雛形", "x": 0.14, "y": 0.78},
{"label": "汎用の文章 AI", "x": 0.6, "y": 0.4, "anchor": "left"},
{"label": "大型の業務システム", "x": 0.7, "y": 0.18},
{"label": "自社の製品", "x": 0.68, "y": 0.66, "self": true, "to": {"x": 0.78, "y": 0.74, "label": "次の版"}}
]
}</script>
</m-quad>
</div>
<div class="concl"><span>→ すぐ使えて自動で書く場所が空いている</span></div>
</section>
<section id="g-quad-2" class="slide">
<h2>SWOT 風に使う（同じ段階に 2 つ）</h2>
<div class="body">
<m-quad style="height:430px">
<script type="application/json">{
"x": {"lo": "マイナス", "hi": "プラス"},
"y": {"lo": "内部の要因", "hi": "外部の環境"},
"quads": {"tr": "機会", "tl": "脅威", "bl": "弱み", "br": "強み"},
"items": [
{"label": "伸びる需要", "x": 0.72, "y": 0.8, "step": 1},
{"label": "人手不足", "x": 0.3, "y": 0.72, "step": 1, "at": 1.2},
{"label": "少ない人数", "x": 0.25, "y": 0.25, "step": 2, "tone": "term"},
{"label": "現場の知見", "x": 0.75, "y": 0.3, "step": 2, "at": 1.2, "self": true}
]
}</script>
</m-quad>
</div>
<div class="concl"><span>→ 現場の知見を伸びる需要に向ける</span></div>
</section>
<section class="slide">
<h2>m-tree（変わった、v2.8.0）</h2>
<div class="body">
<p>階層・分類の木（組織図、生物の分類など）を、根から 1 段ずつ組み立てる。座標は書かず、配置はパーツが決める</p>
<ul>
<li>伝えたいこと：階層・分類</li>
<li>見せ方：fade・draw・grow</li>
<li>系列：標準パーツ 見本のスライド：4 枚</li>
</ul>
</div>
</section>
<section id="g-tree-1" class="slide">
<h2>会社の組織（架空）</h2>
<div class="body">
<m-tree aria-label="架空の会社の組織図" style="height:440px">
<script type="application/json">{
"nodes": [
{"id": "ceo", "label": "社長", "tone": "emph"},
{"id": "s", "label": "営業本部", "parent": "ceo"},
{"id": "d", "label": "開発本部", "parent": "ceo"},
{"id": "a", "label": "管理本部", "parent": "ceo"},
{"id": "s1", "label": "国内営業部", "parent": "s"},
{"id": "s2", "label": "海外営業部", "parent": "s"},
{"id": "d1", "label": "製品開発部", "parent": "d"},
{"id": "d2", "label": "品質保証部", "parent": "d"},
{"id": "a1", "label": "人事部", "parent": "a"},
{"id": "a2", "label": "経理部", "parent": "a"},
{"id": "d11", "label": "設計課", "parent": "d1"},
{"id": "d12", "label": "試作課", "parent": "d1"},
{"id": "d13", "label": "試験課", "parent": "d1", "note": "2026 年に新設"}
]
}</script>
</m-tree>
</div>
<div class="concl"><span>→ 上から 1 段ずつ：本部、部、課</span></div>
</section>
<section id="g-tree-2" class="slide">
<h2>動物の分け方（orient="right"）</h2>
<div class="body">
<m-tree orient="right" aria-label="動物の分類" style="height:440px">
<script type="application/json">{
"nodes": [
{"id": "an", "label": "動物"},
{"id": "v", "label": "脊椎動物", "parent": "an", "note": "背骨がある"},
{"id": "i", "label": "無脊椎動物", "parent": "an", "note": "背骨がない", "tone": "muted"},
{"id": "f", "label": "魚類", "parent": "v"},
{"id": "am", "label": "両生類", "parent": "v"},
{"id": "r", "label": "は虫類", "parent": "v"},
{"id": "b", "label": "鳥類", "parent": "v"},
{"id": "m", "label": "哺乳類", "parent": "v", "tone": "emph"},
{"id": "ar", "label": "節足動物", "parent": "i", "tone": "muted"},
{"id": "mo", "label": "軟体動物", "parent": "i", "tone": "muted"}
],
"edges": [
{"from": "r", "to": "b", "label": "近い仲間", "step": 4}
]
}</script>
</m-tree>
</div>
<div class="concl"><span>→ 背骨の有無で分け、脊椎動物をさらに 5 つに分ける</span></div>
</section>
<section id="g-tree-3" class="slide">
<h2>見せ方の種類（variant）</h2>
<div class="body">
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px">
<div><div class="vcap">箱、それから線（fade、既定）</div>
<m-tree variant="fade" aria-label="植物の分類（fade）" style="height:330px">
<script type="application/json">{"nodes": [{"id": "p", "label": "植物"}, {"id": "s", "label": "種子植物", "parent": "p"}, {"id": "f", "label": "胞子植物", "parent": "p"}, {"id": "a", "label": "被子植物", "parent": "s"}, {"id": "g", "label": "裸子植物", "parent": "s"}]}</script>
</m-tree></div>
<div><div class="vcap">線を引いてから箱（draw）</div>
<m-tree variant="draw" aria-label="植物の分類（draw）" style="height:330px">
<script type="application/json">{"nodes": [{"id": "p", "label": "植物"}, {"id": "s", "label": "種子植物", "parent": "p"}, {"id": "f", "label": "胞子植物", "parent": "p"}, {"id": "a", "label": "被子植物", "parent": "s"}, {"id": "g", "label": "裸子植物", "parent": "s"}]}</script>
</m-tree></div>
<div><div class="vcap">親の側から大きくなる（grow）</div>
<m-tree variant="grow" aria-label="植物の分類（grow）" style="height:330px">
<script type="application/json">{"nodes": [{"id": "p", "label": "植物"}, {"id": "s", "label": "種子植物", "parent": "p"}, {"id": "f", "label": "胞子植物", "parent": "p"}, {"id": "a", "label": "被子植物", "parent": "s"}, {"id": "g", "label": "裸子植物", "parent": "s"}]}</script>
</m-tree></div>
</div>
</div>
<div class="concl"><span>→ 書かなければ最初の見せ方（fade）になる</span></div>
</section>
<section id="g-tree-4" class="slide">
<h2>確率の木：雨の日に遅れる確率（架空の値）</h2>
<div class="body">
<m-tree orient="right" aria-label="天気と遅刻の確率の木（架空の値）" style="height:440px">
<script type="application/json">{
"nodes": [
{"id": "s", "label": "出発"},
{"id": "r", "label": "雨", "parent": "s", "branch": "0.3"},
{"id": "f", "label": "晴れ", "parent": "s", "branch": "0.7"},
{"id": "rl", "label": "遅れる", "parent": "r", "branch": "0.4"},
{"id": "ro", "label": "間に合う", "parent": "r", "branch": "0.6"},
{"id": "fl", "label": "遅れる", "parent": "f", "branch": "0.1"},
{"id": "fo", "label": "間に合う", "parent": "f", "branch": "0.9"}
],
"path": ["s", "r", "rl"],
"pathNote": "0.3 × 0.4 = 0.12"
}</script>
</m-tree>
</div>
<div class="concl"><span>→ 道に沿って枝の確率をかける：雨で遅れる確率は 0.12</span></div>
</section>
<section class="slide">
<h2>m-balance</h2>
<div class="body">
<p>確率の重りを置き、支点が期待値でつり合う様子を示す</p>
<ul>
<li>伝えたいこと：仕組みをモデルで見る</li>
<li>見せ方：1 種類</li>
<li>系列：数理・統計 見本のスライド：1 枚</li>
</ul>
</div>
</section>
<section id="g-balance-1" class="slide">
<h2>期待値でつり合う（架空データ）</h2>
<div class="body"><m-balance style="height:440px"><script type="application/json">{"values":[0,1,2,3],"probs":[0.1,0.3,0.4,0.2],"name":"X"}</script></m-balance></div>
<div class="concl"><span>架空の分布。確率を重りとすると期待値が支点になる</span></div>
</section>
<section class="slide">
<h2>m-bars</h2>
<div class="body">
<p>棒をステップごとに 0 から伸ばす（縦棒・横棒・組の棒・積み上げ棒）。値の軸の上限をステップで広げて「軸を突き抜ける伸び」も見せられる</p>
<ul>
<li>伝えたいこと：比べる（量・特徴）・順位・時間での変化・全体と内訳</li>
<li>見せ方：1 種類</li>
<li>系列：標準パーツ 見本のスライド：5 枚</li>
</ul>
</div>
</section>
<section id="g-bars-1" class="slide">
<h2>年ごとの売上（架空）</h2>
<div class="body">
<m-bars unit="億円" digits="1" al="売上" style="height:400px">
<script type="application/json">{
"groups": [
{"label": "1 年目", "value": 0.4},
{"label": "2 年目", "value": 1.1},
{"label": "3 年目", "value": 2.6},
{"label": "4 年目", "value": 7.9, "tone": "emph", "step": 4}
],
"scale": [{"step": 4, "max": 9, "at": 0.6}]
}</script>
</m-bars>
</div>
<div class="concl"><span>→ 4 年目は前の軸に収まらない伸び</span></div>
</section>
<section id="g-bars-2" class="slide">
<h2>聞き取りで多かった不満（架空）</h2>
<div class="body">
<m-bars orient="h" unit="人" per-step="0" ticks="false" style="height:400px">
<script type="application/json">{
"groups": [
{"label": "書く時間が足りない", "value": 23, "tone": "emph"},
{"label": "数字の転記の誤り", "value": 17},
{"label": "書式がそろわない", "value": 12},
{"label": "承認が遅い", "value": 7}
]
}</script>
</m-bars>
</div>
<div class="concl"><span>→ 一番の不満は書く時間</span></div>
</section>
<section id="g-bars-3" class="slide">
<h2>2 つの系列を並べる（架空）</h2>
<div class="body">
<m-bars unit="%" style="height:400px">
<script type="application/json">{
"series": [{"label": "導入前"}, {"label": "導入後"}],
"groups": [
{"label": "A 部門", "values": [42, 18]},
{"label": "B 部門", "values": [35, 15]},
{"label": "C 部門", "values": [51, 20]}
]
}</script>
</m-bars>
</div>
<div class="concl"><span>→ どの部門でも残業の割合が下がった</span></div>
</section>
<section id="g-bars-4" class="slide">
<h2>売上の内訳を積み上げる（stack。架空）</h2>
<div class="body">
<m-bars stack="true" unit="億円" digits="1" al="売上" style="height:420px">
<script type="application/json">{
"series": [{"label": "店頭"}, {"label": "通販"}, {"label": "卸"}],
"groups": [
{"label": "1 年目", "values": [2.4, 0.6, 1.0]},
{"label": "2 年目", "values": [2.5, 1.4, 1.1]},
{"label": "3 年目", "values": [2.3, 2.6, 1.2]},
{"label": "4 年目", "values": [2.2, 3.9, 1.2], "tone": "emph"}
]
}</script>
</m-bars>
</div>
<div class="concl"><span>→ 伸びたのは通販。店頭はほぼ横ばい</span></div>
</section>
<section id="g-bars-5" class="slide">
<h2>前の年からの増減と、答えの割合（架空）</h2>
<div class="body">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:40px">
<m-bars unit="%" digits="1" al="前年比" aria-label="店ごとの売上の前年比（負の値）" style="height:420px">
<script type="application/json">{
"groups": [
{"label": "北店", "value": 4.2},
{"label": "駅前店", "value": -3.1, "tone": "emph"},
{"label": "南店", "value": 1.5},
{"label": "西店", "value": -0.8}
]
}</script>
</m-bars>
<m-bars stack="percent" orient="h" per-step="0" ticks="false" aria-label="学年ごとの答えの割合（100 % 積み上げ）" style="height:420px">
<script type="application/json">{
"series": [{"label": "はい"}, {"label": "いいえ"}, {"label": "未定"}],
"groups": [
{"label": "1 年", "values": [48, 30, 42]},
{"label": "2 年", "values": [66, 24, 30]},
{"label": "3 年", "values": [72, 24, 24]}
]
}</script>
</m-bars>
</div>
</div>
<div class="concl"><span>→ 駅前店だけが大きく減った。学年が上がるほど「はい」が増える</span></div>
</section>
<section class="slide">
<h2>m-boxplot</h2>
<div class="body">
<p>箱ひげ図。値を並べ、中央値・四分位数を求める手順のとおりに組み立てる。群を並べて比べる</p>
<ul>
<li>伝えたいこと：ばらつき・比べる（量・特徴）</li>
<li>見せ方：fade・draw</li>
<li>系列：数理・統計 見本のスライド：3 枚</li>
</ul>
</div>
</section>
<section id="g-boxplot-1" class="slide">
<h2>箱ひげ図のかき方：1 か月に読んだ本（架空の 11 人）</h2>
<div class="body">
<m-boxplot xl="冊数（冊）" xr="[0,20]" xt="[0,2,4,6,8,10,12,14,16,18,20]" style="height:440px">
<script type="application/json">{"groups": [{"values": [12, 5, 9, 18, 7, 3, 13, 8, 15, 6, 10]}]}</script>
</m-boxplot>
</div>
<div class="concl"><span>→ 小さい順に並べ、中央値と前半・後半の中央値（四分位数）で箱にする</span></div>
</section>
<section id="g-boxplot-2" class="slide">
<h2>3 つの組の数学の得点（架空の各 15 人）</h2>
<div class="body">
<m-boxplot orient="v" build="whole" dots="on" outliers="on" yl="得点（点）" yr="[30,100]" yt="[30,40,50,60,70,80,90,100]" style="height:440px">
<script type="application/json">{"groups": [
{"label": "A 組", "values": [42, 48, 51, 55, 57, 58, 60, 61, 63, 64, 66, 68, 70, 72, 75]},
{"label": "B 組", "values": [50, 56, 60, 62, 65, 67, 68, 70, 71, 73, 74, 76, 79, 82, 99]},
{"label": "C 組", "values": [35, 45, 52, 54, 58, 60, 61, 62, 64, 66, 67, 69, 71, 73, 80]}]}</script>
</m-boxplot>
</div>
<div class="concl"><span>→ B 組は箱が高い。99 点は 1.5 × 四分位範囲より外の外れ値</span></div>
</section>
<section id="g-boxplot-3" class="slide">
<h2>見せ方の種類（variant）</h2>
<div class="body">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0 36px">
<m-boxplot variant="fade" build="whole" dots="on" xl="フェード（fade、既定）" xr="[0,20]" style="height:400px">
<script type="application/json">{"groups": [{"label": "前", "values": [3, 5, 6, 7, 8, 9, 10, 12, 13, 15, 18]}, {"label": "後", "values": [6, 8, 9, 10, 11, 12, 12, 13, 14, 16, 17]}]}</script>
</m-boxplot>
<m-boxplot variant="draw" build="whole" dots="on" xl="線を引く（draw）" xr="[0,20]" style="height:400px">
<script type="application/json">{"groups": [{"label": "前", "values": [3, 5, 6, 7, 8, 9, 10, 12, 13, 15, 18]}, {"label": "後", "values": [6, 8, 9, 10, 11, 12, 12, 13, 14, 16, 17]}]}</script>
</m-boxplot>
</div>
</div>
<div class="concl"><span>→ 書かなければ最初の見せ方（fade）になる。値は架空</span></div>
</section>
<section class="slide">
<h2>m-cards</h2>
<div class="body">
<p>カード（番号の丸・アイコン・見出し・説明）を横一列か 2 段に並べ、ステップごとに出す。矢印で順を、枠の色で強調を見せる</p>
<ul>
<li>伝えたいこと：手順・工程・まとめる・分ける</li>
<li>見せ方：rise・fade・draw</li>
<li>系列：標準パーツ 見本のスライド：3 枚</li>
</ul>
</div>
</section>
<section id="g-cards-1" class="slide">
<h2>新しい窓口の進め方（架空の会社）</h2>
<div class="body">
<m-cards arrows nums style="height:330px">
<script type="application/json">{
"cards": [
{"icon": "messages", "title": "聞く", "text": "店に来た人の困りごとを 5 分で聞き取る"},
{"icon": "clipboard-list", "title": "まとめる", "text": "聞いたことを 1 枚の紙にまとめる"},
{"icon": "users", "title": "相談する", "text": "週に 1 回、担当の 3 人で話し合う"},
{"icon": "circle-check", "title": "返す", "text": "1 週間以内に答えを返す"}
]
}</script>
</m-cards>
</div>
<div class="concl"><span>→ 聞いてから答えるまでを 1 週間に</span></div>
</section>
<section id="g-cards-2" class="slide">
<h2>4 つの店の工夫（架空）</h2>
<div class="body">
<m-cards layout="grid" hilite="4" style="height:420px">
<script type="application/json">{
"cards": [
{"n": "A", "icon": "building-store", "title": "駅前店", "text": "朝の 30 分だけ、受け取り専用の列を作った"},
{"n": "B", "icon": "calendar-event", "title": "川沿い店", "text": "予約の日を前の日に電話で知らせるようにした"},
{"n": "C", "icon": "map-pin", "title": "山の手店", "text": "店の場所の地図を、紙で配るのをやめて看板にした"},
{"n": "D", "icon": "chart-bar", "title": "港町店", "text": "待ち時間を毎日数えて、壁に貼り出した。来た人の 8 割が「待ちが短くなった」と答えた", "tone": "emph"}
]
}</script>
</m-cards>
</div>
<div class="concl"><span>→ 数えて見せた店で、待ちが短くなったと感じる人がいちばん多い</span></div>
</section>
<section id="g-cards-3" class="slide">
<h2>まとめて出す（per-step="0"、見せ方 draw）</h2>
<div class="body">
<m-cards per-step="0" variant="draw" hilite="last" style="height:300px">
<script type="application/json">{
"cards": [
{"icon": "leaf", "title": "材料", "text": "地元の野菜を使う"},
{"icon": "truck", "title": "運ぶ", "text": "朝に届けて、その日のうちに売る"},
{"icon": "heart", "title": "残さない", "text": "売れ残りは翌日の総菜に"}
]
}</script>
</m-cards>
</div>
</section>
<section class="slide">
<h2>m-ci</h2>
<div class="body">
<p>正規標本の区間を重ね、母平均を含む割合で信頼水準を説明する</p>
<ul>
<li>伝えたいこと：仕組みをモデルで見る・ばらつき</li>
<li>見せ方：1 種類</li>
<li>系列：数理・統計 見本のスライド：1 枚</li>
</ul>
</div>
</section>
<section id="g-ci-1" class="slide">
<h2>95 % の区間を繰り返す（シミュレーション）</h2>
<div class="body"><m-ci style="height:440px"><script type="application/json">{"mu":50,"sigma":10,"n":25,"reps":40,"level":0.95,"seed":2}</script></m-ci></div>
<div class="concl"><span>架空の標本。95 % は繰り返した区間が μ を含む割合</span></div>
</section>
<section class="slide">
<h2>m-code</h2>
<div class="body">
<p>短いコードを行ごとに説明し、最後に出力を見せる</p>
<ul>
<li>伝えたいこと：手順・工程・仕組みをモデルで見る</li>
<li>見せ方：1 種類</li>
<li>系列：数理・統計 見本のスライド：3 枚</li>
</ul>
</div>
</section>
<section id="g-code-1" class="slide">
<h2>店ごとの売上平均を計算する</h2>
<div class="body"><m-code style="height:440px"><script type="application/json">{"lang":"python","code":"import pandas as pd\ndf = pd.read_csv(\"sales.csv\")\ndf.groupby(\"store\")[\"sales\"].mean()","steps":[{"lines":[1],"note":"pandas を読み込む"},{"lines":[2],"note":"CSV を表として読む"},{"lines":[3],"note":"店ごとの平均"}],"output":"store\nA 120.5\nB 98.0"}</script></m-code></div>
<div class="concl"><span>架空の売上データ。店ごとにまとめてから平均を求める</span></div>
</section>
<section id="g-code-2" class="slide">
<h2>繰り返しで平均を求める</h2>
<div class="body"><m-code style="height:440px"><script type="application/json">{"lang":"python","code":"def mean(values):\n total = 0\n for value in values:\n total += value\n return total / len(values)\n\nprint(mean([2, 4, 6]))","steps":[{"lines":[1,2],"note":"関数を定義し、合計を 0 にする"},{"lines":[3,4],"note":"値を一つずつ合計する"},{"lines":[5,7],"note":"個数で割り、関数の結果を表示"}],"output":"4.0"}</script></m-code></div>
<div class="concl"><span>合計を個数で割ると平均になる</span></div>
</section>
<section id="g-code-3" class="slide">
<h2>交差検証のコード（scikit-learn）</h2>
<div class="body"><m-code style="height:420px"><script type="application/json">{"lang": "python", "code": "from sklearn.model_selection import cross_val_score\nfrom sklearn.tree import DecisionTreeClassifier\nfrom sklearn.datasets import load_iris\nX, y = load_iris(return_X_y=True)\nmodel = DecisionTreeClassifier(max_depth=3, random_state=0)\nscores = cross_val_score(model, X, y, cv=5)\nprint(scores.mean())", "steps": [{"lines": [1, 3], "note": "道具を読み込む"}, {"lines": [4], "note": "アヤメのデータ"}, {"lines": [5], "note": "決定木を用意"}, {"lines": [6, 7], "note": "5 分割で検証し平均"}], "output": "0.96"}</script></m-code></div>
<div class="concl"><span>データを 5 つに分け、検証する区画を替えて平均する</span></div>
</section>
<section class="slide">
<h2>m-codetree</h2>
<div class="body">
<p>ハフマン木で 2 値の系列を 1 語ずつ復号する（MH 符号）。ランは画素の升目に伸びる</p>
<ul>
<li>伝えたいこと：階層・分類・手順・工程</li>
<li>見せ方：1 種類</li>
<li>系列：情報 見本のスライド：3 枚</li>
</ul>
</div>
</section>
<section id="g-codetree-1" class="slide noconcl">
<h2>MH 符号をハフマン木で復号する</h2>
<div class="body">
<m-codetree aria-label="MH 符号のハフマン木で 11011011111 を復号する図" style="height:530px">
<script type="application/json">{
"bits": "11011011111",
"table": [
{"run": 0, "white": "00110101", "black": "0000110111"},
{"run": 1, "white": "000111", "black": "010"},
{"run": 2, "white": "0111", "black": "11"},
{"run": 3, "white": "1000", "black": "10"},
{"run": 4, "white": "1011", "black": "011"},
{"run": 5, "white": "1100", "black": "0011"},
{"run": 6, "white": "1110", "black": "0010"},
{"run": 7, "white": "1111", "black": "00011"},
{"run": 8, "white": "10011", "black": "000101"},
{"run": 9, "white": "10100", "black": "000100"},
{"run": 10, "white": "00111", "black": "0000100"},
{"run": 11, "white": "01000", "black": "0000101"},
{"run": 12, "white": "001000", "black": "0000111"},
{"run": 13, "white": "000011", "black": "00000100"},
{"run": 14, "white": "110100", "black": "00000111"},
{"run": 15, "white": "110101", "black": "000011000"},
{"run": 16, "white": "101010", "black": "0000010111"},
{"run": 17, "white": "101011", "black": "0000011000"},
{"run": 18, "white": "0100111", "black": "0000001000"},
{"run": 19, "white": "0001100", "black": "00001100111"},
{"run": 20, "white": "0001000", "black": "00001101000"},
{"run": 21, "white": "0010111", "black": "00001101100"},
{"run": 22, "white": "0000011", "black": "00000110111"},
{"run": 23, "white": "0000100", "black": "00000101000"},
{"run": 24, "white": "0101000", "black": "00000010111"},
{"run": 25, "white": "0101011", "black": "00000011000"},
{"run": 26, "white": "0010011", "black": "000011001010"},
{"run": 27, "white": "0100100", "black": "000011001011"},
{"run": 28, "white": "0011000", "black": "000011001100"},
{"run": 29, "white": "00000010", "black": "000011001101"},
{"run": 30, "white": "00000011", "black": "000001101000"},
{"run": 31, "white": "00011010", "black": "000001101001"},
{"run": 32, "white": "00011011", "black": "000001101010"},
{"run": 33, "white": "00010010", "black": "000001101011"},
{"run": 34, "white": "00010011", "black": "000011010010"},
{"run": 35, "white": "00010100", "black": "000011010011"},
{"run": 36, "white": "00010101", "black": "000011010100"},
{"run": 37, "white": "00010110", "black": "000011010101"},
{"run": 38, "white": "00010111", "black": "000011010110"},
{"run": 39, "white": "00101000", "black": "000011010111"},
{"run": 40, "white": "00101001", "black": "000001101100"},
{"run": 41, "white": "00101010", "black": "000001101101"},
{"run": 42, "white": "00101011", "black": "000011011010"},
{"run": 43, "white": "00101100", "black": "000011011011"},
{"run": 44, "white": "00101101", "black": "000001010100"},
{"run": 45, "white": "00000100", "black": "000001010101"},
{"run": 46, "white": "00000101", "black": "000001010110"},
{"run": 47, "white": "00001010", "black": "000001010111"},
{"run": 48, "white": "00001011", "black": "000001100100"},
{"run": 49, "white": "01010010", "black": "000001100101"},
{"run": 50, "white": "01010011", "black": "000001010010"},
{"run": 51, "white": "01010100", "black": "000001010011"},
{"run": 52, "white": "01010101", "black": "000000100100"},
{"run": 53, "white": "00100100", "black": "000000110111"},
{"run": 54, "white": "00100101", "black": "000000111000"},
{"run": 55, "white": "01011000", "black": "000000100111"},
{"run": 56, "white": "01011001", "black": "000000101000"},
{"run": 57, "white": "01011010", "black": "000001011000"},
{"run": 58, "white": "01011011", "black": "000001011001"},
{"run": 59, "white": "01001010", "black": "000000101011"},
{"run": 60, "white": "01001011", "black": "000000101100"},
{"run": 61, "white": "00110010", "black": "000001011010"},
{"run": 62, "white": "00110011", "black": "000001100110"},
{"run": 63, "white": "00110100", "black": "000001100111"},
{"run": 64, "white": "11011", "black": "0000001111"},
{"run": 128, "white": "10010", "black": "000011001000"},
{"run": 192, "white": "010111", "black": "000011001001"},
{"run": 256, "white": "0110111", "black": "000001011011"},
{"run": 320, "white": "00110110", "black": "000000110011"},
{"run": 384, "white": "00110111", "black": "000000110100"},
{"run": 448, "white": "01100100", "black": "000000110101"},
{"run": 512, "white": "01100101", "black": "0000001101100"},
{"run": 576, "white": "01101000", "black": "0000001101101"},
{"run": 640, "white": "01100111", "black": "0000001001010"},
{"run": 704, "white": "011001100", "black": "0000001001011"},
{"run": 768, "white": "011001101", "black": "0000001001100"},
{"run": 832, "white": "011010010", "black": "0000001001101"},
{"run": 896, "white": "011010011", "black": "0000001110010"},
{"run": 960, "white": "011010100", "black": "0000001110011"},
{"run": 1024, "white": "011010101", "black": "0000001110100"},
{"run": 1088, "white": "011010110", "black": "0000001110101"},
{"run": 1152, "white": "011010111", "black": "0000001110110"},
{"run": 1216, "white": "011011000", "black": "0000001110111"},
{"run": 1280, "white": "011011001", "black": "0000001010010"},
{"run": 1344, "white": "011011010", "black": "0000001010011"},
{"run": 1408, "white": "011011011", "black": "0000001010100"},
{"run": 1472, "white": "010011000", "black": "0000001010101"},
{"run": 1536, "white": "010011001", "black": "0000001011010"},
{"run": 1600, "white": "010011010", "black": "0000001011011"},
{"run": 1664, "white": "011000", "black": "0000001100100"},
{"run": 1728, "white": "010011011", "black": "0000001100101"},
{"run": "EOL", "white": "000000000001", "black": "000000000001"}
]
}</script>
</m-codetree>
</div>
</section>
<section id="g-codetree-2" class="slide noconcl">
<h2>長い黒の符号（12 ビット）を読む</h2>
<div class="body">
<m-codetree aria-label="MH 符号のハフマン木で、白 3・黒 30・白 2 を復号する図（黒 30 は 12 ビット）" style="height:530px">
<script type="application/json">{
"bits": "1000 000001101000 0111",
"table": [
{"run": 0, "white": "00110101", "black": "0000110111"},
{"run": 1, "white": "000111", "black": "010"},
{"run": 2, "white": "0111", "black": "11"},
{"run": 3, "white": "1000", "black": "10"},
{"run": 4, "white": "1011", "black": "011"},
{"run": 5, "white": "1100", "black": "0011"},
{"run": 6, "white": "1110", "black": "0010"},
{"run": 7, "white": "1111", "black": "00011"},
{"run": 8, "white": "10011", "black": "000101"},
{"run": 9, "white": "10100", "black": "000100"},
{"run": 10, "white": "00111", "black": "0000100"},
{"run": 11, "white": "01000", "black": "0000101"},
{"run": 12, "white": "001000", "black": "0000111"},
{"run": 13, "white": "000011", "black": "00000100"},
{"run": 14, "white": "110100", "black": "00000111"},
{"run": 15, "white": "110101", "black": "000011000"},
{"run": 16, "white": "101010", "black": "0000010111"},
{"run": 17, "white": "101011", "black": "0000011000"},
{"run": 18, "white": "0100111", "black": "0000001000"},
{"run": 19, "white": "0001100", "black": "00001100111"},
{"run": 20, "white": "0001000", "black": "00001101000"},
{"run": 21, "white": "0010111", "black": "00001101100"},
{"run": 22, "white": "0000011", "black": "00000110111"},
{"run": 23, "white": "0000100", "black": "00000101000"},
{"run": 24, "white": "0101000", "black": "00000010111"},
{"run": 25, "white": "0101011", "black": "00000011000"},
{"run": 26, "white": "0010011", "black": "000011001010"},
{"run": 27, "white": "0100100", "black": "000011001011"},
{"run": 28, "white": "0011000", "black": "000011001100"},
{"run": 29, "white": "00000010", "black": "000011001101"},
{"run": 30, "white": "00000011", "black": "000001101000"},
{"run": 31, "white": "00011010", "black": "000001101001"},
{"run": 32, "white": "00011011", "black": "000001101010"},
{"run": 33, "white": "00010010", "black": "000001101011"},
{"run": 34, "white": "00010011", "black": "000011010010"},
{"run": 35, "white": "00010100", "black": "000011010011"},
{"run": 36, "white": "00010101", "black": "000011010100"},
{"run": 37, "white": "00010110", "black": "000011010101"},
{"run": 38, "white": "00010111", "black": "000011010110"},
{"run": 39, "white": "00101000", "black": "000011010111"},
{"run": 40, "white": "00101001", "black": "000001101100"},
{"run": 41, "white": "00101010", "black": "000001101101"},
{"run": 42, "white": "00101011", "black": "000011011010"},
{"run": 43, "white": "00101100", "black": "000011011011"},
{"run": 44, "white": "00101101", "black": "000001010100"},
{"run": 45, "white": "00000100", "black": "000001010101"},
{"run": 46, "white": "00000101", "black": "000001010110"},
{"run": 47, "white": "00001010", "black": "000001010111"},
{"run": 48, "white": "00001011", "black": "000001100100"},
{"run": 49, "white": "01010010", "black": "000001100101"},
{"run": 50, "white": "01010011", "black": "000001010010"},
{"run": 51, "white": "01010100", "black": "000001010011"},
{"run": 52, "white": "01010101", "black": "000000100100"},
{"run": 53, "white": "00100100", "black": "000000110111"},
{"run": 54, "white": "00100101", "black": "000000111000"},
{"run": 55, "white": "01011000", "black": "000000100111"},
{"run": 56, "white": "01011001", "black": "000000101000"},
{"run": 57, "white": "01011010", "black": "000001011000"},
{"run": 58, "white": "01011011", "black": "000001011001"},
{"run": 59, "white": "01001010", "black": "000000101011"},
{"run": 60, "white": "01001011", "black": "000000101100"},
{"run": 61, "white": "00110010", "black": "000001011010"},
{"run": 62, "white": "00110011", "black": "000001100110"},
{"run": 63, "white": "00110100", "black": "000001100111"},
{"run": 64, "white": "11011", "black": "0000001111"},
{"run": 128, "white": "10010", "black": "000011001000"},
{"run": 192, "white": "010111", "black": "000011001001"},
{"run": 256, "white": "0110111", "black": "000001011011"},
{"run": 320, "white": "00110110", "black": "000000110011"},
{"run": 384, "white": "00110111", "black": "000000110100"},
{"run": 448, "white": "01100100", "black": "000000110101"},
{"run": 512, "white": "01100101", "black": "0000001101100"},
{"run": 576, "white": "01101000", "black": "0000001101101"},
{"run": 640, "white": "01100111", "black": "0000001001010"},
{"run": 704, "white": "011001100", "black": "0000001001011"},
{"run": 768, "white": "011001101", "black": "0000001001100"},
{"run": 832, "white": "011010010", "black": "0000001001101"},
{"run": 896, "white": "011010011", "black": "0000001110010"},
{"run": 960, "white": "011010100", "black": "0000001110011"},
{"run": 1024, "white": "011010101", "black": "0000001110100"},
{"run": 1088, "white": "011010110", "black": "0000001110101"},
{"run": 1152, "white": "011010111", "black": "0000001110110"},
{"run": 1216, "white": "011011000", "black": "0000001110111"},
{"run": 1280, "white": "011011001", "black": "0000001010010"},
{"run": 1344, "white": "011011010", "black": "0000001010011"},
{"run": 1408, "white": "011011011", "black": "0000001010100"},
{"run": 1472, "white": "010011000", "black": "0000001010101"},
{"run": 1536, "white": "010011001", "black": "0000001011010"},
{"run": 1600, "white": "010011010", "black": "0000001011011"},
{"run": 1664, "white": "011000", "black": "0000001100100"},
{"run": 1728, "white": "010011011", "black": "0000001100101"},
{"run": "EOL", "white": "000000000001", "black": "000000000001"}
]
}</script>
</m-codetree>
</div>
</section>
<section id="g-codetree-3" class="slide noconcl">
<h2>表にない符号に出会う（練習用の小さな表）</h2>
<div class="body">
<m-codetree aria-label="小さな符号表で、表にない符号に出会う図" style="height:530px">
<script type="application/json">{
"bits": "01 1 0001 001 000",
"table": {"white": {"1": 1, "01": 2, "001": 3, "0001": 64}, "black": {"1": 1, "01": 2, "001": 3}}
}</script>
</m-codetree>
</div>
</section>
<section class="slide">
<h2>m-collect</h2>
<div class="body">
<p>並んだ札（回答など）が動いて縮み、少数の箱（要約）にまとまる</p>
<ul>
<li>伝えたいこと：まとめる・分ける</li>
<li>見せ方：1 種類</li>
<li>系列：数理・統計 見本のスライド：1 枚</li>
</ul>
</div>
</section>
<section id="g-collect-1" class="slide">
<h2>観測の要約</h2>
<div class="body">
<p data-step="1">8 回の観測（架空）は，事後分布の 2 つのモーメントにまとまる</p>
<!-- 見本の数値：8 回のコイン投げ（表なら 1：1 1 0 1 1 0 1 1）から、一様な事前分布 Beta(1,1) のもとでの事後平均 7/10 と事後分散 21/1100。
式（tex）は組み立てのときに描く（spec §6.2）ので、データは原稿に書く（再生のときにスクリプトで作ったデータの式は描かれない） -->
<m-collect data-from="2" box-w="300" box-h="120" style="height:340px">
<script type="application/json">{"cols": 4,
"chips": [{"label": "試行 1：表", "to": [0, 1]}, {"label": "試行 2：表", "to": [0, 1]}, {"label": "試行 3：裏", "to": [0, 1]}, {"label": "試行 4：表", "to": [0, 1]},
{"label": "試行 5：表", "to": [0, 1]}, {"label": "試行 6：裏", "to": [0, 1]}, {"label": "試行 7：表", "to": [0, 1]}, {"label": "試行 8：表", "to": [0, 1]}],
"targets": [{"label": "事後平均", "tex": "\\mathrm{E}[\\theta\\mid D]", "value": "0.700"},
{"label": "事後分散", "tex": "\\mathrm{Var}[\\theta\\mid D]", "value": "0.0191"}]}</script>
</m-collect>
</div>
<div class="concl"><span>→ 次の予測には，この 2 つの値だけ持てばよい</span></div>
</section>
<section class="slide">
<h2>m-compare</h2>
<div class="body">
<p>2 つ（3 つまで）を横に並べて比べる表。一方の列、もう一方の列、それから行ごとの違い</p>
<ul>
<li>伝えたいこと：比べる（量・特徴）</li>
<li>見せ方：fade・slide・reveal</li>
<li>系列：標準パーツ 見本のスライド：3 枚</li>
</ul>
</div>
</section>