D3 Arc Diagram - Add Top Semi Circles

http://jsfiddle.net/pRkpL/ and http://fiddle.jshell.net/pRkpL/show/ I am making an arc diagram which is based heavily on this demo: http://bl.ocks.org/sjengle/5431779. It's taken

Solution 1:

To make the arcs appear on top of the boxes, you just need to change the output range of your radians scale to cover the top half:

radians.range([-Math.PI / 2, Math.PI / 2]);

Regarding the second question, one way of doing this is to add another attribute to your data that allows to distinguish between the two types of arcs, e.g. .good. Once you've done that, you can switch on the value of that attribute to decide the class of the added path and the range of radians, which are the only differences between the arcs.

Complete jsfiddle here.