material_raingular-d3 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 0075ac4a54d06c4290a26475164d8a97c976db50
+  data.tar.gz: 20bf12b579c0ab844fdaadd5459f0fafc5f4b1e5
+SHA512:
+  metadata.gz: ed78e9a1dedae5d716490c6ef9d92efaf905aabf5859cc26986f4ddbd29820c7369eb276878bfb9a5b8da0fa77a1aaa8253395fea97af5b0234fa3d58bcb8607
+  data.tar.gz: 568a7533f494b9d79a8cf4b5f52448c6fccf05aebceb05d6d3464f441f49d5a007c1a3a8fe2a17fb254b28533525a07e8aa0ddfc8c0e63021441cc96f2873b8c

data/.gitignore

@@ -0,0 +1,17 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+.DS_Store
+mkmf.log
+# Ignore Sublime Text's profile files
+*.sublime*

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at cmoody@transcon.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in material_raingular-d3.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Chris Moody
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,62 @@
+# MaterialRaingular::D3
+
+MaterialRaingular::D3 adds d3 v4.4 directives to your MaterialRaingular application
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'material_raingular-d3'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install material_raingular-d3
+
+## Usage
+
+```slim
+  mr-d3-ring-widget
+    h3
+      | Bio Billability
+    mr-d3-ring ring-data="[50,10]"
+  mr-d3-pie-chart d3-data="{bio: 10, planning: 30, cr: 12}"
+  mr-d3-horizontal-bar-chart.test ng-init="dataSet = [{l: 'a',v: 23},{l: 'b',v: 13},{l: 'c',v: 21},{l: 'd',v: 14},{l: 'e',v: 37},{l: 'f',v: 15},{l: 'g',v: 18},{l: 'h',v: 34},{l: 'i',v: 30}]"
+    mr-d3-bar.thingy ng-repeat="data in dataSet" mr-d3-label="data.l" mr-d3-value="data.v"
+    mr-d3-bar mr-d3-label="'this'" mr-d3-value="'200'"
+    mr-d3-x-axis ng-init="domain = [0,37]" mr-d3-label="'Value'" mr-d3-domain='domain'
+
+    mr-d3-stacked-bar mr-d3-label="'CA'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'AZ'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-y-axis mr-d3-label="'Arbitrary'"
+
+  mr-d3-bar-chart.test ng-init="dataSet = [{l: 'a',v: 23},{l: 'b',v: 13},{l: 'c',v: 21},{l: 'd',v: 14},{l: 'e',v: 37},{l: 'f',v: 15},{l: 'g',v: 18},{l: 'h',v: 34},{l: 'i',v: 30}]"
+    mr-d3-bar.thingy ng-repeat="data in dataSet" mr-d3-label="data.l" mr-d3-value="data.v"
+    mr-d3-bar mr-d3-label="'this'" mr-d3-value="'200'"
+    mr-d3-y-axis ng-init="domain = [37,0]" mr-d3-label="'Value'" mr-d3-domain='domain'
+
+    mr-d3-stacked-bar mr-d3-label="'CA'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'AZ'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-x-axis mr-d3-label="'Arbitrary'"
+```
+
+## Development
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/material_raingular-d3. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "material_raingular/d3"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/assets/javascripts/material_raingular/d3/bar/directive.coffee

@@ -0,0 +1,8 @@
+class MaterialRaingular.d3.Directives.MrD3Bar extends AngularDirective
+  @register(MaterialRaingular.d3.app)
+  restrict: "E"
+  require: ['?^^mrD3StackedBar','?^^mrD3HorizontalBarChart','?^^mrD3BarChart']
+  transclude: true
+  replace: true
+  template: '<rect></rect>'
+  

data/lib/assets/javascripts/material_raingular/d3/bar/linkmodel.coffee

@@ -0,0 +1,15 @@
+class BarModel extends AngularLinkModel
+  @inject('$parse')
+  initialize: ->
+    @parent = @$controller.compact()[0]
+    @bar = d3.select(@$element[0])
+    @label = @$parse @$attrs.mrD3Label
+    @size  = @$parse @$attrs.mrD3Value
+    @$scope.$watch @size.bind(@),  @changeBar.bind(@)
+    @$scope.$watch @label.bind(@), @changeBar.bind(@)
+    @changeBar()
+  changeBar: ->
+    @bar.attr('raw-size',@size(@$scope))
+    @bar.attr('label',   @label(@$scope))
+    @parent.adjustBars()
+  @register(MaterialRaingular.d3.Directives.MrD3Bar)

data/lib/assets/javascripts/material_raingular/d3/bar_chart/controller.coffee

@@ -0,0 +1,34 @@
+class MaterialRaingular.d3.Directives.MrD3BarChartModel extends AngularDirectiveModel
+  @inject('$timeout','$element','$attrs')
+  initialize: ->
+    @options = @$scope.$eval(@$attrs.d3Options || '{}')
+    @options.margins = Object.merge({top: 20,right: 20, left: 70, bottom: 50},@options.margins || {})
+    @svg = d3.select(@$element[0])
+    @holder = @svg.select('g')
+    @holder.attr('transform',"translate(#{@options.margins.left},#{@options.margins.right})")
+    @xAxis = d3.scaleBand().rangeRound([0,@width()]).padding(0.1)
+    @yAxis = d3.scaleLinear().range([0,@height()])
+  indexOf: (bar) ->
+    @bars().nodes().indexOf(bar)
+  bars: ->
+    nodes = @holder.selectAll('svg > g > rect').nodes()
+    d3.selectAll(nodes.concat(@holder.selectAll('g.stacked').nodes()))
+  adjustBars: ->
+    @xDomain = []
+    for bar in @bars().nodes()
+      rect = d3.select(bar)
+      @xDomain[@indexOf(bar)] = rect.attr('label')
+      height = (rect.attr('raw-size') / @maxValue()) * @width()
+      rect.attr('y',@height() - height)
+      rect.attr('height',height)
+    @xAxis.domain(@xDomain)
+    for rect in @bars().nodes()
+      d3.select(rect).attr('width',@xAxis.bandwidth())
+      d3.select(rect).attr('x',@xAxis(@xDomain[@indexOf(rect)]))
+    @_xAxis?.call(d3.axisBottom(@xAxis))
+  height:   -> @$element[0].clientHeight - @options.margins.top  - @options.margins.bottom
+  width:    -> @$element[0].clientWidth  - @options.margins.left - @options.margins.right
+  maxValue: ->
+    val   = @yAxis?.domain().max()
+    val ||= (@bars().nodes().map (rect) -> d3.select(rect).attr('raw-size')).max()
+    val

data/lib/assets/javascripts/material_raingular/d3/bar_chart/directive.coffee

@@ -0,0 +1,21 @@
+# //= require material_raingular/d3/horizontal_bar_chart/controller
+class MrD3BarChart extends AngularDirective
+  @register(MaterialRaingular.d3.app)
+  restrict: "E"
+  controller: MaterialRaingular.d3.Directives.MrD3BarChartModel
+  transclude: true
+  replace: true
+  template: "<svg height='100%' width: 100%><g ng-transclude></g></svg>"
+###
+  Usage Slim syntax
+  mr-d3-bar-chart.test ng-init="dataSet = [{l: 'a',v: 23},{l: 'b',v: 13},{l: 'c',v: 21},{l: 'd',v: 14},{l: 'e',v: 37},{l: 'f',v: 15},{l: 'g',v: 18},{l: 'h',v: 34},{l: 'i',v: 30}]"
+    mr-d3-bar.thingy ng-repeat="data in dataSet" mr-d3-label="data.l" mr-d3-value="data.v"
+    mr-d3-bar mr-d3-label="'this'" mr-d3-value="'200'"
+    mr-d3-y-axis ng-init="domain = [37,0]" mr-d3-label="'Value'" mr-d3-domain='domain'
+
+    mr-d3-stacked-bar mr-d3-label="'CA'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'AZ'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-x-axis mr-d3-label="'Arbitrary'"
+###

data/lib/assets/javascripts/material_raingular/d3/extensions.coffee

@@ -0,0 +1,8 @@
+Object.map = (obj) ->
+  (func) ->
+    func(key,val) for key,val of obj
+Object.merge = (a,b,force) ->
+  c = {}
+  c[key] = val for key,val of a
+  c[key] = val for key,val of b
+  c

data/lib/assets/javascripts/material_raingular/d3/horizontal_bar_chart/controller.coffee

@@ -0,0 +1,33 @@
+class MaterialRaingular.d3.Directives.MrD3HorizontalBarChartModel extends AngularDirectiveModel
+  @inject('$timeout','$element','$attrs')
+  initialize: ->
+    @options = @$scope.$eval(@$attrs.d3Options || '{}')
+    @options.margins = Object.merge({top: 20,right: 20, left: 70, bottom: 50},@options.margins || {})
+    @svg = d3.select(@$element[0])
+    @holder = @svg.select('g')
+    @holder.attr('transform',"translate(#{@options.margins.left},#{@options.margins.right})")
+    @yAxis = d3.scaleBand().rangeRound([0,@height()]).padding(0.1)
+    @xAxis = d3.scaleLinear().range([0,@width()])
+  indexOf: (bar) ->
+    @bars().nodes().indexOf(bar)
+  bars: ->
+    nodes = @holder.selectAll('svg > g > rect').nodes()
+    d3.selectAll(nodes.concat(@holder.selectAll('g.stacked').nodes()))
+  adjustBars: ->
+    @yDomain = []
+    for bar in @bars().nodes()
+      rect = d3.select(bar)
+      @yDomain[@indexOf(bar)] = rect.attr('label')
+      width = (rect.attr('raw-size') / @maxValue()) * @width()
+      rect.attr('width',width)
+    @yAxis.domain(angular.copy(@yDomain).reverse())
+    for rect in @bars().nodes()
+      d3.select(rect).attr('height',@yAxis.bandwidth())
+      d3.select(rect).attr('y',@yAxis(@yDomain[@indexOf(rect)]))
+    @_yAxis?.call(d3.axisLeft(@yAxis))
+  height:   -> @$element[0].clientHeight - @options.margins.top  - @options.margins.bottom
+  width:    -> @$element[0].clientWidth  - @options.margins.left - @options.margins.right
+  maxValue: ->
+    val   = @xAxis?.domain().max()
+    val ||= (@bars().nodes().map (rect) -> d3.select(rect).attr('raw-size')).max()
+    val

data/lib/assets/javascripts/material_raingular/d3/horizontal_bar_chart/directive.coffee

@@ -0,0 +1,21 @@
+# //= require material_raingular/d3/horizontal_bar_chart/controller
+class MrD3HorizontalBarChart extends AngularDirective
+  @register(MaterialRaingular.d3.app)
+  restrict: "E"
+  controller: MaterialRaingular.d3.Directives.MrD3HorizontalBarChartModel
+  transclude: true
+  replace: true
+  template: "<svg height='100%' width: 100%><g ng-transclude></g></svg>"
+###
+  Usage Slim Syntax
+  mr-d3-horizontal-bar-chart.test ng-init="dataSet = [{l: 'a',v: 23},{l: 'b',v: 13},{l: 'c',v: 21},{l: 'd',v: 14},{l: 'e',v: 37},{l: 'f',v: 15},{l: 'g',v: 18},{l: 'h',v: 34},{l: 'i',v: 30}]"
+    mr-d3-bar.thingy ng-repeat="data in dataSet" mr-d3-label="data.l" mr-d3-value="data.v"
+    mr-d3-bar mr-d3-label="'this'" mr-d3-value="'200'"
+    mr-d3-x-axis ng-init="domain = [0,37]" mr-d3-label="'Value'" mr-d3-domain='domain'
+
+    mr-d3-stacked-bar mr-d3-label="'CA'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-stacked-bar mr-d3-label="'AZ'"
+      mr-d3-bar ng-repeat="data in [10,4,7]" mr-d3-label="data" mr-d3-value="data"
+    mr-d3-y-axis mr-d3-label="'Arbitrary'"
+###

data/lib/assets/javascripts/material_raingular/d3/pie_chart/directive.coffee

@@ -0,0 +1,7 @@
+class MaterialRaingular.d3.Directives.MrD3PieChart extends AngularDirective
+  restrict: "E"
+  @register(MaterialRaingular.d3.app)
+###
+  Usage Slim Syntax
+    mr-d3-pie-chart d3-data="{bio: 10, planning: 30, cr: 12}"
+###

data/lib/assets/javascripts/material_raingular/d3/pie_chart/linkmodel.coffee

@@ -0,0 +1,39 @@
+class PieChartModel extends AngularLinkModel
+  @inject('$timeout')
+  initialize: ->
+    @svg = d3.select(@$element[0]).append('svg')
+    @chartLayer = @svg.append('g').classed('chartLayer', true)
+    data = Object.map(@$scope.$eval(@$attrs.d3Data))(@cast.bind(@))
+    @setSize(data)
+    @drawChart(data)
+    @$scope.$watchCollection @$attrs.d3Data, @redrawChart.bind(@)
+  cast: (key,val) -> {name: key.titleize(), value: val}
+  redrawChart: (obj) ->
+    data = Object.map(@$scope.$eval(@$attrs.d3Data))(@cast.bind(@))
+    @drawChart(data)
+
+  setSize: (data) ->
+    @options = @$scope.$eval(@$attrs.d3Options) || {}
+    @width   = @options.width  || 960
+    @height  = @options.height || 500
+    @color   = @options.color  || '6b486b'
+    @margin  = @options.margin || {top: 40,left: 0,bottom: 40,right: 0}
+    @chartWidth  = @width - (@margin.left + @margin.right)
+    @chartHeight = @height - (@margin.top + @margin.bottom)
+    @svg.attr('width', @width).attr 'height', @height
+    @chartLayer.attr('width', @chartWidth).attr('height', @chartHeight).attr 'transform', "translate(#{[@margin.left,@margin.top]})"
+
+  drawChart: (data) ->
+    @chartLayer.selectAll('g').remove()
+    arcs = d3.pie().sort(null).value((d) -> d.value)(data)
+    arc  = d3.arc().outerRadius(@chartHeight / 2).innerRadius(@chartHeight / 4).padAngle(0.03).cornerRadius(8) #/ <- I hate atom right now
+    pieG = @chartLayer.selectAll('g').data([ data ]).enter().append('g').attr('transform', "translate(#{[@chartWidth / 2,@chartHeight / 2]})")
+    block = pieG.selectAll('.arc').data(arcs)
+    newBlock = block.enter().append('g').classed('arc', true)
+    newBlock.append('path').attr('d', arc).attr('id', (d, i) -> 'arc-' + i)
+    .attr('stroke', 'gray').attr 'fill', (d, i) -> d3.interpolateCool Math.random()
+    newBlock.append('text').attr('dx', 55).attr('dy', -5).append('textPath').attr('xlink:href', (d, i) ->'#arc-' + i)
+    .text (d) -> d.data.name
+    return
+
+  @register(MaterialRaingular.d3.Directives.MrD3PieChart)

data/lib/assets/javascripts/material_raingular/d3/ring_chart/directive.coffee

@@ -0,0 +1,9 @@
+class MaterialRaingular.d3.Directives.MrD3Ring extends AngularDirective
+  restrict: "E"
+  require: "^^mrD3RingWidget"
+  templateUrl: "assets/material_raingular/d3/ring_chart/ring.html"
+  scope: {
+    ringData: "@"
+    title: "@"
+  }
+  @register(MaterialRaingular.d3.app)

data/lib/assets/javascripts/material_raingular/d3/ring_chart/linkmodel.coffee

@@ -0,0 +1,159 @@
+# //= require material_raingular/d3/ring_chart/directive
+
+### TODO: Massive refactor required after change to coffeescropt.
+          The watch function is really more of a hack than an actual
+          fix to the fact that we aren't responsive to data changes
+###
+###
+************************************************************************
+  Custom D3 ring chart
+
+  Most everything here is going to be happening outside the AngularJS
+context so scope.$apply() will be necessary for forcing angular to go
+into it's digest loop when changes are made to the scope.
+
+  dataset: Constructed from a data service passed-in by directive caller.
+Result is
+************************************************************************
+###
+
+
+
+class RingChartModel extends AngularLinkModel
+  # Default attributes to use in template if attribute not set.
+  # Currently this only affects the internal relative positioning.
+  defaults:
+    width: 200
+    height: 200
+
+  initialize: ->
+    @d3 = window.d3
+    @$mrD3RingWidgetController = @$controller
+    @$scope.title ||= "Some title from data-set."
+    @_addRings()
+    @$scope.$watchCollection @_dataset, (newVal,oldVal) =>
+      @_addRings() if newVal != oldVal
+  #TODO: Replace with data factory that generates JSON objects.
+  _dataset: => @$scope.$eval(@$scope.ringData)
+  _addRings: ->
+    # Add ring to ring list on RingWidgetController
+    @$mrD3RingWidgetController.refresh()
+    @$mrD3RingWidgetController.addRing(@$scope)
+
+    @w = @defaults.width
+    @h = @defaults.height
+
+    # Get sum and calc percent.
+    @toPercent = 1/@_dataset().reduce(@_getSum)*100
+    @outerRadius = Math.min(@w,@h)/2
+    @innerRadius = Math.min(@w,@h)/3
+
+    @cornerRadius = @outerRadius*0.05
+    arc = @d3.arc()
+      .innerRadius(@innerRadius)
+      .outerRadius(@outerRadius)
+      .cornerRadius(@cornerRadius)
+      .padAngle(0.03)
+
+    @arcDataset = @d3.pie()(@_dataset()) # Convert array of number into arc object data
+
+    # Normalize arc dataset
+    @_rotateArcs(@arcDataset, 0)
+    # Make first data element centered on rhs of ring graph
+    @rotateAngle = @_calcCenterRotation(@arcDataset[0])
+    # Go through and rotate all arcs.
+    @_rotateArcs(@arcDataset, @rotateAngle)
+    # Easy colors accessible via a 10-step ordinal scale
+    @color = @d3.scaleOrdinal(@d3.schemeCategory10)
+
+    # Select SVG element from template
+    @svg = @d3.select(@$element[0])
+      .select("div")
+      .select("svg")
+
+    #Set up groups
+    @svg.selectAll("g").remove()
+    @arcs = @svg.append("g")
+      .attr("class", "rings")
+      .selectAll("g.arc")
+      .data(@arcDataset)
+      .enter()
+      .append("g")
+      .attr("class", "arc")
+      .classed("selected", (d, i) -> i==0)
+      .attr("transform", "translate(" + @outerRadius + "," + @outerRadius + ")")
+      .on("dblclick", @_doubleClickArc)
+      .on("mouseover", @_percentOnHover)
+      .on("mouseout", @_setInitialCenterText)
+
+    @arcs.append("title")
+      .text (d,i) ->
+        d.value + " Hours " + (if i == 0 then "Billable" else "Non-billable")
+
+    @_setInitialCenterText()
+
+    #Draw arc paths
+    @arcs.append("path")
+        .attr "fill", (d, i) => @color(i)
+        .attr("d", arc)
+
+
+
+  _calcCenterRotation: (datum) ->
+    # Make selected data element centered on rhs of ring graph
+    elementAngle = datum["endAngle"] - datum["startAngle"]
+    elementCenterAngle = datum["startAngle"] + elementAngle/2
+    rotateAngle = 2*Math.PI - elementCenterAngle + Math.PI/2
+    return rotateAngle
+  ### rotateArcs: Takes a positive angle in radians and and d3ArcDataset and
+  mutates the data. ###
+  _rotateArcs: (d3ArcData, radRotation) ->
+    radRotation = Math.abs(radRotation)
+    for data in d3ArcData
+      dTheta = data["endAngle"] - data["startAngle"]
+      data["startAngle"] = (data["startAngle"] + radRotation)%(Math.PI*2)
+      data["endAngle"]   =  data["startAngle"] + dTheta
+
+  _doubleClickArc: (datum) =>
+    rings = @d3.select(@$element[0])
+      .select("g.rings")
+    @svg.selectAll("g.arc")
+      .classed("selected", false)
+    @d3.select(this)
+      .classed("selected", true)
+    rings.transition().duration(1000)
+      .attrTween("transform", tween)
+
+    tween = =>
+      rotateAngle = @_calcCenterRotation(datum)*180/Math.PI
+      interpolateFrom = this.getAttribute("transform") || "rotate(0, 100, 100)";
+      return @d3.interpolateString(interpolateFrom, "rotate(" + rotateAngle +  ", 100, 100)")
+
+  # Add initial center percent text
+  _setInitialCenterText: =>
+    @svg.select("text.center")
+      .remove()
+    data = @svg.select("g.arc.selected").datum();
+    @svg.append("text")
+      .attr("class", "center")
+      .attr("x", @outerRadius)
+      .attr("y", @outerRadius)
+      .attr("dy", "0.3em")
+      .text((Math.round(data.value*@toPercent) || 0) + "%")
+
+  # percent
+  _percentOnHover: (d) =>
+    @svg.select("text.center")
+      .remove()
+    @svg.append("text")
+      .attr("class", "center")
+      .attr("x", @outerRadius)
+      .attr("y", @outerRadius)
+      .attr("dy", "0.3em")
+      .text(Math.round(d.value * @toPercent) + "%")
+
+
+  _getSum: (total, num) ->
+    return total + num
+
+  @register(MaterialRaingular.d3.Directives.MrD3Ring)

data/lib/assets/javascripts/material_raingular/d3/ring_chart/widget_controller.coffee

@@ -0,0 +1,14 @@
+class MaterialRaingular.d3.Directives.MrD3RingWidget extends AngularDirectiveModel
+  @inject(
+    '$scope'
+  )
+  #   Use "this" for the controller object (sharred between directives)
+  # and use $scope for the view of RingWidget
+
+  # All the ring-charts contained by widget
+  initialize: ->
+    @$scope.rings = []
+
+  # Used by RingDirective linker to add rings to widget controller
+  addRing: (ring) -> @$scope.rings.push ring
+  refresh:        -> @$scope.rings = []

data/lib/assets/javascripts/material_raingular/d3/ring_chart/widget_directive.coffee

@@ -0,0 +1,15 @@
+# //= require material_raingular/d3/ring_chart/widget_controller
+class MrD3RingWidget extends AngularDirective
+  restrict: 'E'
+  transclude: true
+  templateUrl: 'assets/material_raingular/d3/ring_chart/ringWidget.html'
+  scope: {}
+  controller: MaterialRaingular.d3.Directives.MrD3RingWidget
+  @register(MaterialRaingular.d3.app)
+###
+  Usage Slim Syntax
+    mr-d3-ring-widget
+      h3
+        | Bio Billability
+      mr-d3-ring ring-data="[50,10]"
+###