はじめに
本記事はProgaku Advent Calendar 20232日目の記事です。
集合の共通部分をビジュアライズするのにベン図という表現方法があります。
ではこれをフロントで実装しようと思ったとき、私の中では2つのアプローチが考えられます。
- d3.jsのプラグインであるvenn.jsを使用
- matplotlib-vennを用いて裏側でベン図イメージを生成し、フロントで表示
表示するだけなら上記2つを使うだけなのですが、各領域に対してイベントをつけようと思うとどちらも途端に面倒くさくなります。
私があまり分かっていないのもありますし、もしかしたらベン図を作って各領域にイベントを登録できるライブラリやフレームワークがこの世には存在するのかもしれません。が、私は知りません。
ではどうすればいいのでしょうか？
そう、自分で作ればいいんです。
つくるもの
共通部分のパーセンテージ1~99%に応じて、形を変化させるベン図をSVGで作成します。
サンプルはこちら:
クリックするとコンソールにどこをクリックしたか出しています。
リアクティブに作成していきたいのでNext.jsを用います。
Reactだけでやろうと思ったら、2023/12現在の最新ドキュメントにはNext.jsかRemixかGatsbyかを合わせて使う案内しか書かれていなかったので、この中では一番慣れているNext.jsを用いました。
素のTypeScriptでやる選択肢もありましたが、ReactやNext.jsのタグを付けた方が記事を見てもらいやすいので使う選択をしました。
実装
ヘッダーも入っちゃっていますが気にしないでください。
算数力(ぢから)不足で計算するのがキツくて、何とか楽にするために2つの円の半径がどちらも100前提で書いています。
そしてパーセンテージが0以下100以上は対応していません。
inputのmax, minで入力できないよう制御しています。
import Head from 'next/head'
import styles from '@/styles/App.module.css'
import React, {useEffect, useState} from 'react';
function pythagoreanTheorem(radius: number, percent: number): number {
const centerHeight = radius - percent;
return Math.sqrt(radius * radius - centerHeight * centerHeight);
}
export default function App() {
const RADIUS = 100;
const WIDTH = 400;
const HEIGHT = 210;
const CENTER_X = WIDTH / 2;
const CENTER_Y = 105;
const [percent, setPercent] = useState(50);
const onPercentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPercent(e.target.valueAsNumber);
};
const [centerHeight, setCenterHeight] = useState(pythagoreanTheorem(RADIUS, percent));
useEffect(() => {
setCenterHeight(pythagoreanTheorem(RADIUS, percent));
}, [percent]);
const onClickLeft = () => {console.log('on click left')};
const onClickRight = () => {console.log('on click right')};
const onClickCenter = () => {console.log('on click center')};
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={`${styles.main}`}>
<input
type="number"
value={percent}
max={99}
min={1}
onChange={onPercentChange}
/>
<svg width={WIDTH} height={HEIGHT}>
<path
d={`
M${CENTER_X},${CENTER_Y-centerHeight}
A${RADIUS},${RADIUS} 0 1 0 ${CENTER_X},${CENTER_Y+centerHeight}
`}
fill="white"
stroke="black"
onClick={onClickLeft}
/>
<path
d={`
M${CENTER_X},${CENTER_Y-centerHeight}
A${RADIUS},${RADIUS} 0 1 1 ${CENTER_X},${CENTER_Y+centerHeight}
`}
fill="white"
stroke="black"
onClick={onClickRight}
/>
<g onClick={onClickCenter}>
<path
d={`
M${CENTER_X},${CENTER_Y-centerHeight}
A${RADIUS},${RADIUS} 0 0 0 ${CENTER_X},${CENTER_Y+centerHeight}
`}
fill="red"
/>
<path
d={`
M${CENTER_X},${CENTER_Y-centerHeight}
A${RADIUS},${RADIUS} 0 0 1 ${CENTER_X},${CENTER_Y+centerHeight}
`}
fill="red"
/>
</g>
</svg>
</main>
</>
)
}
解説
SVGの全体的な説明についてはMDNに詳しく書かれていますので、ベン図に関係ない部分はこちらから学んでください。
<svg width={WIDTH} height={HEIGHT}></svg>
そのまんま、横幅縦幅です。
2円の半径が100ずつで、ピッタリ並べる(重複度0%)のと横幅が400になります。
ピッタリだと輪郭 ( stroke ) が途切れてしまいますが、今回は0％は指定できないので400としています。
縦幅はピッタリ200だと輪郭がはみ出るので、少し多めに取って210としています。
<path />
これで円弧を描画しています。
MDN pathにある通り、pathのd属性に色々書いて形を作ります。
サンプル通りに書けばハート形が出来上がります。
<svg width="100" height="100">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30z" />
</svg>
無限の描画力を持ちそうなpathならばベン図も描画できそうです。
ベン図描画戦略
今回はベン図を以下の図のように3つに分離します。(※図はパワーポイントで作成しているので適当です)
それぞれを作成して組み合わせたらそれぞれの領域にイベントを持たせられるベン図になりそうです。
ではどうやってSVGにするのでしょうか？
円弧
d#楕円円弧曲線にある通り、円弧を二つ書けば円になります。
例は楕円ですが、縦半径と横半径が同じ楕円が円になります。
例を半径同じに書き換えて、始点Mを調節して動かしてみます。
<svg width="200" height="200">
<path
fill="none"
stroke="red"
d="
M 100,75
A 50,50 0 1 0 100,125
" />
<path
fill="none"
stroke="lime"
d="
M 100,75
A 50,50 0 1 1 100,125
" />
<path
fill="none"
stroke="purple"
d="
M 100,75
A 50,50 0 0 1 100,125
" />
<path
fill="none"
stroke="pink"
d="
M 100,75
A 50,50 0 0 0 100,125
" />
</svg>
出来てそうです！
M
MoveTo パスコマンドにある通り、始点を(x,y)で示します。
とりあえず真ん中に重なりを置きたいので $x = width/2 = 200$ , 円の中心が $y=100$ に来ているものと考え、
大体半径の半分くらいのところで交わっていてほしいので $y = 100 - (半径(=50)/2) = 75$ としました。
円弧の終点は A コマンドで指定するのですが、小円弧にするか大円弧にするかも A コマンドでの指定となるため、4種類の線はいずれも同じ始点を持つことになります。
A
d#楕円円弧曲線にある通り、
A 半径x,半径y 角度 大円弧フラグ 掃引フラグ 終点x,終点y
と指定します。
半径はx, yどちらも50で、角度は特につけないので0。
円は上下の対称性があるため、 $x$ はそのまま100, $y = 100 + (半径(=50)/2) = 125$ より終点を125としています。
掃引フラグは
時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くか
なのですが、大円弧フラグはなんなのでしょうか？
チュートリアルに円弧について記載があるので見てみます。
これは単純に円弧が 180 度より大きいか小さいかを決定します
とある通り、小円弧にするか大円弧にするかを決めています。
素晴らしい図があるのでそのまま使わせてもらいます。
large arc sweep flag が大円弧フラグを、 sweep flag が掃引フラグを示しています。
グループ化
クリックイベントを付けたいのでまとめます。
g tagを用います。
ここからは定義の順番が重要で、中の共通部分を後に定義してあげないと後ろに隠れてしまいます。
試しにやってみます。
<svg width="200" height="200">
<g>
<path
fill="black"
d="
M 100,75
A 50,50 0 0 1 100,125
" />
<path
fill="black"
d="
M 100,75
A 50,50 0 0 0 100,125
" />
</g>
<path
fill="red"
d="
M 100,75
A 50,50 0 1 0 100,125
" />
<path
fill="lime"
d="
M 100,75
A 50,50 0 1 1 100,125
" />
</svg>
下に定義されたものが上位レイヤーになります。
<svg width="200" height="200">
<path
fill="red"
d="
M 100,75
A 50,50 0 1 0 100,125
" />
<path
fill="lime"
d="
M 100,75
A 50,50 0 1 1 100,125
" />
<g>
<path
fill="black"
d="
M 100,75
A 50,50 0 0 1 100,125
" />
<path
fill="black"
d="
M 100,75
A 50,50 0 0 0 100,125
" />
</g>
</svg>
また、Next.jsでクリックイベントを付けたときに知ったのですが、 fill=none だと空白部分にクリックイベントがつかないので色付けするなどして空白を埋めてあげた方がいいです。背景色と同じでも大丈夫です。 (例えば背景色が白なら、 fill="white" )
パーセンテージに応じて共通部分の大きさを変える
せっかく半径を100で行っているので、下記図の青線部分を $100-現在のパーセンテージ$ としてあげればよさそうと考えました。0%なら半径がそのまま残るし、100%になったら2円の中心が重なって表示される円が1つに見えるようになるためです。
動かしてみて違いそうだったらまた別の方法を考えようとしていましたが、この方法でそれっぽくなりました。
面積的にも本当にパーセンテージ通りになっているのかは未証明ですし、証明する方法が思いつきません。
円の半径が異なる場合はこの方法では円の中心が重なる前に片方の円がすっぽり内包されてしまうので、もし正しかったとしても今回限りのやり方でしょうね。
しかし青色部分はsvgで指定できません。
指定できるのは円弧を描くための始点と終点です。
x座標はsvgの横幅の中心に持っていきたい。となるとy座標を求めればいい・・・
ならば、赤線部分を求めて、円の中心y座標 (=100) に足し引きすれば始点 $y_{top}$ 及び終点 $y_{bottom}$ を割り出せますね。
\displaylines{
y_{top} = 100 - 赤線の長さ \\
y_{bottom} = 100 + 赤線の長さ
}
でも赤線部分ってどう求めればいいのでしょうか？
ここに答えがありました。
三平方の定理です。
「Q. 三平方の定理ってなんの役に立つんだよ」の答えがここにありました。
「A. ベン図を書くときに使う」です。
斜辺は半径なので100, 底辺は100から%を引いた値になります。
ここから赤線の長さをhとして、
h = \sqrt{(半径)^2+(半径-\%)^2}
これをTypeScriptに落とし込んだのが下記関数になります。
function pythagoreanTheorem(radius: number, percent: number): number {
const centerHeight = radius - percent;
return Math.sqrt(radius * radius - centerHeight * centerHeight);
}
あとはここまでを実装に落とし込んで、ちょろっとクリックイベントを生やしてあげれば、 #実装 の章にある通りになります。
const CENTER_Y = 105;
これまで分かりやすさ
優先で、円の中心のy座標を100と散々述べてきましたが、svg領域のheightが210なので、100だと上のstrokeが途切れてしまいます。
なので105にしています。
おわりに
ここまで読んでいただきありがとうございました。
数学に対する理解度がもろに問われ、大変苦しかったですがその分実装できたときの喜びは大きかったです。
最初は3つまでなら何とかなるかもな～(４つだと楕円の重なりが複雑だから厳しそう)と考えていました。
しかし流石に実装してわかりました。3つでもバカむずい！
3つ
4つ
なので今回は2つの円のベン図のみとします。
以上、Progaku Advent Calendar 20232日目でした。