diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..1f83496
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,112 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb",
+    "plugin:react/recommended"
+  ],
+  "plugins": [
+    "react"
+  ],
+  "settings": {
+    "react": {
+      "pragma": "React"
+    },
+    "ecmascript": 6
+  },
+  "globals": {
+    "VERSION": false
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 6
+  },
+  "rules": {
+    // TODOs:
+
+    "no-param-reassign": 0, // https://github.com/higlass/higlass/issues/483
+    "react/no-find-dom-node": 0, // https://github.com/higlass/higlass/issues/510
+    "react/require-default-props": 0, // https://github.com/higlass/higlass/issues/523
+    "import/no-cycle": 0,
+
+    // Below, if it's turned off (0), we definitely do not care about the rule.
+    // If it's turned on (2), and you have a violation, either
+    //   - fix it
+    //   - eslint-disable just your line
+    //   - or turn it off globally; we might be too picky.
+    // If it's a warning (1), we'd like to turn it either fully on or fully off, eventually.
+
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/role-has-required-aria-props": 0,
+    "class-methods-use-this": 0,
+    "comma-dangle": 0,
+    "guard-for-in": 0,
+    "jsx-quotes": 2,
+    "no-bitwise": 0,
+    "no-console": [2, { "allow": ["warn", "error"] }],
+    "no-constant-condition": 2,
+    "no-continue": 0,
+    "no-mixed-operators": 0,
+    "no-multi-spaces": [2, { "ignoreEOLComments": true }],
+    "no-plusplus": 0,
+    "no-prototype-builtins": 0,
+    "no-underscore-dangle": 0,
+    "no-unused-vars": [2, { "args": "none" }],
+    "prefer-destructuring": 0,
+    "react/destructuring-assignment": 0,
+    "react/display-name": 0,
+    "react/forbid-prop-types": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-closing-bracket-location": 2,
+    "react/jsx-curly-spacing": 2,
+    "react/jsx-equals-spacing": 2,
+    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx"] }],
+    "react/jsx-handler-names": 0,
+    "react/jsx-indent": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-key": 2,
+    "react/jsx-max-props-per-line": 2,
+    "react/jsx-no-bind": [0, {"ignoreRefs": true }],
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-literals": 0,
+    "react/jsx-no-undef": 2,
+    "react/jsx-pascal-case": 2,
+    "react/jsx-sort-props": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "no-restricted-syntax": 0,
+    "react/no-danger": 1,
+    "react/no-deprecated": 2,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 2,
+    "react/no-is-mounted": 2,
+    "react/no-multi-comp": 2,
+    "react/no-set-state": 0,
+    "react/no-string-refs": 1,
+    "react/no-unknown-property": 2,
+    "react/no-unused-prop-types": 0,
+    "react/no-unused-state": 0,
+    "react/prefer-es6-class": 2,
+    "react/prop-types": 1,
+    "react/react-in-jsx-scope": 2,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 0
+  },
+  "overrides": [
+    {
+      "files": ["test/**/*.js"],
+      "rules": {
+        "no-use-before-define": 0 // So viewconfs can be below the body of the test.
+      }
+    }
+  ]
+}
diff --git a/src/index.html b/src/index.html
index 9069523..608e17f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,267 +29,171 @@
 </body>
 <script src="hglib.js"></script>
 <script>
+
   var viewConfig =
-  {
+ {
   "editable": true,
   "zoomFixed": false,
   "trackSourceServers": [
-    "http://explore.altius.org/api/v1",
-    "http://higlass.io/api/v1"
+    "//higlass.io/api/v1"
   ],
-  "exportViewUrl": "http://explore.altius.org/api/v1/viewconfs/",
+  "exportViewUrl": "/api/v1/viewconfs",
   "views": [
     {
+      "uid": "aa",
+      "initialXDomain": [
+        1489276499.1492915,
+        1489509117.4802969
+      ],
+      "autocompleteSource": "/api/v1/suggest/?d=OHJakQICQD6gTD7skx4EWA&",
+      "genomePositionSearchBox": {
+        "autocompleteServer": "//higlass.io/api/v1",
+        "autocompleteId": "OHJakQICQD6gTD7skx4EWA",
+        "chromInfoServer": "//higlass.io/api/v1",
+        "chromInfoId": "hg19",
+        "visible": true
+      },
+      "chromInfoPath": "//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv",
       "tracks": {
         "top": [
           {
-            "type": "combined",
-            "height": 30,
-            "width": 1143,
-            "contents": [
-              {
-                "name": "ChromosomeAxis",
-                "created": "2017-07-17T14:16:45.346835Z",
-                "server": "http://higlass.io/api/v1",
-                "tilesetUid": "NyITQvZsS_mOFNlz5C2LJg",
-                "type": "horizontal-chromosome-labels",
-                "options": {
-                  "showMousePosition": false,
-                  "mousePositionColor": "#999999",
-                  "color": "#777777",
-                  "stroke": "#FFFFFF",
-                  "fontSize": 12,
-                  "fontIsAligned": false
-                },
-                "width": 1143,
-                "height": 30,
-                "position": "top"
-              },
-              {
-                "type": "viewport-projection-horizontal",
-                "fromViewUid": "N0uHVmRERtWIarBP1GZXHA",
-                "options": {
-                  "projectionFillColor": "#777",
-                  "projectionStrokeColor": "#777",
-                  "projectionFillOpacity": 0.3,
-                  "projectionStrokeOpacity": 0.7,
-                  "strokeWidth": 1
-                },
-                "name": "ViewportProjection",
-                "position": "top"
-              }
-            ],
-            "position": "top",
-            "options": {}
-          },
-          {
-            "type": "combined",
-            "height": 55,
-            "width": 1143,
-            "contents": [
-              {
-                "name": "Gene Annotations (hg38)",
-                "created": "2017-07-14T15:27:46.989053Z",
-                "server": "http://higlass.io/api/v1",
-                "tilesetUid": "P0PLbQMwTYGy-5uPIQid7A",
-                "type": "horizontal-gene-annotations",
-                "options": {
-                  "labelColor": "black",
-                  "labelPosition": "hidden",
-                  "plusStrandColor": "blue",
-                  "minusStrandColor": "red",
-                  "trackBorderWidth": 0,
-                  "trackBorderColor": "black",
-                  "showMousePosition": false,
-                  "mousePositionColor": "#999999",
-                  "name": "GeneAnnotations(hg38)",
-                  "fontSize": 11,
-                  "geneAnnotationHeight": 10,
-                  "geneLabelPosition": "outside",
-                  "geneStrandSpacing": 4
-                },
-                "width": 1143,
-                "height": 55,
-                "header": "1\t2\t3\t4\t5\t6\t7\t8\t9\t10\t11\t12\t13\t14",
-                "position": "top"
-              },
-              {
-                "type": "viewport-projection-horizontal",
-                "fromViewUid": "N0uHVmRERtWIarBP1GZXHA",
-                "options": {
-                  "projectionFillColor": "#777",
-                  "projectionStrokeColor": "#777",
-                  "projectionFillOpacity": 0.3,
-                  "projectionStrokeOpacity": 0.7,
-                  "strokeWidth": 1
-                },
-                "name": "ViewportProjection",
-                "position": "top"
-              }
-            ],
-            "position": "top",
-            "options": {}
+            "server": "//higlass.io/api/v1",
+            "tilesetUid": "P0PLbQMwTYGy-5uPIQid7A",
+            "uid": "R7WfOdM7QcGhJMjea8vOtw",
+            "type": "horizontal-gene-annotations",
+            "options": {
+              "fontSize": 11,
+              "labelColor": "black",
+              "labelBackgroundColor": "#ffffff",
+              "labelPosition": "hidden",
+              "labelLeftMargin": 0,
+              "labelRightMargin": 0,
+              "labelTopMargin": 0,
+              "labelBottomMargin": 0,
+              "plusStrandColor": "blue",
+              "minusStrandColor": "red",
+              "trackBorderWidth": 0,
+              "trackBorderColor": "black",
+              "showMousePosition": false,
+              "mousePositionColor": "#000000",
+              "geneAnnotationHeight": 10,
+              "geneLabelPosition": "outside",
+              "geneStrandSpacing": 4,
+              "name": "Gene Annotations (hg38)"
+            },
+            "width": 20,
+            "height": 55
           },
           {
-            "type": "combined",
-            "height": 178,
-            "width": 1143,
-            "contents": [
-              {
-                "name": "hg38.all.KL.bed.multires.mv5",
-                "created": "2018-08-30T22:53:24.984599Z",
-                "server": "http://explore.altius.org/api/v1",
-                "tilesetUid": "T6fMrq_zSNa4-ZoJGEMfaw",
-                "type": "horizontal-stacked-bar",
-                "options": {
-                  "labelPosition": "topLeft",
-                  "labelColor": "black",
-                  "labelTextOpacity": 0.4,
-                  "valueScaling": "exponential",
-                  "trackBorderWidth": 0,
-                  "trackBorderColor": "black",
-                  "backgroundColor": "white",
-                  "barBorder": true,
-                  "scaledHeight": false,
-                  "sortLargestOnTop": true,
-                  "colorScale": [
-                    "#FF0000",
-                    "#FF4500",
-                    "#32CD32",
-                    "#008000",
-                    "#006400",
-                    "#C2E105",
-                    "#FFFF00",
-                    "#66CDAA",
-                    "#8A91D0",
-                    "#CD5C5C",
-                    "#E9967A",
-                    "#BDB76B",
-                    "#808080",
-                    "#C0C0C0",
-                    "#FFFFFF"
-                  ],
-                  "name": "hg38.all.KL.bed.multires.mv5"
-                },
-                "resolutions": [
-                  13107200,
-                  6553600,
-                  3276800,
-                  1638400,
-                  819200,
-                  409600,
-                  204800,
-                  102400,
-                  51200,
-                  25600,
-                  12800,
-                  6400,
-                  3200,
-                  1600,
-                  800,
-                  400,
-                  200
-                ],
-                "position": "top"
-              },
-              {
-                "type": "viewport-projection-horizontal",
-                "fromViewUid": "N0uHVmRERtWIarBP1GZXHA",
-                "options": {
-                  "projectionFillColor": "#777",
-                  "projectionStrokeColor": "#777",
-                  "projectionFillOpacity": 0.3,
-                  "projectionStrokeOpacity": 0.7,
-                  "strokeWidth": 1
-                },
-                "name": "ViewportProjection",
-                "position": "top"
-              }
-            ],
-            "position": "top",
-            "options": {}
+            "server": "//higlass.io/api/v1",
+            "tilesetUid": "WtBJUYawQzS9M2WVIIHnlA",
+            "uid": "ZE5e1VLsTmKRy-q2VDTcfQ",
+            "type": "basic-multiple-line-chart",
+            "options": {
+              "labelPosition": "topLeft",
+              "labelColor": "black",
+              "labelTextOpacity": 0.4,
+              "valueScaling": "exponential",
+              "trackBorderWidth": 0,
+              "trackBorderColor": "black",
+              "backgroundColor": "white",
+              "barBorder": true,
+              "sortLargestOnTop": true,
+              "colorScale": [
+                "#FF0000",
+                "#FF4500",
+                "#32CD32",
+                "#008000",
+                "#006400",
+                "#C2E105",
+                "#FFFF00",
+                "#66CDAA",
+                "#8A91D0",
+                "#CD5C5C",
+                "#E9967A",
+                "#BDB76B",
+                "#808080",
+                "#C0C0C0",
+                "#FFFFFF"
+              ],
+              "name": "Epilogos (hg38)"
+            },
+            "width": 1272,
+            "height": 164,
+            "resolutions": [
+              13107200,
+              6553600,
+              3276800,
+              1638400,
+              819200,
+              409600,
+              204800,
+              102400,
+              51200,
+              25600,
+              12800,
+              6400,
+              3200,
+              1600,
+              800,
+              400,
+              200
+            ]
           },
           {
-            "type": "combined",
-            "height": 168,
-            "width": 1143,
-            "contents": [
-              {
-                "name": "locus_reg_comp_maj_dist10000.bedGraph.binned.mtx.qcat.multires.mv5",
-                "created": "2018-08-30T23:23:44.875875Z",
-                "server": "http://explore.altius.org/api/v1",
-                "tilesetUid": "Flm-wUf_QgKLkeZ5GqlTXQ",
-                "type": "horizontal-stacked-bar",
-                "options": {
-                  "labelPosition": "topLeft",
-                  "labelColor": "black",
-                  "labelTextOpacity": 0.4,
-                  "valueScaling": "linear",
-                  "trackBorderWidth": 0,
-                  "trackBorderColor": "black",
-                  "backgroundColor": "white",
-                  "barBorder": true,
-                  "scaledHeight": false,
-                  "sortLargestOnTop": true,
-                  "colorScale": [
-                    "#C3C3C3",
-                    "#BB2DD4",
-                    "#05C1D9",
-                    "#7A00FF",
-                    "#FE8102",
-                    "#4A6876",
-                    "#FFE500",
-                    "#0467FD",
-                    "#07AF00",
-                    "#692108",
-                    "#B9461D",
-                    "#4C7D14",
-                    "#009588",
-                    "#414613",
-                    "#FF0000",
-                    "#08245B"
-                  ],
-                  "name": "locus_reg_comp_maj_dist10000.bedGraph.binned.mtx.qcat.multires.mv5"
-                },
-                "width": 1143,
-                "height": 168,
-                "resolutions": [
-                  13107200,
-                  6553600,
-                  3276800,
-                  1638400,
-                  819200,
-                  409600,
-                  204800,
-                  102400,
-                  51200,
-                  25600,
-                  12800,
-                  6400,
-                  3200,
-                  1600,
-                  800,
-                  400,
-                  200
-                ],
-                "position": "top"
-              },
-              {
-                "type": "viewport-projection-horizontal",
-                "fromViewUid": "N0uHVmRERtWIarBP1GZXHA",
-                "options": {
-                  "projectionFillColor": "#777",
-                  "projectionStrokeColor": "#777",
-                  "projectionFillOpacity": 0.3,
-                  "projectionStrokeOpacity": 0.7,
-                  "strokeWidth": 1
-                },
-                "name": "ViewportProjection",
-                "position": "top"
-              }
-            ],
-            "position": "top",
-            "options": {}
+            "server": "//higlass.io/api/v1",
+            "tilesetUid": "WtBJUYawQzS9M2WVIIHnlA",
+            "type": "horizontal-stacked-bar",
+            "options": {
+              "labelPosition": "topLeft",
+              "labelColor": "black",
+              "labelTextOpacity": 0.4,
+              "valueScaling": "exponential",
+              "trackBorderWidth": 0,
+              "trackBorderColor": "black",
+              "backgroundColor": "white",
+              "barBorder": true,
+              "sortLargestOnTop": true,
+              "colorScale": [
+                "#FF0000",
+                "#FF4500",
+                "#32CD32",
+                "#008000",
+                "#006400",
+                "#C2E105",
+                "#FFFF00",
+                "#66CDAA",
+                "#8A91D0",
+                "#CD5C5C",
+                "#E9967A",
+                "#BDB76B",
+                "#808080",
+                "#C0C0C0",
+                "#FFFFFF"
+              ],
+              "name": "Epilogos (hg38)"
+            },
+            "width": 1272,
+            "height": 164,
+            "resolutions": [
+              13107200,
+              6553600,
+              3276800,
+              1638400,
+              819200,
+              409600,
+              204800,
+              102400,
+              51200,
+              25600,
+              12800,
+              6400,
+              3200,
+              1600,
+              800,
+              400,
+              200
+            ]
           }
         ],
         "left": [],
@@ -299,100 +203,33 @@
         "whole": [],
         "gallery": []
       },
-      "initialXDomain": [
-        2923809234.699874,
-        2923822022.308888
-      ],
-      "initialYDomain": [
-        2923765472.012453,
-        2923765404.7092476
-      ],
       "layout": {
         "w": 12,
         "h": 12,
         "x": 0,
         "y": 0,
-        "i": "V4Zyes86TQOdh4j8UV7D_A",
         "moved": false,
         "static": false
       },
-      "genomePositionSearchBoxVisible": true,
-      "genomePositionSearchBox": {
-        "autocompleteServer": "http://higlass.io/api/v1",
-        "chromInfoServer": "http://higlass.io/api/v1",
-        "visible": true,
-        "chromInfoId": "hg38",
-        "autocompleteId": "P0PLbQMwTYGy-5uPIQid7A"
-      }
+      "initialYDomain": [
+        877489204.2957622,
+        877568206.7478017
+      ]
     }
   ],
   "zoomLocks": {
-    "locksByViewUid": {
-      "N0uHVmRERtWIarBP1GZXHA": "BurowhwMTmSbp9x-aS-xEg",
-      "V4Zyes86TQOdh4j8UV7D_A": "BurowhwMTmSbp9x-aS-xEg"
-    },
-    "locksDict": {
-      "BurowhwMTmSbp9x-aS-xEg": {
-        "N0uHVmRERtWIarBP1GZXHA": [
-          2923791947.5,
-          2923791961,
-          10.65656566619873
-        ],
-        "V4Zyes86TQOdh4j8UV7D_A": [
-          2923791782.255352,
-          2923798379.8138356,
-          91.75218915939331
-        ],
-        "uid": "BurowhwMTmSbp9x-aS-xEg"
-      }
-    }
+    "locksByViewUid": {},
+    "locksDict": {}
   },
   "locationLocks": {
-    "locksByViewUid": {
-      "LiiO1Fs-T7W78gKfD7gvWQ": "bv148xQ5TIihjK8vta2ZyQ",
-      "XM-B2LPcTlGS5EhixxpX6A": "bv148xQ5TIihjK8vta2ZyQ",
-      "N0uHVmRERtWIarBP1GZXHA": "P-BMOkUVQtKPyvMtNnprZA",
-      "V4Zyes86TQOdh4j8UV7D_A": "P-BMOkUVQtKPyvMtNnprZA"
-    },
-    "locksDict": {
-      "bv148xQ5TIihjK8vta2ZyQ": {
-        "N0uHVmRERtWIarBP1GZXHA": [
-          2266356132.2537093,
-          2266341124.2021,
-          19.305949211120605
-        ],
-        "XM-B2LPcTlGS5EhixxpX6A": [
-          672870206.853404,
-          672903745.59448,
-          90.8034143447876
-        ],
-        "LiiO1Fs-T7W78gKfD7gvWQ": [
-          2266362674.127864,
-          2266329759.8567386,
-          14.535412788391113
-        ],
-        "uid": "bv148xQ5TIihjK8vta2ZyQ"
-      },
-      "P-BMOkUVQtKPyvMtNnprZA": {
-        "N0uHVmRERtWIarBP1GZXHA": [
-          2923791947.5,
-          2923791961,
-          10.65656566619873
-        ],
-        "V4Zyes86TQOdh4j8UV7D_A": [
-          2923791782.255352,
-          2923798379.8138356,
-          91.75218915939331
-        ],
-        "uid": "P-BMOkUVQtKPyvMtNnprZA"
-      }
-    }
+    "locksByViewUid": {},
+    "locksDict": {}
   },
   "valueScaleLocks": {
     "locksByViewUid": {},
     "locksDict": {}
   }
-};;
+}
   // window.higlassApi;
   window.hglib.viewer(
     document.getElementById('development-demo'),
diff --git a/src/scripts/BasicMultipleBarChart.js b/src/scripts/BasicMultipleBarChart.js
index 73dc859..0bfd0bc 100644
--- a/src/scripts/BasicMultipleBarChart.js
+++ b/src/scripts/BasicMultipleBarChart.js
@@ -1,4 +1,3 @@
-import {mix} from 'mixwith';
 import {scaleLinear, scaleOrdinal, schemeCategory10} from 'd3-scale';
 
 const BasicMultipleBarChart = (HGC, ...args) => {
diff --git a/src/scripts/BasicMultipleLineChart.js b/src/scripts/BasicMultipleLineChart.js
index 62bed09..3f0945c 100644
--- a/src/scripts/BasicMultipleLineChart.js
+++ b/src/scripts/BasicMultipleLineChart.js
@@ -1,5 +1,5 @@
-import {mix} from 'mixwith';
 import {scaleLinear, scaleOrdinal, schemeCategory10} from 'd3-scale';
+import matrixTrackUtils from './MatrixTrackUtils';
 
 const BasicMultipleLineChart = (HGC, ...args) => {
   if (!new.target) {
@@ -9,19 +9,22 @@ const BasicMultipleLineChart = (HGC, ...args) => {
   }
 
   // Services
-  const {tileProxy} = HGC.services;
+  const { tileProxy } = HGC.services;
 
-  class BasicMultipleLineChart extends mix(HGC.tracks.BarTrack).with(HGC.tracks.OneDimensionalMixin) {
+  class BasicMultipleLineChart extends HGC.tracks.BarTrack {
     constructor(context, options) {
       super(context, options);
+      this.colorToHex = HGC.utils.colorToHex;
 
       this.maxAndMin = {
         max: null,
         min: null
       };
-
     }
 
+    initTile(tile) {
+      matrixTrackUtils.initTile(this, tile);
+    }
     /**
      * Draws exactly one tile.
      * @param tile
@@ -35,7 +38,7 @@ const BasicMultipleLineChart = (HGC, ...args) => {
       const {tileX, tileWidth} = this.getTilePosAndDimensions(tile.tileData.zoomLevel,
         tile.tileData.tilePos, this.tilesetInfo.tile_size);
 
-      const matrix = tile.matrix;
+      const matrix = matrixTrackUtils.unFlatten(this, tile);
       const trackHeight = this.dimensions[1];
       const matrixDimensions = tile.tileData.shape;
       const colorScale = this.options.colorScale || scaleOrdinal(schemeCategory10);
diff --git a/src/scripts/MatrixTrackUtils.js b/src/scripts/MatrixTrackUtils.js
new file mode 100644
index 0000000..d69443e
--- /dev/null
+++ b/src/scripts/MatrixTrackUtils.js
@@ -0,0 +1,153 @@
+/**
+ * Find max and min heights for the given tile
+ *
+ * @param matrix 2d array of numbers representing one tile
+ */
+const findMaxAndMin = (matrix) => {
+  // find max height of bars for scaling in the track
+  const maxAndMin = {
+    max: null,
+    min: null
+  };
+
+  for (let i = 0; i < matrix.length; i++) {
+    const temp = matrix[i];
+
+    // find total heights of each positive column and each negative column
+    // and compare to highest value so far for the tile
+    const localPositiveMax = temp.filter(a => a >= 0).reduce((a, b) => a + b, 0);
+    if (localPositiveMax > maxAndMin.max) {
+      maxAndMin.max = localPositiveMax;
+    }
+
+    let negativeValues = temp.filter(a => a < 0);
+    // console.log('negativeValues:', negativeValues);
+
+    if (negativeValues.length > 0) {
+      negativeValues = negativeValues.map(a => Math.abs(a));
+      const localNegativeMax = negativeValues.reduce((a, b) => a + b, 0); // check
+      if (maxAndMin.min === null || localNegativeMax > maxAndMin.min) {
+        maxAndMin.min = localNegativeMax;
+      }
+    }
+  }
+
+  return maxAndMin;
+};
+
+/**
+ *
+ * @param tile
+ * @param data array of values to reshape
+ * @returns {Array} 2D array representation of data
+ */
+const simpleUnFlatten = (tile, data) => {
+  const shapeX = tile.tileData.shape[0]; // number of different nucleotides in each bar
+  const shapeY = tile.tileData.shape[1]; // number of bars
+
+  // matrix[0] will be [flattenedArray[0], flattenedArray[256], flattenedArray[512], etc.]
+  // because of how flattenedArray comes back from the server.
+  const matrix = [];
+  for (let i = 0; i < shapeX; i++) { // 6
+    for (let j = 0; j < shapeY; j++) { // 256;
+      let singleBar;
+      if (matrix[j] === undefined) {
+        singleBar = [];
+      } else {
+        singleBar = matrix[j];
+      }
+      singleBar.push(data[(shapeY * i) + j]);
+      matrix[j] = singleBar;
+    }
+  }
+
+  return matrix;
+};
+
+/**
+ * un-flatten data into matrix of tile.tileData.shape[0] x tile.tileData.shape[1]
+ *
+ * @param tile
+ * @returns {Array} 2d array of numerical values for each column
+ */
+const unFlatten = (track, tile) => {
+  if (tile.matrix) {
+    return tile.matrix;
+  }
+
+  const flattenedArray = tile.tileData.dense;
+
+  // if any data is negative, switch to exponential scale
+  if (flattenedArray.filter(a => a < 0).length > 0 && track.options.valueScaling === 'linear') {
+    console.warn('Negative values present in data. Defaulting to exponential scale.');
+    track.options.valueScaling = 'exponential';
+  }
+
+  const matrix = simpleUnFlatten(tile, flattenedArray);
+
+  const maxAndMin = findMaxAndMin(matrix);
+  // console.log('unflatten', tile.tileId, maxAndMin.min, maxAndMin.max);
+
+  tile.matrix = matrix;
+  tile.maxValue = maxAndMin.max;
+  tile.minValue = maxAndMin.min;
+
+  syncMaxAndMin(track);
+
+  return matrix;
+};
+
+const syncMaxAndMin = (track) => {
+  const visibleAndFetched = track.visibleAndFetchedTiles();
+
+  visibleAndFetched.forEach((tile) => {
+    // console.log('tile:', tile.tileId, tile.minValue, tile.maxValue);
+
+    if (tile.minValue + tile.maxValue > track.maxAndMin.min + track.maxAndMin.max) {
+      track.maxAndMin.min = tile.minValue;
+      track.maxAndMin.max = tile.maxValue;
+    }
+  });
+};
+
+/**
+ * Converts all colors in a colorScale to Hex colors.
+ */
+const localColorToHexScale = (track) => {
+  const colorScale = track.options.colorScale || track.scaleOrdinal(schemeCategory10);
+  const colorHexMap = {};
+  for (let i = 0; i < colorScale.length; i++) {
+    colorHexMap[colorScale[i]] = track.colorToHex(colorScale[i]);
+  }
+  track.colorHexMap = colorHexMap;
+};
+
+const initTile = (track, tile) => {
+  // create the tile
+  // should be overwritten by child classes
+  track.scale.minRawValue = track.minVisibleValue();
+  track.scale.maxRawValue = track.maxVisibleValue();
+
+  track.scale.minValue = track.scale.minRawValue;
+  track.scale.maxValue = track.scale.maxRawValue;
+
+  track.maxAndMin.max = track.scale.maxValue;
+  track.maxAndMin.min = track.scale.minValue;
+
+  // console.log('initTile:', tile.tileId, this.maxAndMin);
+  // tile.minValue = this.scale.minValue;
+
+  localColorToHexScale(track);
+  unFlatten(track, tile);
+
+  track.renderTile(tile);
+};
+
+const matrixTrackUtils = {
+  unFlatten,
+  syncMaxAndMin,
+  localColorToHexScale,
+  initTile,
+};
+
+export default matrixTrackUtils;
\ No newline at end of file
diff --git a/src/scripts/StackedBarTrack.js b/src/scripts/StackedBarTrack.js
index 7dc798d..703bba3 100644
--- a/src/scripts/StackedBarTrack.js
+++ b/src/scripts/StackedBarTrack.js
@@ -1,4 +1,5 @@
-import {scaleLinear, scaleOrdinal, schemeCategory10} from 'd3-scale';
+import { scaleLinear, scaleOrdinal, schemeCategory10 } from 'd3-scale';
+import matrixTrackUtils from './MatrixTrackUtils';
 
 const StackedBarTrack = (HGC, ...args) => {
   if (!new.target) {
@@ -16,33 +17,19 @@ const StackedBarTrack = (HGC, ...args) => {
   class StackedBarTrackClass extends HGC.tracks.BarTrack {
     constructor(context, options) {
       super(context, options);
-
+      this.colorToHex = colorToHex;
 
       this.maxAndMin = {
         max: null,
         min: null
       };
-
     }
 
     initTile(tile) {
-      // create the tile
-      // should be overwritten by child classes
-      this.scale.minRawValue = this.minVisibleValue();
-      this.scale.maxRawValue = this.maxVisibleValue();
-
-      this.scale.minValue = this.scale.minRawValue;
-      this.scale.maxValue = this.scale.maxRawValue;
-
-      this.maxAndMin.max = this.scale.maxValue;
-      this.maxAndMin.min = this.scale.minValue;
-
-      // console.log('initTile:', tile.tileId, this.maxAndMin);
-      // tile.minValue = this.scale.minValue;
+      matrixTrackUtils.initTile(this, tile);
 
-      this.localColorToHexScale();
-
-      this.unFlatten(tile);
+      matrixTrackUtils.localColorToHexScale(this);
+      matrixTrackUtils.unFlatten(this, tile);
 
       this.renderTile(tile);
       this.rescaleTiles();
@@ -67,7 +54,7 @@ const StackedBarTrack = (HGC, ...args) => {
 
       for (let i = 0; i < visibleAndFetched.length; i++) {
         const tile = visibleAndFetched[i];
-        this.unFlatten(tile);
+        matrixTrackUtils.unFlatten(this, tile);
       }
 
       this.rescaleTiles();
@@ -90,7 +77,7 @@ const StackedBarTrack = (HGC, ...args) => {
       const {tileX, tileWidth} = this.getTilePosAndDimensions(tile.tileData.zoomLevel,
         tile.tileData.tilePos, this.tilesetInfo.tile_size);
 
-      const matrix = this.unFlatten(tile);
+      const matrix = matrixTrackUtils.unFlatten(this, tile);
 
       this.oldDimensions = this.dimensions; // for mouseover
 
@@ -105,27 +92,6 @@ const StackedBarTrack = (HGC, ...args) => {
       this.makeMouseOverData(tile);
     }
 
-    syncMaxAndMin() {
-      const visibleAndFetched = this.visibleAndFetchedTiles();
-
-      visibleAndFetched.map(tile => {
-        // console.log('tile:', tile.tileId, tile.minValue, tile.maxValue);
-
-        if (tile.minValue + tile.maxValue > this.maxAndMin.min + this.maxAndMin.max) {
-          this.maxAndMin.min = tile.minValue;
-          this.maxAndMin.max = tile.maxValue;
-        }
-          // if (!(this.maxAndMin && this.maxAndMin.min && this.maxAndMin.min < tile.minValue)) {
-          //   this.maxAndMin.min = tile.minValue;
-          // }
-
-          // if (!(this.maxAndMin && this.maxAndMin.max && this.maxAndMin.max > tile.maxValue)) {
-          //   this.maxAndMin.max = tile.maxValue;
-          // }
-        // console.log('this.maxAndMin:', this.maxAndMin);
-      });
-    }
-
     /**
      * Rescales the sprites of all visible tiles when zooming and panning.
      */
@@ -133,7 +99,7 @@ const StackedBarTrack = (HGC, ...args) => {
       // console.log('rescale:')
       const visibleAndFetched = this.visibleAndFetchedTiles();
 
-      this.syncMaxAndMin();
+      matrixTrackUtils.syncMaxAndMin(this);
 
       // console.log('maxAndMin:', this.maxAndMin);
 
@@ -154,19 +120,6 @@ const StackedBarTrack = (HGC, ...args) => {
       });
     }
 
-
-    /**
-     * Converts all colors in a colorScale to Hex colors.
-     */
-    localColorToHexScale() {
-      const colorScale = this.options.colorScale || scaleOrdinal(schemeCategory10);
-      const colorHexMap = {};
-      for (let i = 0; i < colorScale.length; i++) {
-        colorHexMap[colorScale[i]] = colorToHex(colorScale[i]);
-      }
-      this.colorHexMap = colorHexMap;
-    }
-
     /**
      * Find max and min heights for the given tile
      *
@@ -204,70 +157,6 @@ const StackedBarTrack = (HGC, ...args) => {
       return maxAndMin;
     }
 
-
-      /**
-       * un-flatten data into matrix of tile.tileData.shape[0] x tile.tileData.shape[1]
-       *
-       * @param tile
-       * @returns {Array} 2d array of numerical values for each column
-       */
-      unFlatten(tile) {
-        if (tile.matrix) {
-          return tile.matrix;
-        }
-
-        const flattenedArray = tile.tileData.dense;
-
-        // if any data is negative, switch to exponential scale
-        if (flattenedArray.filter(a => a < 0).length > 0 && this.options.valueScaling === 'linear') {
-          console.warn('Negative values present in data. Defaulting to exponential scale.');
-          this.options.valueScaling = 'exponential';
-        }
-
-        const matrix = this.simpleUnFlatten(tile, flattenedArray);
-
-        const maxAndMin = this.findMaxAndMin(matrix);
-        // console.log('unflatten', tile.tileId, maxAndMin.min, maxAndMin.max);
-
-        tile.matrix = matrix;
-        tile.maxValue = maxAndMin.max;
-        tile.minValue = maxAndMin.min;
-
-        this.syncMaxAndMin();
-
-        return matrix;
-      }
-
-      /**
-       *
-       * @param tile
-       * @param data array of values to reshape
-       * @returns {Array} 2D array representation of data
-       */
-      simpleUnFlatten(tile, data) {
-        const shapeX = tile.tileData.shape[0]; // number of different nucleotides in each bar
-        const shapeY = tile.tileData.shape[1]; // number of bars
-
-        // matrix[0] will be [flattenedArray[0], flattenedArray[256], flattenedArray[512], etc.]
-        // because of how flattenedArray comes back from the server.
-        const matrix = [];
-        for (let i = 0; i < shapeX; i++) { // 6
-          for (let j = 0; j < shapeY; j++) { // 256;
-            let singleBar;
-            if (matrix[j] === undefined) {
-              singleBar = [];
-            } else {
-              singleBar = matrix[j];
-            }
-            singleBar.push(data[(shapeY * i) + j]);
-            matrix[j] = singleBar;
-          }
-        }
-
-        return matrix;
-      }
-
-
     /**
      * Map each value in every array in the matrix to a color depending on position in the array
      * Divides each array into positive and negative sections and sorts them