|
<!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); |
|
|
|
var data = [] |
|
tsvData.forEach(function(e, i){ |
|
for(j=0; j<Math.ceil(e.rate); j++) { |
|
var isLast = (Math.ceil(e.rate)-1===j) ? true : false; |
|
data.push({ |
|
"index": e.index, |
|
"order": j+1, |
|
"rate": e.rate, |
|
"isLast": isLast |
|
}) |
|
} |
|
}) |
|
|
|
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> |