Arc Chart - with various segment indentions/heights

Question

LATEST ARC CHART 1 - http://jsfiddle.net/NYEaX/699/ ***

I'm developing a set of arc charts.

^ this is the latest version I have.

My first problem - is that when a new set of data comes in - the animation appears flickery.

I am also interested in varying the inner-radius/outer-radius per segment.

Would I just provide a modulus on the i in the following code

getArc: function(){
            var that = this;

            var arc = d3.svg.arc()
                    .innerRadius(function(d, i){
                        return that.radius;
                    })
                    .outerRadius(function(d){
                        var maxHeight = 100;
                        var ratio = (d.height/maxHeight * 100)+that.radius;
                        return ratio;
                    })
                    .startAngle(function(d, i){
                        return d.startAngle;
                    })
                    .endAngle(function(d, i){
                        return d.endAngle;
                    });

            return arc;
        }

I've corrected the application.

I've managed to now create a shift on the various segments.

http://jsfiddle.net/NYEaX/91/

The attempt I am trying to make

However, I am trying to now use the value of the segments to alter their length. So I am wanting to create an arc that looks like the picture example.

This is the latest example I've got.

http://jsfiddle.net/NYEaX/92/

and here is the code - I am unsure how to get the total length of all of the arcs to provide the correct length via startAngle/endAngle to complete the solution.

setData: function(data, isSorted){

            var diameter = 2 * Math.PI * this.radius;

            var localData = new Array();

            var displacement = 0;
            var oldBatchLength = 0;


            var totalSum = 0;
            $.each(data, function(index, value) {
                $.each(value.segments, function( ri, va) {
                    totalSum+= va.height;
                });
            });


            $.each(data, function(index, value) {               
                var riseLevels = value.segments;
                //var riseLevelCount = riseLevels.length;

                //var arcBatchLength = 2*Math.PI;
                //var arcPartition = arcBatchLength/riseLevelCount;

                    $.each(riseLevels, function( ri, value ) {

                        if(oldBatchLength !=undefined){             
                            displacement+=oldBatchLength;
                        }

                        var segmentValue = value.height;

                        //var ratio = value.height/totalSum;

                        var arcBatchLength = segmentValue;//ratio*2*Math.PI;
                        var arcPartition = arcBatchLength/totalSum;                     


                        var startAngle = (ri*arcPartition);
                        var endAngle = ((ri+1)*arcPartition);

                        if(index!=0){
                            startAngle+=displacement;
                            endAngle+=displacement;
                        }

                        riseLevels[ri]["startAngle"] = startAngle;
                        riseLevels[ri]["endAngle"] = endAngle;
                        riseLevels[ri]["index"] = ri;   



                        oldBatchLength = arcBatchLength;
                    });
                        //oldBatchLength = arcBatchLength;      

                localData.push(riseLevels);
            });

            var finalArray = new Array();

            $.each(localData, function(index, value) {
                $.each(localData[index], function(i, v) {
                    finalArray.push(v);
                });
            });

            console.log("finalArray", finalArray);

            return finalArray;

        }

The flicker is because of the "bounce" tween. And it seems that you're varying the outer radius by segment already? — Lars Kotthoff
@The Old Country. Please do not create answers to give more information about your question; instead, edit the question (the link to the edit page is at the bottom of the question). When people see a question with three answers in the activity list, they think it doesn't need any more attention! — AmeliaBR
I've added a cinemetric based animation chart version of this - jsfiddle.net/NYEaX/137 — The Old County

The Old County The Old County · Accepted Answer · 2014-02-14T11:39:27

I've got closer to fixing the arc lengths in reference to their values. But the displacement of the arcs is not correct.

http://jsfiddle.net/NYEaX/100/

If more data is exposed in the grey arcs - it breaks. Similar if you switch over to the green/yellow/green arcs.

I've tried to simplify the application further to try and identify the problem.

$.each(data[0].segments, function(ri, value) {
                //console.log("ri", ri);

                if(oldBatchLength !=undefined){             
                    displacement+=oldBatchLength;
                }

                var segmentValue = value.value;

                var fraction = segmentValue/segmentValueSum;

                var arcBatchLength = fraction*2*Math.PI;
                var arcPartition = arcBatchLength;      

                //console.log("arcBatchLength", arcBatchLength);
                //console.log("oldBatchLength", oldBatchLength);
                //console.log("displacement", displacement);

                var startAngle = (ri*arcPartition);
                var endAngle = ((ri+1)*arcPartition);

                if(ri!=0){
                    displacement-=arcBatchLength;//not sure its right

                    startAngle+=displacement;
                    endAngle+=displacement;
                }

                data[0].segments[ri]["startAngle"] = startAngle;
                data[0].segments[ri]["endAngle"] = endAngle;
                data[0].segments[ri]["index"] = ri;

                oldBatchLength = arcBatchLength;
            });

Arc Chart - with various segment indentions/heights

1 Answers