diff --git a/app/helpers/variance_helper.rb b/app/helpers/variance_helper.rb
new file mode 100644
index 00000000..7620f99a
--- /dev/null
+++ b/app/helpers/variance_helper.rb
@@ -0,0 +1,45 @@
+module VarianceHelper
+  def heading_gutter
+    30
+  end
+
+  def footer_gutter
+    50
+  end
+
+  def measure_row_height
+    40
+  end
+
+  def graph_height(number_of_rows)
+    number_of_rows * measure_row_height + heading_gutter + footer_gutter
+  end
+
+  def graph_background_height(number_of_rows:)
+    graph_height(number_of_rows) - footer_gutter
+  end
+
+  def measure_row_bar_height
+    20
+  end
+
+  def label_padding_right
+    24
+  end
+
+  def label_width_percentage
+    25
+  end
+
+  def graph_width_percentage
+    100 - label_width_percentage
+  end
+
+  def zones
+    %w(warning watch growth approval ideal)
+  end
+
+  def zone_width_percentage
+    100.0/zones.size
+  end
+end
diff --git a/app/views/dashboard/_measure_bar_graph.erb b/app/views/dashboard/_measure_bar_graph.erb
deleted file mode 100644
index 4a32e367..00000000
--- a/app/views/dashboard/_measure_bar_graph.erb
+++ /dev/null
@@ -1,72 +0,0 @@
-<div class="bg-white p-4 border-radius-8">
-
-  <% heading_gutter = 30 %>
-  <% footer_gutter = 50 %>
-  <% measure_row_height = 40 %>
-  <% graph_height = measure_graph_row_presenters.length * measure_row_height + heading_gutter + footer_gutter %>
-  <% graph_background_height = graph_height - footer_gutter %>
-  <% measure_row_bar_height = 20 %>
-  <% label_padding_right = 24 %>
-
-  <svg width="100%" height=<%= graph_height %> xmlns="http://www.w3.org/2000/svg">
-
-    <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
-      <feComponentTransfer in=SourceAlpha>
-        <feFuncA type="table" tableValues="1 0"/>
-      </feComponentTransfer>
-      <feGaussianBlur stdDeviation="4"/>
-      <feOffset dx="0" dy="5" result="offsetblur"/>
-      <feFlood flood-color="rgb(0, 0, 0)" result="color"/>
-      <feComposite in2="offsetblur" operator="in"/>
-      <feComposite in2="SourceAlpha" operator="in"/>
-      <feMerge>
-        <feMergeNode in="SourceGraphic"/>
-        <feMergeNode/>
-      </feMerge>
-    </filter>
-
-    <svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>>
-      <g id="scale-headings">
-        <text class="graph-header" x="10%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
-        <text class="graph-header" x="30%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
-        <text class="graph-header" x="50%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth</text>
-        <text class="graph-header" x="70%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval</text>
-        <text class="graph-header" x="90%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
-      </g>
-
-      <g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
-        <rect id="warning-zone" class="fill-warning" x="0%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="watch-zone" class="fill-watch" x="20%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="growth-zone" class="fill-growth" x="40%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="approval-zone" class="fill-approval" x="60%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="ideal-zone" class="fill-ideal" x="80%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-      </g>
-    </svg>
-
-    <g id="measure-rows">
-      <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
-        <%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
-          <text class="font-cabin" x="25%" dx=<%= -1 * label_padding_right %> y=<%= index * measure_row_height + measure_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.measure_name %></text>
-        <% end %>
-      </svg>
-
-      <svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%">
-        <%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
-          <rect class="measure-row-bar <%= presenter.bar_color %>" x="<%= presenter.x_offset %>" y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>" width="<%= presenter.bar_width %>" height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id  %>" />
-        <% end %>
-      </svg>
-    </g>
-
-    <svg id="key-benchmark" x="25%" y="0" width="75%" height="<%= graph_background_height %>">
-      <g transform="translate(0, <%= heading_gutter %>)">
-        <rect id="key-benchmark" x="60%" transform="translate(-1, 0)" y="0" width="4" height="100%" fill="black"/>
-      </g>
-    </svg>
-
-    <svg id="key-benchmark" x="25%" y="0" width="75%">
-      <g id="legend">
-        <text class="graph-footer" x="60%" y="<%= graph_background_height + (footer_gutter / 2) %>" text-anchor="middle">Benchmark</text>
-      </g>
-    </svg>
-  </svg>
-</div>
diff --git a/app/views/dashboard/_variance_graph.erb b/app/views/dashboard/_variance_graph.erb
new file mode 100644
index 00000000..a4a137b0
--- /dev/null
+++ b/app/views/dashboard/_variance_graph.erb
@@ -0,0 +1,128 @@
+<div class="bg-white p-4 border-radius-8">
+
+  <svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
+
+    <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feComponentTransfer in=SourceAlpha>
+        <feFuncA type="table" tableValues="1 0"/>
+      </feComponentTransfer>
+      <feGaussianBlur stdDeviation="4"/>
+      <feOffset dx="0" dy="5" result="offsetblur"/>
+      <feFlood flood-color="rgb(0, 0, 0)" result="color"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feComposite in2="SourceAlpha" operator="in"/>
+      <feMerge>
+        <feMergeNode in="SourceGraphic"/>
+        <feMergeNode/>
+      </feMerge>
+    </filter>
+
+    <svg
+      id="graph-background"
+      x="<%= label_width_percentage %>%"
+      y="0"
+      width="<%= graph_width_percentage %>%"
+      height=<%= graph_background_height(number_of_rows: presenters.size) %>
+    >
+      <g id="zone-headings">
+        <%= zones.each_with_index do |zone, index| %>
+          <text
+            class="zone-header"
+            x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
+            y="<%= heading_gutter / 2 %>"
+            text-anchor="middle"
+            dominant-baseline="middle"
+          >
+            <%= zone.capitalize %>
+          </text>
+        <% end %>
+      </g>
+
+      <g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
+        <%= zones.each_with_index do |zone, index| %>
+          <rect
+            id="<%= zone %>-zone"
+            class="zone-background fill-<%= zone %>"
+            x="<%= index * zone_width_percentage %>%"
+            y="0"
+            width="<%= zone_width_percentage %>%"
+            height="100%"
+            opacity="0.2"
+            filter="url(#inset-shadow)"
+            />
+        <% end %>
+      </g>
+    </svg>
+
+    <g id="measure-rows">
+      <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
+        <%= presenters.each_with_index do |presenter, index| %>
+          <text
+            class="font-cabin"
+            x="<%= label_width_percentage %>%"
+            dx="<%= -1 * label_padding_right %>"
+            y="<%= index * measure_row_height + measure_row_height / 2 %>"
+            text-anchor="end"
+            dominant-baseline="middle"
+          >
+            <%= presenter.measure_name %>
+          </text>
+        <% end %>
+      </svg>
+
+      <svg
+        id="measure-row-bars"
+        x="<%= label_width_percentage %>%"
+        y="<%= heading_gutter %>"
+        width="<%= graph_width_percentage %>%"
+      >
+        <%= presenters.each_with_index do |presenter, index| %>
+          <rect
+            class="measure-row-bar <%= presenter.bar_color %>"
+            x="<%= presenter.x_offset %>"
+            y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
+            width="<%= presenter.bar_width %>"
+            height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
+            stroke="none"
+            />
+        <% end %>
+      </svg>
+    </g>
+
+    <svg
+      id="key-benchmark"
+      x="<%= label_width_percentage %>%"
+      y="0"
+      width="<%= graph_width_percentage %>%"
+      height="<%= graph_background_height(number_of_rows: presenters.size) %>"
+    >
+      <g transform="translate(0, <%= heading_gutter %>)">
+        <rect
+          id="key-benchmark"
+          x="60%"
+          transform="translate(-1, 0)"
+          y="0"
+          width="4"
+          height="100%"
+          fill="black"
+        />
+      </g>
+    </svg>
+
+    <svg
+      id="legend"
+      x="<%= label_width_percentage %>%"
+      y="0"
+      width="<%= graph_width_percentage %>%"
+    >
+      <text
+        class="graph-footer"
+        x="60%"
+        y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>"
+        text-anchor="middle"
+      >
+        Benchmark
+      </text>
+    </svg>
+  </svg>
+</div>
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 271ac55a..a739e0ea 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -30,6 +30,6 @@
     <p class="body-large">This graph shows how much a score is above or below the benchmark of any given scale.</p>
   </div>
 
-  <%= render partial: "measure_bar_graph", locals: { measure_graph_row_presenters: @measure_graph_row_presenters } %>
+  <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters } %>
 
 </div>