1

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 me a while to get to this stage, and the graph now adapts to the data in all the ways I need it to.

However, I have 2 questions:

1) I need to create 2 arc diagrams - one above the black rectangles (named buckets in the code) and one below. As a temporary fix, I have used css3 3D transforms to flip one of the arc diagrams over on the x-axis, but the browser support is flaky at best. It does work, only in Chrome, and sometimes you have to refresh, open dev tools, or resize the fiddle frame for it to kick in. I'd like to do it properly with d3.

I think the code which creates the red arcs (the lower half of a circle) is this:

var radians = d3.scale.linear()
                .range([Math.PI / 2, 3 * Math.PI / 2]);

I found if I remove the last / 2 it displays a full circle, however I can't get it to display only the top half in my drawTop function.

2) I currently duplicate 2 large functions for the 2 arc diagrams, drawTop and drawBtm. The only differences between the two are the data arrays (good_jumps and bad_jumps), the container id, and the radians logic above, if that can get solved. Is there a way I can combine these into one so I'm not duplicating the logic?

I'm fairly new to JS so please let me know if there are any obvious blunders in the code :) Also, there's no possibility to alter the json as it comes from an external api.

VividD
  • 10,456
  • 6
  • 64
  • 111
daviestar
  • 4,531
  • 3
  • 29
  • 47

1 Answers1

2

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.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • I see you use concat and join my 2 arrays. If I understand concat correctly, this is now just one big array of objects. How does the new function know which g (ie. top or btm) to put the paths in? – daviestar Dec 05 '13 at 14:39
  • There's just one `g` element now. You can distinguish the two types of arcs by their class (`.top` and `.btm`). – Lars Kotthoff Dec 05 '13 at 14:50