Last active
January 9, 2020 05:46
-
-
Save AbnormalDistribution-2020/d4eabff2f2b57d1ba97e1a3b2280a634 to your computer and use it in GitHub Desktop.
Custom circular axis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(global, factory) { | |
| typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) : | |
| typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) : | |
| (factory(global.d3 = global.d3 || {}, global.d3)); | |
| }(this, function(exports, d3Scale) { | |
| 'use strict'; | |
| function square(x) { | |
| return x * x; | |
| } | |
| function radial() { | |
| var linear = d3Scale.scaleLinear(); | |
| function scale(x) { | |
| return Math.sqrt(linear(x)); | |
| } | |
| scale.domain = function(_) { | |
| return arguments.length ? (linear.domain(_), scale) : linear.domain(); | |
| }; | |
| scale.nice = function(count) { | |
| return (linear.nice(count), scale); | |
| }; | |
| scale.range = function(_) { | |
| return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt); | |
| }; | |
| scale.ticks = linear.ticks; | |
| scale.tickFormat = linear.tickFormat; | |
| return scale; | |
| } | |
| exports.scaleRadial = radial; | |
| Object.defineProperty(exports, '__esModule', {value: true}); | |
| })); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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 "rotate(" + 0 + ")";}) | |
| .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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment