Custom circular axis

forked from AbnormalDistribution-2020's block: Custom circular axis

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
text {
  font-family: TW Cen MT;
  font-size: 26px;
}
</style>
<body>

</body>

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");

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