forked from AbnormalDistribution-2020's block: Custom circular axis
Created
January 9, 2020 09:09
-
-
Save GerardoFurtado/1cafc4d6d1b498454dfe73572d7a946d to your computer and use it in GitHub Desktop.
Custom circular axis
This file contains hidden or 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
| license: mit |
This file contains hidden or 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 hidden or 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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment