d3v4 - Stack Image Chart

[Gist] https://gist.github.com/Hirosaji/334a811d9705d54e4bd697b7fb2480c3

<!DOCTYPE html>
<html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
		html, body,
		#chart {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="chart"></div>
	<script type="text/javascript">

var imgPath = "human.png";
		var imgElement = new Image() ;
		imgElement.src = imgPath;
		imgElement.onload = function(){
			var imgWidth = imgElement.naturalWidth,
				imgHeight = imgElement.naturalHeight,
				imgRatio = imgWidth / imgHeight;
			drawImageStackChart(imgPath, imgRatio);
		};

function drawImageStackChart(imgPath, imgRatio){

var targetWidth = window.innerWidth,
				targetHeight = window.innerHeight;

var margin = {top: 40, right: 20, bottom: 100, left: 180},
			    width = targetWidth - margin.left - margin.right,
			    height = targetHeight - margin.top - margin.bottom;

var xScale = d3.scaleLinear()
			    .range([0, width]);
			var yScale = d3.scaleBand()
			    .rangeRound([height, 0])
			    .padding(0.1);

var xAxis = d3.axisBottom(xScale);
			var yAxis = d3.axisLeft(yScale);

var svg = d3.select("#chart").append("svg")
			  .attr("width", width + margin.left + margin.right)
			  .attr("height", height + margin.top + margin.bottom)
			  .append("g")
			  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("job_category.tsv", function(tsvData) {

var values = tsvData.map(function(e){ return Number(e.rate) }),
				    indexes = tsvData.map(function(e){ return e.index });

xScale.domain([0, d3.max(values)+1]);
				yScale.domain(indexes);

svg.append("g")
				    .attr("class", "clipPath")
				    .selectAll("defs")
				    .data(data)
				    .enter()
				    .append("defs")
				    .append("clipPath")
				    .attr("id", function(d, i){ return "clipping"+i })
				    .append("rect")
					.attr("x", function(d) { return xScale(d.order)-5; })
					.attr("y", function(d) { return yScale(d.index); })
					.attr("height", yScale.bandwidth())
				    .attr("width", function(d){
						var thisHeight = this.getAttribute("height"),
							thisWidth = Number(thisHeight) * imgRatio;
						if(d.isLast) {
							var formatWidth = thisWidth * parseFloat("0."+(String(d.rate)).split(".")[1]);
							return formatWidth;
						}
						else {
							return thisWidth;
						}
					})

svg.append("g")
				    .attr("class", "x axis")
				    .attr("transform", "translate(0," + height + ")")
				    .call(xAxis)
				    .append("text")
				    .attr("x", 6)
				    .attr("dy", ".71em")
				    .style("text-anchor", "end")
				    .text("Charts that day");
				svg.append("g")
				    .attr("class", "y axis")
				    .attr("transform", "translate(0,0)")
				    .call(yAxis)
				    .selectAll("text")
				    .text(function(d) { return d; });

svg.append("g")
					.attr("class", "image")
					.selectAll("image")
					.data(data)
					.enter().append("svg:image")
					.attr("class", "img")
					.attr("href", imgPath)
					.attr("clip-path", function(d, i){ return "url(#clipping"+i+")"; })
					.attr("x", function(d) { return xScale(d.order)-5; })
					.attr("y", function(d) { return yScale(d.index); })
					.attr("height", yScale.bandwidth());

});
		}

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js