【D3.js】人型グラフ

example

スライドバーを動かすと、人型アイコンの青色のエリアが上下します。
こういうチャートを何と呼ぶんでしょうね？　よく見かけるわりに名称が分からなかったのでとりあえず「人型グラフ」としておきました。正式な名前を知っている方いらっしゃいましたら教えてください。
ちなみに、可視化という点からすると、あまりよろしくない表現方法だったりします。

サンプル

今回はインラインsvgの部分が多いので、svgパートとJavaScriptパートで分けて掲載します。

<svg  viewBox="0 0 960 500">
<def>
    <g id="manIcon">
        <path d="M197,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V282h21v194c0,14,6.833,21,20.5,21s20.5-7,20.5-21
            V149h10v121c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-14-4.667-25.5-14-34.5S305,97,289,97h-81
            c-15.333,0-27.833,4.333-37.5,13S156,130,156,144v127c0,6.667,2.667,11.333,8,14c5.333,2.667,10.5,2.667,15.5,0s7.5-7.334,7.5-14
            V149h10V476z"/>
        <path d="M205,42.5c0,11.667,4.167,21.667,12.5,30s18.333,12.5,30,12.5S269,80.833,277,72.5s12-18.333,12-30
            s-4-21.667-12-30S259.167,0,247.5,0s-21.667,4.167-30,12.5S205,30.833,205,42.5z"/>
    </g>
</def>
<mask id="mask" maskUnits="userSpaceOnUse" x="0" y="0" width="960" height="500">
    <use   xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#manIcon" x="260" y="2" fill="white" transform="translate(-25,-0) scale(1,1)"/>
</mask>
<rect  mask="url(#mask)" x="0" y="0" width="960" height="500" fill="gray" />
<rect id="bar" mask="url(#mask)" x="0" y="250" width="960" height="250" fill="blue" />
</svg>

<def>

<path d="M197,476c0,14,6.833,21,20.5,21s20.5-7,20.5-21V282h21v194c0,14,6.833,21,20.5,21s20.5-7,20.5-21

V149h10v121c0,7.334,2.5,12.667,7.5,16s10.167,3.333,15.5,0s8-8.667,8-16V145c0-14-4.667-25.5-14-34.5S305,97,289,97h-81

c-15.333,0-27.833,4.333-37.5,13S156,130,156,144v127c0,6.667,2.667,11.333,8,14c5.333,2.667,10.5,2.667,15.5,0s7.5-7.334,7.5-14

V149h10V476z"/>

<path d="M205,42.5c0,11.667,4.167,21.667,12.5,30s18.333,12.5,30,12.5S269,80.833,277,72.5s12-18.333,12-30

s-4-21.667-12-30S259.167,0,247.5,0s-21.667,4.167-30,12.5S205,30.833,205,42.5z"/>

</g>

</def>

</mask>

</svg>

def要素の中で指定しているのが人型のテンプレート(path)です。
use要素にテンプレートを設定し、マスクにします。
次に灰色のrect要素と青色のrect要素を用意し、それぞれにマスクを設定します。
つまり人型に切り取っているわけですね。
並び順で下になる要素が手前のレイヤーになるので、灰色の人型の上に青色の人型が重なった状態になっています。

var rangeX = document.querySelector('#rangeX');   
var h = 500;

rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = slide;

function slide(){
    var barH = h * rangeX.value;
    var bar = d3.select("#bar");
    bar.transition().attr({
        "y":h - barH,
        "height":barH
    })
}

var rangeX = document.querySelector('#rangeX');

var h = 500;

rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = slide;

function slide(){

var barH = h * rangeX.value;

var bar = d3.select("#bar");

bar.transition().attr({

"y":h - barH,

"height":barH

})

}

後は、スクリプトで手前の青色の人型をスライド操作に適用してあげれば完成です。
#barが青色の人型です。スライドのvalue(0〜1)に合わせてy座標と高さを変化させています。

プログレスバーなどにも使えそうなので、何気に汎用性高いかも？

サンプル

投稿者: shimizu