Old school D3 from simpler times

All examples By author By category About

shimizu

Full window Github gist

人型グラフ

<html>

<style>
html, body{
	width:100%;
	height:100%;
}
svg {
	width: 960px;
	height:500px;
}

#rangeX {
	position: absolute;
	top: 25px;
	left: 25px;
	width: 200px;
}

</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<body>
<input id='rangeX' type='range' min='0', max='1.0' step='any' value="0.5" list="exlist"/>
<datalist id="exlist">
	<option value="1"></option>
	<option value="0.75"></option>
	<option value="0.5"></option>
	<option value="0.25"></option>
	<option value="0"></option>
</datalist>
<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="https://www.w3.org/1999/xlink" xlink:href="#manIcon" x="260" y="0" 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>

<script>
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
	})
}
</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js