Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 19, 2020 02:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Hirosaji/334a811d9705d54e4bd697b7fb2480c3 to your computer and use it in GitHub Desktop.
d3v4 - Stack Image Chart
# d3v4 - Stack Image Chart
license:
mit
scrolling:
no
border:
yes
<!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>
index rate
技術系(IT/通信) 7.75
専門職 6.68
技術系(電気/機械) 4.72
技術系(建築/土木) 3.98
営業系 2.34
技術系(メディカル) 2.11
クリエイティブ系 1.97
企画・事務系 1.76
販売/サービス系 1.27
技術系(化学/食品) 1.21
事務・アシスタント系 0.21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment