わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

合流性の図

この本をざっと見て,2年のかけ算と別に,面白かったのが3点ありました.わり算の授業で,「72こ」を起点に,2でわるのを3回,3でわるのを2回,したときの図が,学生時代に勉んだ,項書換え系の合流性の図と同じ形なのでした.ここで「2でわる」のと「3でわる」のは順不同です.実際,72こを起点として,2でわってからまた2でわりそして3でわっても,2でわってからこんどは3でわりそして2でわっても,3でわってから2でわりそしてまた2でわっても,途中の個数は異なりますが結果としては「6こ」となります.「2でわる」操作が左下方向,「3でわる」操作が右下方向となっている図なのです.

りんごを3つのせたさらが2まい〜cherry-picking

上記の件,該当ページを撮影して表示するのではなく,自作してみました.

久しぶりにD3.jsを使いました.HTMLはd3.jsの取り込みだけで,CSSは使いません.作画の実体は,JavaScriptのコードです.「円と数値」「赤の矢印」「青の矢印」それぞれで配列を作ってから,svg.selectAllで追加しています.
原文と違うところもあります.カラーは独自ですし,矢印の形状も異なります.また数量の記載に関して,もともとは引用のとおり「72こ」「6こ」なのですが,日本語文字の表示は要注意*1なので,数のみとしました.それと,オリジナルでは「72こ」「6こ」を除いて数は書かれておらず,授業で埋めていくという形式をとっています.jsfiddle上でも,ボタンを設置すれば,数の表示・非表示ができそうだと思ったものの,そこまでする時間がとれませんでした.

(最終更新:2014-10-31 早朝)

*1:数字が大きく,「こ」が小さくなっていまして,それらを考慮してセンタリングさせる処理を書くのは高コストなのです.