forked from AbnormalDistribution-2020's block: Custom circular axis
xxxxxxxxxx
<meta charset="utf-8">
<style type="text/css">
text {
font-family: TW Cen MT;
font-size: 26px;
}
</style>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="d3-scale-radial.js"></script>
<script>
var margins = {top:20, bottom:300, left:30, right:100};
var height = 600;
var width = 900;
var diameter = 400;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+diameter+","+diameter+")");
var colorScale = d3.scaleOrdinal(["#003366","#366092","#4f81b9","#95b3d7","#b8cce4","#e7eef8"]);
var colorScale2 = d3.scaleOrdinal(["#f6d18b","#e4a733","#ffffcc"]);
var xScale = d3.scaleLinear()
.range([0, (2*Math.PI)])
.domain([0,1]);
var piScale = d3.scaleRadial()
.range([275, 300])
.domain([0,1]);
var statsEquity = [
{'type':'stock','value':450, 'fee':.33},
{'type':'mutual fund','value':850, 'fee':.4},
{'type':'commodity','value':200, 'fee':.86},
{'type':'index','value':2000, 'fee':.1}
];
var statsFI = [
{'type':'st bond','value':400, 'fee':NaN},
{'type':'lt bond','value':2000, 'fee':NaN},
{'type':'mmf','value':1200, 'fee':.2}
];
var dataEquity = d3.pie().sort(null).value(function(d) { return d.value;})(statsEquity);
var segmentsEquity = d3.arc()
.innerRadius(0)
.outerRadius(200);
var sectionsEquity = graphGroup.selectAll('path')
.data(dataEquity)
.enter()
.append('path')
.attr('d', segmentsEquity)
.style('fill', function(d) {return colorScale(d.data.type);});
var dataFI = d3.pie().sort(null).value(function(d) { return d.value;})(statsFI);
var segmentsFI = d3.arc()
.innerRadius(200)
.outerRadius(250);
var sectionsFI = graphGroup.selectAll('.pathFI')
.data(dataEquity)
.enter()
.append('path')
.attr('class','pathFI')
.attr('d', segmentsFI)
.style('fill', function(d) {return colorScale2(d.data.type);});
var axisLine = graphGroup.append("circle")
.attr("r", 275)
.style("fill", "none")
.style("stroke", "black");
var axisGroup = graphGroup.selectAll(null)
.data(d3.range(0, 1.00, 0.05))
.enter()
.append("g")
.attr("transform", function(d,i) {
if (i<11) {
return "rotate(" + (-90 + (d * 360)) + ")";
}
if (i>10) {
return "rotate(" + (-90 + (d * 360)) + ")";
}
});
axisGroup.append("line")
.attr("x1", 275 - 4)
.attr("x2", 275 + 4)
.style("stroke", "black");
axisGroup.append("text")
.attr("x", 275 + 8)
.attr('y',4)
.attr("transform", function(d) { return d > 0.5 ? "rotate(180, 283, 4)" : null;})
.attr("text-anchor", function(d){ return d > 0.5 ? "end" : "start"})
.text(function(d) {return Math.round(d*100)/100; });
console.log(statsEquity.filter(function(d) {return d.fee!==NaN; }))
var circles = graphGroup.selectAll('.feeCirc')
.data(statsEquity.filter(function(d) {return d.fee!==NaN; }))
.enter()
.append('circle')
.attr('class','feeCirc')
.attr('cx', function(d) {
return piScale(0) * -Math.sin(xScale(d.fee) + Math.PI)
})
.attr('cy', function(d) {
return piScale(0) * Math.cos(xScale(d.fee) + Math.PI)
})
.attr('r', 8)
.style('fill', function(d) { return colorScale(d.type)});
</script>
https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js