diff --git a/x-pack/legacy/plugins/graph/public/_main.scss b/x-pack/legacy/plugins/graph/public/_main.scss
index 7e70ccd6f35d8b..2559b7d1aba5ca 100644
--- a/x-pack/legacy/plugins/graph/public/_main.scss
+++ b/x-pack/legacy/plugins/graph/public/_main.scss
@@ -1,32 +1,3 @@
-/**
- * Nodes
- */
-
-.gphNode-disabled{
-  opacity:0.3;
-}
-
-.gphNode__circle {
-  fill: $euiColorMediumShade;
-
-  // SASSTODO: Can't definitively change modifier class
-  // because it's not easy to tell what's a class and what's
-  // part of the data object since they are named the same
-  &.selectedNode {
-    stroke-width: $euiSizeXS;
-    stroke: transparentize($euiColorPrimary, .25);
-  }
-}
-
-.gphNode__text {
-  fill: $euiColorDarkestShade;
-
-  &--lowOpacity{
-    fill-opacity: 0.5;
-  }
-}
-
-
 /**
  * Forms
  */
@@ -35,64 +6,16 @@
   margin-bottom: $euiSizeS;
 }
 
-.gphColorPicker__color,
-.gphIconPicker__icon {
+.gphColorPicker__color {
   margin: $euiSizeXS;
   cursor: pointer;
 
-  &.selectedNode,
   &:hover,
   &:focus {
     transform: scale(1.4);
   }
 }
 
-.gphIconPicker__icon {
-  opacity: .7;
-
-  &.selectedNode,
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-}
-
-.gphIndexSelect{
-  max-width: $euiSizeL * 10;
-  margin-right: $euiSizeXS;
-
-  &-unselected {
-    @include euiFocusRing;
-  }
-}
-
-.gphAddButton {
-  background: $euiColorPrimary;
-  color: $euiColorEmptyShade;
-  border-radius: 50%;
-  font-size: $euiFontSizeXS;
-  margin: 2px $euiSizeS 0 $euiSizeXS;
-  @include size(26px); // same as svg
-
-  &:hover:not(:disabled) {
-    background: shadeOrTint($euiColorPrimary, 10%, 10%);
-    cursor: pointer;
-  }
-
-  &:disabled {
-    background: $euiColorMediumShade;
-    cursor: not-allowed;
-  }
-
-  &-focus {
-    @include euiFocusRing;
-  }
-}
-
-.gphFieldList {
-  min-width: $euiSizeXL * 10;
-}
-
 /**
  * Utilities
  */
diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss b/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
index 20ca704b9282ba..0f2bf90a10d4f3 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
@@ -27,53 +27,6 @@
   flex: 1;
 }
 
-.gphGraph {
-  // SASSTODO: Can't definitively change child class
-  // because it's not easy to tell what's a class and what's
-  // part of the data object since they are named the same
-  .edge {
-    fill: $euiColorMediumShade;
-    stroke: $euiColorMediumShade;
-    stroke-width: 2;
-    stroke-opacity: 0.5;
-
-    &:hover {
-      stroke-opacity: 0.95;
-      cursor: pointer;
-    }
-  }
-
-  .edge.selectedEdge {
-    stroke: $euiColorDarkShade;
-    stroke-opacity: 0.95;
-  }
-
-  .edge.inferredEdge {
-    stroke-dasharray: 5,5;
-  }
-}
-
-.gphNode__label {
-  @include gphSvgText;
-  cursor: pointer;
-}
-
-.gphNode__label--html {
-  @include euiTextTruncate;
-  text-align: center;
-}
-
-.gphNode__markerCircle {
-  fill: $euiColorDarkShade;
-  stroke: $euiColorEmptyShade;
-}
-
-.gphNode__markerText {
-  @include gphSvgText;
-  font-size: $euiSizeS - 2px;
-  fill: $euiColorEmptyShade;
-}
-
 .gphGraph__menus {
   margin: $euiSizeS;
 }
diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/index.html b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
index 52f901f7d169ed..267e7564fb8302 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/index.html
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
@@ -21,65 +21,13 @@
     dispatch="reduxDispatch"
   ></graph-app>
 
-  <div class="gphGraph__container" id="GraphSvgContainer">
-    <svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" ng-click="hideAllConfigPanels()">
-      <g id="svgRootGroup">
-        <g>
-          <line ng-repeat="edge in workspace.edges" class="edge" ng-attr-x1="{{edge.topSrc.kx}}" ng-attr-y1="{{edge.topSrc.ky}}"
-            ng-attr-x2="{{edge.topTarget.kx}}" ng-attr-y2="{{edge.topTarget.ky}}" ng-click="clickEdge(edge)" ng-class="{'selectedEdge':edge.isSelected, 'inferredEdge':edge.inferred}"
-            ng-attr-style="stroke-width:{{edge.width}}px" stroke-linecap="round" />
-        </g>
-        <g ng-repeat="n in workspace.nodes" ng-if="!n.parent">
-          <circle class="gphNode__circle" ng-attr-r="{{n.scaledSize}}" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}" ng-click="nodeClick(n, $event)"
-            ng-class="{selectedNode:n.isSelected}" ng-attr-style="fill:{{n.color}}" />
-          <text class="fa gphNode__text gphNode__text--lowOpacity" transform="translate(0,5)" text-anchor="middle" ng-attr-x="{{n.kx}}"
-            ng-attr-y="{{n.ky}}" ng-if="n.icon" ng-click="nodeClick(n, $event)">{{n.icon.code}}</text>
-
-          <!-- Using 2 strategies for rendering labels - small text uses SVG for performance,
-            larger text uses HTML for word-wrapping capabilities but can be jittery.
-          -->
-
-          <text ng-if="n.label.length<30" class="gphNode__label" text-anchor="middle" transform="translate(0,22)"
-            ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
-            {{n.label}}
-          </text>
-          <foreignObject ng-if="n.label.length>=30" width="100" height="20" transform="translate(-50,15)" ng-attr-x="{{n.kx}}"
-            ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
-
-            <body xmlns="http://www.w3.org/1999/xhtml">
-              <p class="gphNode__label gphNode__label--html gphNoUserSelect">{{n.label}}</p>
-            </body>
-          </foreignObject>
-
-          <g ng-if="n.numChildren>0">
-            <circle r="5" class="gphNode__markerCircle" transform="translate(10,10)" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}"
-              ng-click="nodeClick(n, $event)" />
-            <text class="gphNode__markerText" text-anchor="middle" transform="translate(10,12)" ng-attr-x="{{n.kx}}"
-              ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">{{n.numChildren}}
-            </text>
-
-          </g>
-        </g>
-      </g>
-    </svg>
-
-    <!--
-            Experiment with group/ungroup buttons that reveal-on-zoom on nodes.
-
-     <g ng-if="workspace.selectedNodes.length>1||(workspace.selectedNodes.length>0&&workspace.selectedNodes[0] !== n)">
-      <g ng-if="zoomLevel>10" transform="translate(-1,-7)">
-        <rect class="SvgZoomedIconButton" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" transform="translate(-1.5,-1.2)" ng-click="workspace.groupSelections(n)" width="6.5" height="2.2" rx="0.2" ry="0.2" />
-        <text class="SvgZoomedButtonText" transform="translate(3,0.3)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.groupSelections(n)">group</text>
-        <text class="SvgZoomedIconButtonText" transform="translate(-0.2,0.6)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.groupSelections(n)">&#xf247</text>
-      </g>
-    </g>
-    <g ng-if="zoomLevel>10" transform="translate(8,12.5)">
-      <rect class="SvgZoomedIconButton" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" transform="translate(-1.5,-1.2)" ng-click="workspace.ungroup(n)" width="7" height="2" rx="0.2" ry="0.2" />
-      <text class="SvgZoomedButtonText" transform="translate(3,0.3)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.ungroup(n)">ungroup</text>
-      <text class="SvgZoomedIconButtonText" transform="translate(-0.4,0.6)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.ungroup(n)">&#xf09c</text>
-    </g>
-
-  -->
+  <div class="gphGraph__container" id="GraphSvgContainer" ng-click="hideAllConfigPanels()">
+    <graph-visualization
+      nodes="workspace.nodes"
+      edges="workspace.edges"
+      edge-click="clickEdge"
+      node-click="nodeClick"
+    ></graph-visualization>
 
     <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
 
diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
index a9b74bb4f6e672..32fd24b8bed6d8 100644
--- a/x-pack/legacy/plugins/graph/public/app.js
+++ b/x-pack/legacy/plugins/graph/public/app.js
@@ -5,7 +5,6 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import 'ace';
 import rison from 'rison-node';
@@ -45,6 +44,7 @@ import { GraphApp } from './components/app';
 import { VennDiagram } from './components/venn_diagram';
 import { Listing } from './components/listing';
 import { Settings } from './components/settings';
+import { GraphVisualization } from './components/graph_visualization';
 
 import gws from './angular/graph_client_workspace.js';
 import { SavedWorkspacesProvider } from './angular/services/saved_workspaces';
@@ -122,6 +122,11 @@ app.directive('graphApp', function (reactDirective) {
   ]);
 });
 
+app.directive('graphVisualization', function (reactDirective) {
+  return reactDirective(GraphVisualization);
+});
+
+
 if (uiRoutes.enable) {
   uiRoutes.enable();
 }
@@ -590,6 +595,10 @@ app.controller('graphuiPlugin', function (
     }
   }
 
+  $scope.aceLoaded = (editor) => {
+    editor.$blockScrolling = Infinity;
+  };
+
   $scope.setDetail = function (data) {
     $scope.detail = data;
   };
@@ -630,33 +639,9 @@ app.controller('graphuiPlugin', function (
     $scope.detail = { mergeCandidates };
   };
 
-  // Zoom functions for the SVG-based graph
-  const redraw = function () {
-    d3.select('#svgRootGroup')
-      .attr('transform',
-        'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')')
-      .attr('style', 'stroke-width: ' + 1 / d3.event.scale);
-    //To make scale-dependent features possible....
-    if ($scope.zoomLevel !== d3.event.scale) {
-      $scope.zoomLevel = d3.event.scale;
-      $scope.$apply();
-    }
-  };
-
   //initialize all the state
   $scope.resetWorkspace();
 
-
-  const blockScroll = function () {
-    d3.event.preventDefault();
-  };
-  d3.select('#graphSvg')
-    .on('mousewheel', blockScroll)
-    .on('DOMMouseScroll', blockScroll)
-    .call(d3.behavior.zoom()
-      .on('zoom', redraw));
-
-
   const managementUrl = npStart.core.chrome.navLinks.get('kibana:management').url;
   const url = `${managementUrl}/kibana/index_patterns`;
 
diff --git a/x-pack/legacy/plugins/graph/public/components/_index.scss b/x-pack/legacy/plugins/graph/public/components/_index.scss
index bf0af682310e04..85bbf4fcc3adef 100644
--- a/x-pack/legacy/plugins/graph/public/components/_index.scss
+++ b/x-pack/legacy/plugins/graph/public/components/_index.scss
@@ -1,5 +1,6 @@
 @import './app';
 @import './search_bar';
+@import './graph_visualization/index';
 @import './venn_diagram/index';
 @import './settings/index';
 @import './legacy_icon/index';
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
new file mode 100644
index 00000000000000..0339bfc8a9be5d
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graph_visualization should render to svg elements 1`] = `
+<svg
+  className="gphGraph"
+  height="100%"
+  id="graphSvg"
+  pointerEvents="all"
+  width="100%"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g>
+    <g>
+      <line
+        className="gphEdge gphEdge--selected"
+        key="A..1-B..2"
+        onClick={[Function]}
+        strokeLinecap="round"
+        style={
+          Object {
+            "strokeWidth": 2,
+          }
+        }
+        x1={5}
+        x2={7}
+        y1={5}
+        y2={9}
+      />
+      <line
+        className="gphEdge gphEdge--selected"
+        key="B..2-C..3"
+        onClick={[Function]}
+        strokeLinecap="round"
+        style={
+          Object {
+            "strokeWidth": 2.2,
+          }
+        }
+        x1={7}
+        x2={12}
+        y1={9}
+        y2={2}
+      />
+    </g>
+    <g
+      className="gphNode"
+      key="A..1"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle gphNode__circle--selected"
+        cx={5}
+        cy={5}
+        r={10}
+        style={
+          Object {
+            "fill": "black",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--inverse"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={5}
+        y={5}
+      >
+        a
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={5}
+        y={5}
+      >
+        1
+      </text>
+      <g>
+        <circle
+          className="gphNode__markerCircle"
+          cx={5}
+          cy={5}
+          r="5"
+          transform="translate(10,10)"
+        />
+        <text
+          className="gphNode__markerText"
+          textAnchor="middle"
+          transform="translate(10,12)"
+          x={5}
+          y={5}
+        >
+          1
+        </text>
+      </g>
+    </g>
+    <g
+      className="gphNode"
+      key="B..2"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle"
+        cx={7}
+        cy={9}
+        r={10}
+        style={
+          Object {
+            "fill": "red",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--inverse"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={7}
+        y={9}
+      >
+        b
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={7}
+        y={9}
+      >
+        2
+      </text>
+    </g>
+    <g
+      className="gphNode"
+      key="C..3"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle"
+        cx={12}
+        cy={2}
+        r={10}
+        style={
+          Object {
+            "fill": "yellow",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--inverse"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={12}
+        y={2}
+      >
+        c
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={12}
+        y={2}
+      >
+        3
+      </text>
+    </g>
+  </g>
+</svg>
+`;
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
new file mode 100644
index 00000000000000..4613ac77b97bba
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
@@ -0,0 +1,60 @@
+.gphEdge {
+  fill: $euiColorMediumShade;
+  stroke: $euiColorMediumShade;
+  stroke-width: 2;
+  stroke-opacity: 0.5;
+
+  &:hover {
+    stroke-opacity: 0.95;
+    cursor: pointer;
+  }
+
+  &--selected {
+    stroke: $euiColorDarkShade;
+    stroke-opacity: 0.95;
+  }
+
+  &--inferred {
+    stroke-dasharray: 5, 5;
+  }
+}
+
+.gphNode {
+  cursor: pointer;
+}
+
+.gphNode__label {
+  @include gphSvgText;
+  cursor: pointer;
+  &--html {
+    @include euiTextTruncate;
+    text-align: center;
+  }
+}
+
+.gphNode__markerCircle {
+  fill: $euiColorDarkShade;
+  stroke: $euiColorEmptyShade;
+}
+
+.gphNode__markerText {
+  @include gphSvgText;
+  font-size: $euiSizeS - 2px;
+  fill: $euiColorEmptyShade;
+}
+
+.gphNode__circle {
+  fill: $euiColorMediumShade;
+  &--selected {
+    stroke-width: $euiSizeXS;
+    stroke: transparentize($euiColorPrimary, 0.25);
+  }
+}
+
+.gphNode__text {
+  fill: $euiColorInk;
+
+  &--inverse {
+    fill: $euiColorGhost;
+  }
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss
new file mode 100644
index 00000000000000..8df131c731c22d
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss
@@ -0,0 +1 @@
+@import './graph_visualization';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
new file mode 100644
index 00000000000000..deeea8175da8ec
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
@@ -0,0 +1,164 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import {
+  GraphVisualization,
+  GroupAwareWorkspaceNode,
+  GroupAwareWorkspaceEdge,
+} from './graph_visualization';
+
+describe('graph_visualization', () => {
+  const nodes: GroupAwareWorkspaceNode[] = [
+    {
+      color: 'black',
+      data: {
+        field: 'A',
+        term: '1',
+      },
+      icon: {
+        class: 'a',
+        code: 'a',
+        label: '',
+      },
+      isSelected: true,
+      kx: 5,
+      ky: 5,
+      label: '1',
+      numChildren: 1,
+      parent: null,
+      scaledSize: 10,
+      x: 5,
+      y: 5,
+    },
+    {
+      color: 'red',
+      data: {
+        field: 'B',
+        term: '2',
+      },
+      icon: {
+        class: 'b',
+        code: 'b',
+        label: '',
+      },
+      isSelected: false,
+      kx: 7,
+      ky: 9,
+      label: '2',
+      numChildren: 0,
+      parent: null,
+      scaledSize: 10,
+      x: 7,
+      y: 9,
+    },
+    {
+      color: 'yellow',
+      data: {
+        field: 'C',
+        term: '3',
+      },
+      icon: {
+        class: 'c',
+        code: 'c',
+        label: '',
+      },
+      isSelected: false,
+      kx: 12,
+      ky: 2,
+      label: '3',
+      numChildren: 0,
+      parent: null,
+      scaledSize: 10,
+      x: 7,
+      y: 9,
+    },
+  ];
+  const edges: GroupAwareWorkspaceEdge[] = [
+    {
+      inferred: false,
+      isSelected: true,
+      label: '',
+      topSrc: nodes[0],
+      topTarget: nodes[1],
+      source: nodes[0],
+      target: nodes[1],
+      weight: 10,
+      width: 2,
+    },
+    {
+      inferred: false,
+      isSelected: true,
+      label: '',
+      topSrc: nodes[1],
+      topTarget: nodes[2],
+      source: nodes[1],
+      target: nodes[2],
+      weight: 10,
+      width: 2.2,
+    },
+  ];
+  it('should render empty workspace without data', () => {
+    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} />))
+      .toMatchInlineSnapshot(`
+      <svg
+        className="gphGraph"
+        height="100%"
+        id="graphSvg"
+        pointerEvents="all"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <g />
+        </g>
+      </svg>
+    `);
+  });
+
+  it('should render to svg elements', () => {
+    expect(
+      shallow(
+        <GraphVisualization edgeClick={() => {}} nodeClick={() => {}} nodes={nodes} edges={edges} />
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('should react to node click', () => {
+    const nodeClickSpy = jest.fn();
+    const instance = shallow(
+      <GraphVisualization
+        edgeClick={() => {}}
+        nodeClick={nodeClickSpy}
+        nodes={nodes}
+        edges={edges}
+      />
+    );
+    instance
+      .find('.gphNode')
+      .first()
+      .simulate('click', {});
+    expect(nodeClickSpy).toHaveBeenCalledWith(nodes[0], {});
+  });
+
+  it('should react to edge click', () => {
+    const edgeClickSpy = jest.fn();
+    const instance = shallow(
+      <GraphVisualization
+        edgeClick={edgeClickSpy}
+        nodeClick={() => {}}
+        nodes={nodes}
+        edges={edges}
+      />
+    );
+    instance
+      .find('.gphEdge')
+      .first()
+      .simulate('click');
+    expect(edgeClickSpy).toHaveBeenCalledWith(edges[0]);
+  });
+});
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
new file mode 100644
index 00000000000000..696e94da68a68a
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -0,0 +1,194 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import d3, { ZoomEvent } from 'd3';
+import { isColorDark, hexToRgb } from '@elastic/eui';
+import { WorkspaceNode, WorkspaceEdge } from '../../types';
+import { makeNodeId } from '../../services/persistence';
+
+/*
+ * The layouting algorithm sets a few extra properties on
+ * node objects to handle grouping. This will be moved to
+ * a separate data structure when the layouting is migrated
+ */
+
+export interface GroupAwareWorkspaceNode extends WorkspaceNode {
+  kx: number;
+  ky: number;
+  numChildren: number;
+}
+
+export interface GroupAwareWorkspaceEdge extends WorkspaceEdge {
+  topTarget: GroupAwareWorkspaceNode;
+  topSrc: GroupAwareWorkspaceNode;
+}
+
+export interface GraphVisualizationProps {
+  nodes?: GroupAwareWorkspaceNode[];
+  edges?: GroupAwareWorkspaceEdge[];
+  edgeClick: (edge: GroupAwareWorkspaceEdge) => void;
+  nodeClick: (node: GroupAwareWorkspaceNode, e: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+function registerZooming(element: SVGSVGElement) {
+  const blockScroll = function() {
+    (d3.event as Event).preventDefault();
+  };
+  d3.select(element)
+    .on('mousewheel', blockScroll)
+    .on('DOMMouseScroll', blockScroll)
+    .call(
+      d3.behavior.zoom().on('zoom', () => {
+        const event = d3.event as ZoomEvent;
+        d3.select(element)
+          .select('g')
+          .attr('transform', 'translate(' + event.translate + ')' + 'scale(' + event.scale + ')')
+          .attr('style', 'stroke-width: ' + 1 / event.scale);
+      })
+    );
+}
+
+export function GraphVisualization({
+  nodes,
+  edges,
+  edgeClick,
+  nodeClick,
+}: GraphVisualizationProps) {
+  const svgRoot = useRef<SVGSVGElement | null>(null);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="gphGraph"
+      width="100%"
+      height="100%"
+      pointerEvents="all"
+      id="graphSvg"
+      ref={element => {
+        if (element && svgRoot.current !== element) {
+          svgRoot.current = element;
+          registerZooming(element);
+        }
+      }}
+    >
+      <g>
+        <g>
+          {edges &&
+            edges.map(edge => (
+              <line
+                key={`${makeNodeId(edge.source.data.field, edge.source.data.term)}-${makeNodeId(
+                  edge.target.data.field,
+                  edge.target.data.term
+                )}`}
+                x1={edge.topSrc.kx}
+                y1={edge.topSrc.ky}
+                x2={edge.topTarget.kx}
+                y2={edge.topTarget.ky}
+                onClick={() => {
+                  edgeClick(edge);
+                }}
+                className={classNames('gphEdge', {
+                  'gphEdge--selected': edge.isSelected,
+                  'gphEdge--inferred': edge.inferred,
+                })}
+                style={{ strokeWidth: edge.width }}
+                strokeLinecap="round"
+              />
+            ))}
+        </g>
+        {nodes &&
+          nodes
+            .filter(node => !node.parent)
+            .map(node => (
+              <g
+                key={makeNodeId(node.data.field, node.data.term)}
+                onClick={e => {
+                  nodeClick(node, e);
+                }}
+                onMouseDown={e => {
+                  // avoid selecting text when selecting nodes
+                  if (e.ctrlKey || e.shiftKey) {
+                    e.preventDefault();
+                  }
+                }}
+                className="gphNode"
+              >
+                <circle
+                  cx={node.kx}
+                  cy={node.ky}
+                  r={node.scaledSize}
+                  className={classNames('gphNode__circle', {
+                    'gphNode__circle--selected': node.isSelected,
+                  })}
+                  style={{ fill: node.color }}
+                />
+                {node.icon && (
+                  <text
+                    className={classNames('fa gphNode__text', {
+                      'gphNode__text--inverse': isColorDark(...hexToRgb(node.color)),
+                    })}
+                    transform="translate(0,5)"
+                    textAnchor="middle"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    {node.icon.code}
+                  </text>
+                )}
+
+                {node.label.length < 30 && (
+                  <text
+                    className="gphNode__label"
+                    textAnchor="middle"
+                    transform="translate(0,22)"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    {node.label}
+                  </text>
+                )}
+                {node.label.length >= 30 && (
+                  <foreignObject
+                    width="100"
+                    height="20"
+                    transform="translate(-50,15)"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    <p className="gphNode__label gphNode__label--html gphNoUserSelect">
+                      {node.label}
+                    </p>
+                  </foreignObject>
+                )}
+
+                {node.numChildren > 0 && (
+                  <g>
+                    <circle
+                      r="5"
+                      className="gphNode__markerCircle"
+                      transform="translate(10,10)"
+                      cx={node.kx}
+                      cy={node.ky}
+                    />
+                    <text
+                      className="gphNode__markerText"
+                      textAnchor="middle"
+                      transform="translate(10,12)"
+                      x={node.kx}
+                      y={node.ky}
+                    >
+                      {node.numChildren}
+                    </text>
+                  </g>
+                )}
+              </g>
+            ))}
+      </g>
+    </svg>
+  );
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts b/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
new file mode 100644
index 00000000000000..7f8fd972efb775
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './graph_visualization';
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
index 75a578fe6ed21a..56fc1b31a9ffaf 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
@@ -1,7 +1,20 @@
 .gphLegacyIcon {
   width: $euiSizeS * 2;
-}
 
-.gphLegacyIcon--list {
-  margin-right: $euiSizeM;
+  &--list {
+    margin-right: $euiSizeM;
+  }
+
+  &--pickable {
+    margin: $euiSizeXS;
+    cursor: pointer;
+    opacity: 0.7;
+  }
+
+  &--pickable:hover,
+  &--pickable:focus,
+  &--selected {
+    transform: scale(1.4);
+    opacity: 1;
+  }
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx b/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
index 7b0f2fbee6938d..2c7b625664b227 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
@@ -21,11 +21,8 @@ export function LegacyIcon(props: LegacyIconProps) {
   const icon = (
     <i
       className={classNames('fa', props.className, 'gphLegacyIcon', {
-        selectedNode: props.selected,
-        gphNode__text: !props.onClick,
-        'gphNode__text--lowOpacity': !props.onClick,
-        gphIconPicker__icon: !!props.onClick,
-        gphNoUserSelect: !!props.onClick,
+        'gphLegacyIcon--selected': props.selected,
+        'gphLegacyIcon--pickable': !!props.onClick,
         'gphLegacyIcon--list': props.asListIcon,
       })}
       aria-label={props.icon.label}
diff --git a/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts b/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
index 33c94dbcdbfcb5..855818886ab6fa 100644
--- a/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
+++ b/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { palettes } from '@elastic/eui/lib/services';
-import { isColorDark, hexToRgb } from '@elastic/eui';
 
 export interface FontawesomeIcon {
   class: string;
@@ -256,6 +255,4 @@ urlTemplateIconChoices.forEach(icon => {
   urlTemplateIconChoicesByClass[icon.class] = icon;
 });
 
-export const colorChoices = palettes.euiPaletteColorBlind.colors.filter(
-  (hex: string) => !isColorDark(...hexToRgb(hex))
-);
+export const colorChoices = palettes.euiPaletteColorBlind.colors;
diff --git a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
index 589ed4f3f637e8..4575b596d65d9b 100644
--- a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
+++ b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
@@ -156,7 +156,7 @@ describe('deserialize', () => {
           "type": "string",
         },
         Object {
-          "color": "#FCA5D3",
+          "color": "#CE0060",
           "hopSize": 5,
           "icon": Object {
             "class": "fa-folder-open-o",
diff --git a/x-pack/legacy/plugins/graph/public/types/workspace_state.ts b/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
index 42e1e759835a70..54666c48161e68 100644
--- a/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
+++ b/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
@@ -28,6 +28,7 @@ export interface WorkspaceNode {
   scaledSize: number;
   parent: WorkspaceNode | null;
   color: string;
+  isSelected?: boolean;
 }
 
 export interface WorkspaceEdge {
@@ -37,6 +38,7 @@ export interface WorkspaceEdge {
   label: string;
   source: WorkspaceNode;
   target: WorkspaceNode;
+  isSelected?: boolean;
 }
 
 export interface GraphData {