D3 Kit Donut Chart

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/DarkMarmot/kodama/master/kodama.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid" id="main">
    <div class="row">
        
    </div>
</div>

CSS

#main{
  margin: 20px;
}
.arc path:hover{
  fill: darkred;
}

CoffeeScript

###
Some Examples
http://jsfiddle.net/Nw62g/1/
http://jsfiddle.net/Nw62g/3/
###

defaultThemeConfig = 
  frame: 
    padding: "6px",
    #background: 'linear-gradient(to top, rgb(16, 74, 105) 0%, rgb(14, 96, 125) 90%)',
    background: "black",
    'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif',
    #'border': '1px solid rgb(57, 208, 204)',
    color: 'rgb(245,240,220)',
    'border-radius': '4px',
    'font-size': '12px',
    'box-shadow': '0px 1px 3px rgba(0,20,40,.5)'
    title: {'text-align': 'center', 'padding': '4px'},
    item_title: {'text-align': 'right', 'color': 'rgb(220,200,120)'},
    item_value: {'padding': '1px 2px 1px 10px', 'color': 'rgb(234, 224, 184)'}
    options: null

d3.kodama.themeRegistry('kodama1', defaultThemeConfig)

attachKodamaTip = (sel) ->
  makeTipData = (d) ->
    title: "(#{d.data.x}, #{d3.format('%.1f')(d.data.y)})"
    theme: "kodama1"
    distance: 10
  sel.call d3.kodama.tooltip().format(makeTipData)
  #d3.select("div[name='kodamaTip']")
  # .append("div.arrow-down")
    
N = 5
make_data = (N) ->
  alpha = (i) -> String.fromCharCode(i + 65)
  d3.range(N).map (i) -> {x: alpha(i), y: i}
    
make_random_data = (N) ->
  alpha = (i) -> String.fromCharCode(i + 65)
  d3.range(N).map (i) -> {x: alpha(i), y: Math.random()}
    
mydata = make_data(N)
console.log JSON.stringify(mydata)
donutChartConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  S =
    x: d3.scale.linear()
    y: d3.scale.ordinal()
    c: d3.scale.category20()
  A =
    x: (d) -> d.x
    y: (d) -> d.y
  layers.create(['donut', 'statistic'])
  layers.get('statistic').append('text.stat')
  visualize = ->
    data = skeleton.data()
    opts = skeleton.options()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    radius = d3.min([W, H])/2
    # Generator
    arc = d3.svg.arc()
     .outerRadius(radius - 10)
     .innerRadius(radius - 40)
    # Layout
    pie = d3.layout.pie()
      .value(A.y)
        
    g_arc =...