Create a Rose Chart using ONLY HAML and SASS

rosechart.haml

.chartWrapper

  - @chart = [[1, "Label 1"], [2, "Label 2"], [3, "Label 3"], [4, "Label 4"], [5, "Label 5"], [6, "Label 6"]]

  - @chart.each do |chart, label|
    %div{:class=>"chartContainer#{chart}"}
      %div{:class=>"hold#{chart}", :id=>"chartSlice#{chart}"}
        %div{:class=>"chart#{chart}"}
      .label{:id=>"label#{chart}"}
        %span #{label}

rosechart.sass

@import 'compass'

.chartWrapper

  $base: 300px //number used to calculate base circle for rendering of petals

  //How big do you want each petal of the Rose Chart?

  // $data1: 6     //Label 1
  // $data2: 5.5   //Label 2
  // $data3: 5.5   //Label 3
  // $data4: 5     //Label 4
  // $data5: 4.8   //Label 5
  // $data6: 4.2   //Label 6

  $dataset: (6, 5.5, 5.5, 5, 4.8, 4.2) //list your data points

  $diameter: 50px

  //Have fun with colors
  $opacity: 1

  $color1: rgba(249, 97, 135, $opacity)
  $color2: rgba(243, 224, 135, $opacity)
  $color3: rgba(50, 149, 153, $opacity)
  $color4: rgba(42, 102, 154, $opacity)
  $color5: rgba(104, 120, 166, $opacity)
  $color6: rgba(235, 121, 127, $opacity)


  //The only thing you will need to change below here is to make sure your $colornum variables match what you've declared

  $data-elements-count: length($dataset)
  $rosechart-radians: 360/$data-elements-count //degrees per slice of rose chart

  $i: 1
  @while $i <= $data-elements-count

    $chart-datanum: $diameter * nth($dataset, $i)
    $colornum: nth(($color1 $color2 $color3 $color4 $color5 $color6), $i)

    $rotate: $rosechart-radians * ($i - 1)

    .chart#{$i}, .hold#{$i}
      position: absolute
      width: $chart-datanum
      height: $chart-datanum
      +border-radius($chart-datanum/2)

    .chart#{$i}
      clip: rect(0px, $chart-datanum/2, $chart-datanum, 0px)

    .hold#{$i}
      clip: rect(0px, $chart-datanum, $chart-datanum, $chart-datanum/2)
      margin-left: ($base - $chart-datanum)/2
      margin-top: ($base - $chart-datanum)/2

    #chartSlice#{$i}
      +transform(rotate(($rotate)+deg))

    #chartSlice#{$i} .chart#{$i}
      background-color: $colornum
      +transform(rotate($rosechart-radians+deg))
      cursor: pointer


    .label
      position: absolute
      text-align: center
      color: #222
      &#label#{$i}
        width: $chart-datanum
        height: $chart-datanum
        margin-top: -$chart-datanum/$data-elements-count
        margin-left: -$chart-datanum/$data-elements-count
        +transform(rotate($rotate+deg))
        z-index: 1000
        span
          position: absolute
          margin-top: 60px
          margin-left: 40px
          +transform(rotate(-$rotate+deg))

    $i: $i+1