How do I convert my scale of numbers (0-50,000) to a radial progress chart number?

Question

I tried setting a linear range and domain to convert it, but that doesn't seem to work. I just need to create a completion chart. 50,000 being 100% and a current value of (lets say 25,000). How do I convert my normal values to radians?

Here's what I have so far:

var pieScale = d3.scale.linear().range([0, 8]);
    pieScale.domain([0, 50000]);

    var svg = d3.select("#redCircle").append("svg")
                .attr({
                    'preserveAspectRatio': 'xMinYMin meet'
                });


    var marginArc = d3.svg.arc()
                        .startAngle(0)
                        .innerRadius(0)
                        .outerRadius(100);

    var marginArcSvg = svg.append("path")
                            .attr({
                                "d": function (d) {
                                    marginArc.endAngle((2 * Math.PI) * pieScale(25000));
                                    return marginArc();
                                },
                                "transform": function (d) {
                                    return "translate(" + 100 + ", " + 100 + ")"
                                },
                                "fill": "white"
                            });

100% will be then 1 full turn? if so the factor will be 100% = 6.283185307. 50% = 3.141592654. and so on... — DIEGO CARRASCAL, May 03 '16 at 14:40

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

Current value divided by 50,000 gives you the percentage around the circle. Then convert that to radians with the following pseudo-code

var radians = percentage * 2 * Math.PI

Source: HTML5: Fill circle/arc by percentage

edited May 23 '17 at 12:23

Community

1
1

answered May 03 '16 at 14:40

Feathercrown

2,547
1
16
30

How do I convert my scale of numbers (0-50,000) to a radial progress chart number?

1 Answers1