intertwingly

Looking into Asset Rebalancing, I thought a visual aide would be helpful.

First, a simple Rails partial for doing a pie chart:

total = chart.map(&:last).sum
r = 0

xml.svg :xmlns=>'http://www.w3.org/2000/svg', :viewBox=>'-100 -100 200 200' do
  xml.circle :r=>96, :stroke=>"#000", :fill=>"#000"
  for color, title, value in chart
    p1 = [Math.sin(r)*95, -Math.cos(r)*95].map(&:round).join(',')
    r += Math::PI*2 * value/total
    p2 = [Math.sin(r)*95, -Math.cos(r)*95].map(&:round).join(',')
    xml.path :d=>"M#{p1} A95,95 0 0 1 #{p2} L0,0 Z",
      :fill=>color, :title=>title
  end
end

Then a jQuery script which causes the corresponding slice to “pop out” when you hover over a row in an adjoining table.

<script>
  $.each($('tr'), function() {
    var label = $(this).find('td:nth-child(2)').text();
    var path = $('path[title="' + label + '"]');
    if (path.length == 0) return;

    $(this).
      mouseover(function() {
        path.attr({'stroke-width': '7', 'stroke': path.attr('fill')});
        path.parent().append(path);
      }).
      mouseout(function() {
        path.removeAttr('stroke-width').removeAttr('stroke');
      });
  });
</script>