diff --git a/ui/package-lock.json b/ui/package-lock.json
index b0a656572ce..442074f3d60 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1029,6 +1029,54 @@
         }
       }
     },
+    "@influxdata/giraffe": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@influxdata/giraffe/-/giraffe-0.10.0.tgz",
+      "integrity": "sha512-pCCmI8AeWCPXX+i47SoNGp8nC0YT+jUMy5UWNDGuP8rSYZEKdPLbLIiPVetZMngjQ5UbtQ4KptuS2ojWG1Id5Q==",
+      "requires": {
+        "d3-array": "^2.0.3",
+        "d3-color": "^1.2.3",
+        "d3-dsv": "^1.1.1",
+        "d3-format": "^1.3.2",
+        "d3-interpolate": "^1.3.2",
+        "d3-scale": "^2.2.2",
+        "d3-shape": "^1.3.5",
+        "memoize-one": "^5.0.2",
+        "react-virtualized-auto-sizer": "^1.0.2"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.2.0.tgz",
+          "integrity": "sha512-eE0QmSh6xToqM3sxHiJYg/QFdNn52ZEgmFE8A8abU8GsHvsIOolqH8B70/8+VGAKm5MlwaExhqR3DLIjOJMLPA=="
+        },
+        "d3-scale": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+          "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+          "requires": {
+            "d3-array": "^1.2.0",
+            "d3-collection": "1",
+            "d3-format": "1",
+            "d3-interpolate": "1",
+            "d3-time": "1",
+            "d3-time-format": "2"
+          },
+          "dependencies": {
+            "d3-array": {
+              "version": "1.2.4",
+              "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+              "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+            }
+          }
+        },
+        "memoize-one": {
+          "version": "5.0.4",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+          "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
+        }
+      }
+    },
     "@influxdata/influx": {
       "version": "github:influxdata/influxdb2-js#4bb7981498a2649391fbebdcaababafbf304f642",
       "from": "github:influxdata/influxdb2-js#dev",
@@ -1082,54 +1130,6 @@
         "raf": "^3.1.0"
       }
     },
-    "@influxdata/vis": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@influxdata/vis/-/vis-0.9.0.tgz",
-      "integrity": "sha512-Fz49Gu7uG01gbmtDaJ0QuPYpo8XY6OWQyDjvCJIT30LlPdJ6R0QbKXyV/4ZTtTIMcfuhpFz5+9zNhN+nOzDpBQ==",
-      "requires": {
-        "d3-array": "^2.0.3",
-        "d3-color": "^1.2.3",
-        "d3-dsv": "^1.1.1",
-        "d3-format": "^1.3.2",
-        "d3-interpolate": "^1.3.2",
-        "d3-scale": "^2.2.2",
-        "d3-shape": "^1.3.5",
-        "memoize-one": "^5.0.2",
-        "react-virtualized-auto-sizer": "^1.0.2"
-      },
-      "dependencies": {
-        "d3-array": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.2.0.tgz",
-          "integrity": "sha512-eE0QmSh6xToqM3sxHiJYg/QFdNn52ZEgmFE8A8abU8GsHvsIOolqH8B70/8+VGAKm5MlwaExhqR3DLIjOJMLPA=="
-        },
-        "d3-scale": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
-          "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
-          "requires": {
-            "d3-array": "^1.2.0",
-            "d3-collection": "1",
-            "d3-format": "1",
-            "d3-interpolate": "1",
-            "d3-time": "1",
-            "d3-time-format": "2"
-          },
-          "dependencies": {
-            "d3-array": {
-              "version": "1.2.4",
-              "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-              "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
-            }
-          }
-        },
-        "memoize-one": {
-          "version": "5.0.4",
-          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
-          "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
-        }
-      }
-    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index 70dc26d8b95..c63244953ac 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -143,7 +143,7 @@
     "@influxdata/influx": "github:influxdata/influxdb2-js#dev",
     "@influxdata/influxdb-templates": "influxdata/influxdb-templates",
     "@influxdata/react-custom-scrollbars": "4.3.8",
-    "@influxdata/vis": "^0.9.0",
+    "@influxdata/giraffe": "0.10.0",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "bignumber.js": "^4.0.2",
diff --git a/ui/src/shared/components/HeatmapContainer.tsx b/ui/src/shared/components/HeatmapContainer.tsx
index 7c77d301d51..f10218a28fe 100644
--- a/ui/src/shared/components/HeatmapContainer.tsx
+++ b/ui/src/shared/components/HeatmapContainer.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
diff --git a/ui/src/shared/components/HistogramContainer.tsx b/ui/src/shared/components/HistogramContainer.tsx
index 81350dde1e4..7718adbb757 100644
--- a/ui/src/shared/components/HistogramContainer.tsx
+++ b/ui/src/shared/components/HistogramContainer.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
diff --git a/ui/src/shared/components/LatestValueTransform.tsx b/ui/src/shared/components/LatestValueTransform.tsx
index ed30426d815..9ce5e6392b8 100644
--- a/ui/src/shared/components/LatestValueTransform.tsx
+++ b/ui/src/shared/components/LatestValueTransform.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {useMemo, FunctionComponent} from 'react'
-import {Table} from '@influxdata/vis'
+import {Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
diff --git a/ui/src/shared/components/RefreshingViewSwitcher.tsx b/ui/src/shared/components/RefreshingViewSwitcher.tsx
index de2e7642455..12fbb5516bd 100644
--- a/ui/src/shared/components/RefreshingViewSwitcher.tsx
+++ b/ui/src/shared/components/RefreshingViewSwitcher.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Plot} from '@influxdata/vis'
+import {Plot} from '@influxdata/giraffe'
 
 // Components
 import GaugeChart from 'src/shared/components/GaugeChart'
diff --git a/ui/src/shared/components/ScatterContainer.tsx b/ui/src/shared/components/ScatterContainer.tsx
index 916103c9f7a..d0e9001e869 100644
--- a/ui/src/shared/components/ScatterContainer.tsx
+++ b/ui/src/shared/components/ScatterContainer.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
diff --git a/ui/src/shared/components/VisTableTransform.tsx b/ui/src/shared/components/VisTableTransform.tsx
index c77a2f02b92..7fd56b19e7a 100644
--- a/ui/src/shared/components/VisTableTransform.tsx
+++ b/ui/src/shared/components/VisTableTransform.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import {useMemo, FunctionComponent} from 'react'
-import {fromFlux, Table} from '@influxdata/vis'
+import {fromFlux, Table} from '@influxdata/giraffe'
 
 interface VisTableTransformResult {
   table: Table
diff --git a/ui/src/shared/components/XYContainer.tsx b/ui/src/shared/components/XYContainer.tsx
index 7b9575aae06..083078ea92d 100644
--- a/ui/src/shared/components/XYContainer.tsx
+++ b/ui/src/shared/components/XYContainer.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent, useMemo} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
diff --git a/ui/src/shared/components/cells/Cell.scss b/ui/src/shared/components/cells/Cell.scss
index c7c55ed5649..c9cfeb2dba6 100644
--- a/ui/src/shared/components/cells/Cell.scss
+++ b/ui/src/shared/components/cells/Cell.scss
@@ -183,7 +183,7 @@ $cell--header-size: 36px;
   padding: $ix-marg-c;
 }
 
-.vis-tooltip-container {
+.giraffe-tooltip-container {
   z-index: $z--dygraph-legend;
 }
 
diff --git a/ui/src/shared/constants/index.ts b/ui/src/shared/constants/index.ts
index fe3fb726818..079dbf7d6c7 100644
--- a/ui/src/shared/constants/index.ts
+++ b/ui/src/shared/constants/index.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import {Config} from '@influxdata/vis'
+import {Config} from '@influxdata/giraffe'
 import {AutoRefreshStatus} from 'src/types'
 
 export const DEFAULT_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
diff --git a/ui/src/shared/utils/latestValues.test.ts b/ui/src/shared/utils/latestValues.test.ts
index 79a1ddd06ec..67afb2c27d9 100644
--- a/ui/src/shared/utils/latestValues.test.ts
+++ b/ui/src/shared/utils/latestValues.test.ts
@@ -1,4 +1,4 @@
-import {fromFlux} from '@influxdata/vis'
+import {fromFlux} from '@influxdata/giraffe'
 
 import {latestValues} from 'src/shared/utils/latestValues'
 
diff --git a/ui/src/shared/utils/latestValues.ts b/ui/src/shared/utils/latestValues.ts
index e4359ff929e..52831ea0b46 100644
--- a/ui/src/shared/utils/latestValues.ts
+++ b/ui/src/shared/utils/latestValues.ts
@@ -1,5 +1,5 @@
 import {range, flatMap} from 'lodash'
-import {Table} from '@influxdata/vis'
+import {Table} from '@influxdata/giraffe'
 
 /*
   Return a list of the maximum elements in `xs`, where the magnitude of each
diff --git a/ui/src/shared/utils/useVisDomainSettings.ts b/ui/src/shared/utils/useVisDomainSettings.ts
index 9caa2f313d8..69cb9071302 100644
--- a/ui/src/shared/utils/useVisDomainSettings.ts
+++ b/ui/src/shared/utils/useVisDomainSettings.ts
@@ -7,7 +7,7 @@ import {extent} from 'src/shared/utils/vis'
 
 /*
   This hook helps map the domain setting stored for line graph to the
-  appropriate settings on a @influxdata/vis `Config` object. 
+  appropriate settings on a @influxdata/giraffe `Config` object. 
 
   If the domain setting is present, it should be used. If the domain setting is
   not present, then the min/max values shown should be derived from the data
diff --git a/ui/src/shared/utils/view.ts b/ui/src/shared/utils/view.ts
index b54c9a25489..219770505f3 100644
--- a/ui/src/shared/utils/view.ts
+++ b/ui/src/shared/utils/view.ts
@@ -1,5 +1,5 @@
 // Constants
-import {INFERNO, NINETEEN_EIGHTY_FOUR} from '@influxdata/vis'
+import {INFERNO, NINETEEN_EIGHTY_FOUR} from '@influxdata/giraffe'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {DEFAULT_CELL_NAME} from 'src/dashboards/constants/index'
 import {
diff --git a/ui/src/shared/utils/vis.ts b/ui/src/shared/utils/vis.ts
index b36d60d0b8b..99d2cde19a8 100644
--- a/ui/src/shared/utils/vis.ts
+++ b/ui/src/shared/utils/vis.ts
@@ -1,5 +1,5 @@
 // Libraries
-import {Table, ColumnType, LineInterpolation} from '@influxdata/vis'
+import {Table, ColumnType, LineInterpolation} from '@influxdata/giraffe'
 
 // Utils
 import {formatNumber} from 'src/shared/utils/formatNumber'
diff --git a/ui/src/timeMachine/actions/index.ts b/ui/src/timeMachine/actions/index.ts
index c8e582489b7..f0a2735cded 100644
--- a/ui/src/timeMachine/actions/index.ts
+++ b/ui/src/timeMachine/actions/index.ts
@@ -22,7 +22,7 @@ import {
   AutoRefresh,
 } from 'src/types'
 import {Color} from 'src/types/colors'
-import {HistogramPosition} from '@influxdata/vis'
+import {HistogramPosition} from '@influxdata/giraffe'
 
 export type Action =
   | QueryBuilderAction
diff --git a/ui/src/timeMachine/components/VisDataTransform.tsx b/ui/src/timeMachine/components/VisDataTransform.tsx
index 68fc81799d5..33446484c9d 100644
--- a/ui/src/timeMachine/components/VisDataTransform.tsx
+++ b/ui/src/timeMachine/components/VisDataTransform.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import {FunctionComponent} from 'react'
 import {connect} from 'react-redux'
-import {Table} from '@influxdata/vis'
+import {Table} from '@influxdata/giraffe'
 
 // Utils
 import {
diff --git a/ui/src/timeMachine/components/VisSwitcher.tsx b/ui/src/timeMachine/components/VisSwitcher.tsx
index cdd429b2407..9355329d943 100644
--- a/ui/src/timeMachine/components/VisSwitcher.tsx
+++ b/ui/src/timeMachine/components/VisSwitcher.tsx
@@ -2,7 +2,7 @@
 import React, {FunctionComponent} from 'react'
 import {connect} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
-import {Plot} from '@influxdata/vis'
+import {Plot} from '@influxdata/giraffe'
 
 // Components
 import RawFluxDataTable from 'src/timeMachine/components/RawFluxDataTable'
diff --git a/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx b/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
index 2ac7ffbe187..f65f898ef7e 100644
--- a/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
+++ b/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import React, {FunctionComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
-import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/vis'
+import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/giraffe'
 import {Form, Grid, Input, Columns, InputType} from '@influxdata/clockface'
 
 // Components
diff --git a/ui/src/timeMachine/components/view_options/HistogramOptions.tsx b/ui/src/timeMachine/components/view_options/HistogramOptions.tsx
index ae31e553d43..bac1aa17f5c 100644
--- a/ui/src/timeMachine/components/view_options/HistogramOptions.tsx
+++ b/ui/src/timeMachine/components/view_options/HistogramOptions.tsx
@@ -29,7 +29,7 @@ import {
 
 // Types
 import {ComponentStatus} from '@influxdata/clockface'
-import {HistogramPosition} from '@influxdata/vis'
+import {HistogramPosition} from '@influxdata/giraffe'
 import {Color} from 'src/types/colors'
 import {AppState} from 'src/types'
 import ColumnSelector from 'src/shared/components/ColumnSelector'
diff --git a/ui/src/timeMachine/components/view_options/ScatterOptions.tsx b/ui/src/timeMachine/components/view_options/ScatterOptions.tsx
index 3efb75307d9..db01c20b1d4 100644
--- a/ui/src/timeMachine/components/view_options/ScatterOptions.tsx
+++ b/ui/src/timeMachine/components/view_options/ScatterOptions.tsx
@@ -9,7 +9,7 @@ import {
   CTHULHU,
   ECTOPLASM,
   T_MAX_400_FILM,
-} from '@influxdata/vis'
+} from '@influxdata/giraffe'
 
 // Components
 import {Form, Input, Grid} from '@influxdata/clockface'
diff --git a/ui/src/timeMachine/selectors/index.ts b/ui/src/timeMachine/selectors/index.ts
index 07371a67096..7b4855f8c1e 100644
--- a/ui/src/timeMachine/selectors/index.ts
+++ b/ui/src/timeMachine/selectors/index.ts
@@ -1,7 +1,7 @@
 // Libraries
 import memoizeOne from 'memoize-one'
 import {get, flatMap} from 'lodash'
-import {fromFlux, Table} from '@influxdata/vis'
+import {fromFlux, Table} from '@influxdata/giraffe'
 
 // Utils
 import {parseResponse} from 'src/shared/parsing/flux/response'
diff --git a/ui/src/types/dashboards.ts b/ui/src/types/dashboards.ts
index bf038241d67..21aa697ff16 100644
--- a/ui/src/types/dashboards.ts
+++ b/ui/src/types/dashboards.ts
@@ -1,4 +1,4 @@
-import {HistogramPosition} from '@influxdata/vis'
+import {HistogramPosition} from '@influxdata/giraffe'
 import {Color} from 'src/types/colors'
 
 import {