SVG diagram for shelf parts

shelve.slim

scss:
  rect {
    stroke-width: 0px;

    &.dado {
      fill: green;
      &.side {
        fill: blue;
      }
      &.two {
        fill: red;
      }

    }
    &.box {
      fill: #EEEEEE;
    }
    &.open {
      fill: #D1D1D1;
    }
    &.screw {
      fill: #C3C3C3;
    }
  }

coffee:
  class Diagram
    constructor: (@svg_element, @pixel_ratio) ->
      @parts = []
      @top_offset = 0

    add_part: (name, height) ->
      part = new Part(this, name, height, @top_offset)
      @parts.push(part)
      @top_offset += height * @pixel_ratio + 30

      part

  class Part
    constructor: (@diagram, @name, @height, top_offset) ->
      @svg_group = @diagram.svg_element.append('g').attr
        transform: "translate(0 #{top_offset})"
      @pixel_height = @height * @diagram.pixel_ratio
      @pixel_start = 0

    add_section: (name, width) ->
      pixel_width = (width * @diagram.pixel_ratio)

      rect = @svg_group.append('rect').attr
        x: @pixel_start
        y: 0
        width: pixel_width
        height: @pixel_height
      rect.classed(name, true)

      @pixel_start += pixel_width

  after_load () ->
    diagram = new Diagram(d3.select('#main_diagram'), 150 / 11.5)

    # A/B Parts
    part_ab = diagram.add_part('A and B', 11.5)
    part_ab.add_section('box',       11+1/2)
    part_ab.add_section('dado',      1/2)
    part_ab.add_section('box',       11+1/2)
    part_ab.add_section('dado',      1/2)
    part_ab.add_section('box',       11+1/2)
    part_ab.add_section('dado',      1/2)
    part_ab.add_section('open',      35+1/2)

    part_cd = diagram.add_part('C and D', 11.5)
    part_cd.add_section('dado side', 1/8)
    part_cd.add_section('box',       11+1/2)
    part_cd.add_section('dado two',  1/2)
    part_cd.add_section('box',       11+1/2)
    part_cd.add_section('dado two',  1/2)
    part_cd.add_section('box',       11+1/2)
    part_cd.add_section('dado two',  1/2)
    part_cd.add_section('open',      35+1/2)
    part_cd.add_section('dado side', 1/8)

    part_ef = diagram.add_part('E and F', 11.5)
    part_ef.add_section('screw',     1/2)
    part_ef.add_section('box',       11+1/2)
    part_ef.add_section('dado',      1/2)
    part_ef.add_section('box',       11+1/2)
    part_ef.add_section('dado',      1/2)
    part_ef.add_section('box',       11+1/2)
    part_ef.add_section('screw',     1/2)

    part_g_to_o = diagram.add_part('G to O', 11.5)
    part_g_to_o.add_section('dado side', 1/8)
    part_g_to_o.add_section('box',       11+1/2)
    part_g_to_o.add_section('dado side', 1/8)

.container
  .row
    .col-md-12
      svg#main_diagram width="1000" height="1000"