diff --git a/src/legacy/core_plugins/data/public/search/aggs/__tests__/buckets/_terms_other_bucket_helper.js b/src/legacy/core_plugins/data/public/search/aggs/__tests__/buckets/_terms_other_bucket_helper.js
index 247290731df57..749dad377f2e2 100644
--- a/src/legacy/core_plugins/data/public/search/aggs/__tests__/buckets/_terms_other_bucket_helper.js
+++ b/src/legacy/core_plugins/data/public/search/aggs/__tests__/buckets/_terms_other_bucket_helper.js
@@ -24,7 +24,7 @@ import {
   mergeOtherBucketAggResponse,
   updateMissingBucket,
 } from '../../buckets/_terms_other_bucket_helper';
-import { Vis } from '../../../../../../../core_plugins/visualizations/public';
+import { start as visualizationsStart } from '../../../../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
 const visConfigSingleTerm = {
@@ -191,7 +191,7 @@ describe('Terms Agg Other bucket helper', () => {
     ngMock.inject(Private => {
       const indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
 
-      vis = new Vis(indexPattern, aggConfig);
+      vis = new visualizationsStart.Vis(indexPattern, aggConfig);
     });
   }
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/build_services.ts b/src/legacy/core_plugins/kibana/public/discover/build_services.ts
index f9265323b2dcb..81f1c911f1cc9 100644
--- a/src/legacy/core_plugins/kibana/public/discover/build_services.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/build_services.ts
@@ -36,6 +36,7 @@ import { SharePluginStart } from '../../../../../plugins/share/public';
 import { SavedSearch } from './np_ready/types';
 import { DocViewsRegistry } from './np_ready/doc_views/doc_views_registry';
 import { ChartsPluginStart } from '../../../../../plugins/charts/public';
+import { VisualizationsStart } from '../../../visualizations/public';
 
 export interface DiscoverServices {
   addBasePath: (path: string) => string;
@@ -56,6 +57,7 @@ export interface DiscoverServices {
   getSavedSearchById: (id: string) => Promise<SavedSearch>;
   getSavedSearchUrlById: (id: string) => Promise<string>;
   uiSettings: IUiSettingsClient;
+  visualizations: VisualizationsStart;
 }
 export async function buildServices(
   core: CoreStart,
@@ -89,5 +91,6 @@ export async function buildServices(
     timefilter: plugins.data.query.timefilter.timefilter,
     toastNotifications: core.notifications.toasts,
     uiSettings: core.uiSettings,
+    visualizations: plugins.visualizations,
   };
 }
diff --git a/src/legacy/core_plugins/kibana/public/discover/legacy.ts b/src/legacy/core_plugins/kibana/public/discover/legacy.ts
index ff44fbbe115d5..a1ef646f4fe85 100644
--- a/src/legacy/core_plugins/kibana/public/discover/legacy.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/legacy.ts
@@ -20,10 +20,18 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 import { plugin } from './index';
+import {
+  setup as visualizationsSetup,
+  start as visualizationsStart,
+} from '../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 
 // Legacy compatibility part - to be removed at cutover, replaced by a kibana.json file
 export const pluginInstance = plugin({} as PluginInitializerContext);
 export const setup = pluginInstance.setup(npSetup.core, {
   ...npSetup.plugins,
+  visualizations: visualizationsSetup,
+});
+export const start = pluginInstance.start(npStart.core, {
+  ...npStart.plugins,
+  visualizations: visualizationsStart,
 });
-export const start = pluginInstance.start(npStart.core, npStart.plugins);
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
index 39a9ca6641fd1..bf5049cd976a3 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js
@@ -60,7 +60,6 @@ import {
   ensureDefaultIndexPattern,
   registerTimefilterWithGlobalStateFactory,
 } from '../../kibana_services';
-import { Vis } from '../../../../../visualizations/public';
 
 const {
   core,
@@ -71,6 +70,7 @@ const {
   timefilter,
   toastNotifications,
   uiSettings,
+  visualizations,
 } = getServices();
 
 import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../helpers/breadcrumbs';
@@ -990,7 +990,10 @@ function discoverController(
       },
     };
 
-    $scope.vis = new Vis($scope.searchSource.getField('index'), visSavedObject.visState);
+    $scope.vis = new visualizations.Vis(
+      $scope.searchSource.getField('index'),
+      visSavedObject.visState
+    );
     visSavedObject.vis = $scope.vis;
 
     $scope.searchSource.onRequestStart((searchSource, options) => {
diff --git a/src/legacy/core_plugins/kibana/public/discover/plugin.ts b/src/legacy/core_plugins/kibana/public/discover/plugin.ts
index a495b56d5e9ea..565382313e369 100644
--- a/src/legacy/core_plugins/kibana/public/discover/plugin.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/plugin.ts
@@ -36,6 +36,10 @@ import { DocViewInput, DocViewInputFn } from './np_ready/doc_views/doc_views_typ
 import { DocViewTable } from './np_ready/components/table/table';
 import { JsonCodeBlock } from './np_ready/components/json_code_block/json_code_block';
 import { HomePublicPluginSetup } from '../../../../../plugins/home/public';
+import {
+  VisualizationsStart,
+  VisualizationsSetup,
+} from '../../../visualizations/public/np_ready/public';
 
 /**
  * These are the interfaces with your public contracts. You should export these
@@ -51,6 +55,7 @@ export interface DiscoverSetupPlugins {
   embeddable: IEmbeddableSetup;
   kibanaLegacy: KibanaLegacySetup;
   home: HomePublicPluginSetup;
+  visualizations: VisualizationsSetup;
 }
 export interface DiscoverStartPlugins {
   uiActions: UiActionsStart;
@@ -60,6 +65,7 @@ export interface DiscoverStartPlugins {
   data: DataPublicPluginStart;
   share: SharePluginStart;
   inspector: any;
+  visualizations: VisualizationsStart;
 }
 const innerAngularName = 'app/discover';
 const embeddableAngularName = 'app/discoverEmbeddable';
diff --git a/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js b/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js
index 55447905e6421..f11aab9b9db88 100644
--- a/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js
+++ b/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js
@@ -38,8 +38,10 @@ import afterdatachangePng from './afterdatachange.png';
 import afterdatachangeandresizePng from './afterdatachangeandresize.png';
 import aftercolorchangePng from './aftercolorchange.png';
 import changestartupPng from './changestartup.png';
-import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
-import { Vis } from '../../../visualizations/public/np_ready/public/vis';
+import {
+  setup as visualizationsSetup,
+  start as visualizationsStart,
+} from '../../../visualizations/public/np_ready/public/legacy';
 
 import { createRegionMapVisualization } from '../region_map_visualization';
 import { createRegionMapTypeDefinition } from '../region_map_type';
@@ -158,7 +160,7 @@ describe('RegionMapsVisualizationTests', function() {
 
       imageComparator = new ImageComparator();
 
-      vis = new Vis(indexPattern, {
+      vis = new visualizationsStart.Vis(indexPattern, {
         type: 'region_map',
       });
 
diff --git a/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js b/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js
index ef2ea831e84fd..27e9459c7e06c 100644
--- a/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js
+++ b/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js
@@ -32,8 +32,10 @@ import EMS_TILES from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_
 import EMS_STYLE_ROAD_MAP_BRIGHT from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_bright';
 import EMS_STYLE_ROAD_MAP_DESATURATED from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_desaturated';
 import EMS_STYLE_DARK_MAP from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_dark';
-import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
-import { Vis } from '../../../visualizations/public/np_ready/public/vis';
+import {
+  setup as visualizationsSetup,
+  start as visualizationsStart,
+} from '../../../visualizations/public/np_ready/public/legacy';
 
 import { createTileMapVisualization } from '../tile_map_visualization';
 import { createTileMapTypeDefinition } from '../tile_map_type';
@@ -124,7 +126,7 @@ describe('CoordinateMapsVisualizationTest', function() {
       setupDOM('512px', '512px');
 
       imageComparator = new ImageComparator();
-      vis = new Vis(indexPattern, {
+      vis = new visualizationsStart.Vis(indexPattern, {
         type: 'tile_map',
       });
       vis.params = {
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts
index 15cd920b79e4a..67b5d018f4638 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts
@@ -59,7 +59,7 @@ describe('metric_vis - createMetricVisTypeDefinition', () => {
 
     // TODO: remove when Vis is converted to typescript. Only importing Vis as type
     // @ts-ignore
-    vis = new Vis(stubIndexPattern, {
+    vis = new visualizationsStart.Vis(stubIndexPattern, {
       type: 'metric',
       aggs: [{ id: '1', type: 'top_hits', schema: 'metric', params: { field: 'ip' } }],
     });
diff --git a/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js b/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js
index fc5a24a66dab3..0dbff60613cb0 100644
--- a/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js
+++ b/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js
@@ -26,10 +26,11 @@ import sinon from 'sinon';
 import { tabifyAggResponse, npStart } from '../../legacy_imports';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 import { round } from 'lodash';
-
-import { Vis } from '../../../../visualizations/public';
 import { tableVisTypeDefinition } from '../../table_vis_type';
-import { setup as visualizationsSetup } from '../../../../visualizations/public/np_ready/public/legacy';
+import {
+  setup as visualizationsSetup,
+  start as visualizationsStart,
+} from '../../../../visualizations/public/np_ready/public/legacy';
 import { getAngularModule } from '../../get_inner_angular';
 import { initTableVisLegacyModule } from '../../table_vis_legacy_module';
 import { tableVisResponseHandler } from '../../table_vis_response_handler';
@@ -42,10 +43,10 @@ describe('Table Vis - AggTable Directive', function() {
   const tabifiedData = {};
 
   const init = () => {
-    const vis1 = new Vis(indexPattern, 'table');
+    const vis1 = new visualizationsStart.Vis(indexPattern, 'table');
     tabifiedData.metricOnly = tabifyAggResponse(vis1.aggs, fixtures.metricOnly);
 
-    const vis2 = new Vis(indexPattern, {
+    const vis2 = new visualizationsStart.Vis(indexPattern, {
       type: 'table',
       params: {
         showMetricsAtAllLevels: true,
@@ -64,7 +65,7 @@ describe('Table Vis - AggTable Directive', function() {
       metricsAtAllLevels: true,
     });
 
-    const vis3 = new Vis(indexPattern, {
+    const vis3 = new visualizationsStart.Vis(indexPattern, {
       type: 'table',
       aggs: [
         { type: 'avg', schema: 'metric', params: { field: 'bytes' } },
diff --git a/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table_group.js b/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table_group.js
index 3c633f21cbabb..f6ae41b024b7d 100644
--- a/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table_group.js
+++ b/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table_group.js
@@ -23,10 +23,10 @@ import expect from '@kbn/expect';
 import fixtures from 'fixtures/fake_hierarchical_data';
 import { tabifyAggResponse, npStart } from '../../legacy_imports';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
-import { Vis } from '../../../../visualizations/public';
 import { getAngularModule } from '../../get_inner_angular';
 import { initTableVisLegacyModule } from '../../table_vis_legacy_module';
 import { tableVisResponseHandler } from '../../table_vis_response_handler';
+import { start as visualizationsStart } from '../../../../visualizations/public/np_ready/public/legacy';
 
 describe('Table Vis - AggTableGroup Directive', function() {
   let $rootScope;
@@ -35,10 +35,10 @@ describe('Table Vis - AggTableGroup Directive', function() {
   const tabifiedData = {};
 
   const init = () => {
-    const vis1 = new Vis(indexPattern, 'table');
+    const vis1 = new visualizationsStart.Vis(indexPattern, 'table');
     tabifiedData.metricOnly = tabifyAggResponse(vis1.aggs, fixtures.metricOnly);
 
-    const vis2 = new Vis(indexPattern, {
+    const vis2 = new visualizationsStart.Vis(indexPattern, {
       type: 'pie',
       aggs: [
         { type: 'avg', schema: 'metric', params: { field: 'bytes' } },
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
index 5f7d1ad90ecf8..55ecf98f994d2 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern';
-import { Vis } from '../../../../visualizations/public/np_ready/public/vis';
+import { start as visualizationsStart } from '../../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 import { ImageComparator } from 'test_utils/image_comparator';
 import { createTagCloudVisualization } from '../tag_cloud_visualization';
 import basicdrawPng from './basicdraw.png';
@@ -76,7 +76,7 @@ describe('TagCloudVisualizationTest', function() {
     beforeEach(async function() {
       setupDOM('512px', '512px');
       imageComparator = new ImageComparator();
-      vis = new Vis(indexPattern, {
+      vis = new visualizationsStart.Vis(indexPattern, {
         type: 'tagcloud',
         params: {
           bucket: { accessor: 0, format: {} },
diff --git a/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js b/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js
index 868e5729bd494..378590af29d3a 100644
--- a/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js
+++ b/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js
@@ -23,7 +23,6 @@ import ngMock from 'ng_mock';
 import $ from 'jquery';
 import { createVegaVisualization } from '../vega_visualization';
 import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern';
-import { Vis } from '../../../visualizations/public/np_ready/public/vis';
 import { ImageComparator } from 'test_utils/image_comparator';
 
 import vegaliteGraph from '!!raw-loader!./vegalite_graph.hjson';
@@ -41,7 +40,10 @@ import vegaMapImage256 from './vega_map_image_256.png';
 import { VegaParser } from '../data_model/vega_parser';
 import { SearchCache } from '../data_model/search_cache';
 
-import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
+import {
+  setup as visualizationsSetup,
+  start as visualizationsStart,
+} from '../../../visualizations/public/np_ready/public/legacy';
 import { createVegaTypeDefinition } from '../vega_type';
 // TODO This is an integration test and thus requires a running platform. When moving to the new platform,
 // this test has to be migrated to the newly created integration test environment.
@@ -106,7 +108,7 @@ describe('VegaVisualizations', () => {
       setupDOM('512px', '512px');
       imageComparator = new ImageComparator();
 
-      vis = new Vis(indexPattern, { type: 'vega' });
+      vis = new visualizationsStart.Vis(indexPattern, { type: 'vega' });
     });
 
     afterEach(function() {
diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/visualizations/pie_chart.js b/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/visualizations/pie_chart.js
index e4da572259b69..534a523103774 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/visualizations/pie_chart.js
+++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/visualizations/pie_chart.js
@@ -25,7 +25,7 @@ import expect from '@kbn/expect';
 import fixtures from 'fixtures/fake_hierarchical_data';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
-import { Vis } from '../../../../../visualizations/public';
+import { start as visualizationsStart } from '../../../../../visualizations/public/np_ready/public/legacy';
 import { getVis, getMockUiState } from '../lib/fixtures/_vis_fixture';
 import { tabifyAggResponse } from '../../../legacy_imports';
 import { vislibSlicesResponseHandler } from '../../response_handler';
@@ -133,7 +133,7 @@ describe('No global chart settings', function() {
     responseHandler = vislibSlicesResponseHandler;
 
     let id1 = 1;
-    stubVis1 = new Vis(indexPattern, {
+    stubVis1 = new visualizationsStart.Vis(indexPattern, {
       type: 'pie',
       aggs: rowAgg,
     });
@@ -222,7 +222,7 @@ describe('Vislib PieChart Class Test Suite', function() {
         responseHandler = vislibSlicesResponseHandler;
 
         let id = 1;
-        stubVis = new Vis(indexPattern, {
+        stubVis = new visualizationsStart.Vis(indexPattern, {
           type: 'pie',
           aggs: dataAgg,
         });
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy/__tests__/_vis.js b/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy/__tests__/_vis.js
index d963315ef79db..8c75ba24051b0 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy/__tests__/_vis.js
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy/__tests__/_vis.js
@@ -20,7 +20,6 @@
 import _ from 'lodash';
 import ngMock from 'ng_mock';
 import expect from '@kbn/expect';
-import { Vis } from '../..';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 import { start as visualizations } from '../../legacy';
 
@@ -49,7 +48,7 @@ describe('Vis Class', function() {
   );
 
   beforeEach(function() {
-    vis = new Vis(indexPattern, stateFixture);
+    vis = new visualizations.Vis(indexPattern, stateFixture);
   });
 
   const verifyVis = function(vis) {
@@ -85,7 +84,7 @@ describe('Vis Class', function() {
 
   describe('setState()', function() {
     it('should set the state to defaults', function() {
-      const vis = new Vis(indexPattern);
+      const vis = new visualizations.Vis(indexPattern);
       expect(vis).to.have.property('type');
       expect(vis.type).to.eql(visTypes.get('histogram'));
       expect(vis).to.have.property('aggs');
@@ -101,7 +100,7 @@ describe('Vis Class', function() {
       expect(vis.isHierarchical()).to.be(true);
     });
     it('should return false for non-hierarchical vis (like histogram)', function() {
-      const vis = new Vis(indexPattern);
+      const vis = new visualizations.Vis(indexPattern);
       expect(vis.isHierarchical()).to.be(false);
     });
   });
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts
index 1063b1718b851..a948757d7bd83 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts
@@ -49,6 +49,7 @@ const createStartContract = (): VisualizationsStart => ({
   },
   getSavedVisualizationsLoader: jest.fn(),
   showNewVisModal: jest.fn(),
+  Vis: jest.fn(),
 });
 
 const createInstance = async () => {
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/plugin.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/plugin.ts
index cbbeb7ff980a6..36c04923e3fd0 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/plugin.ts
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/plugin.ts
@@ -43,6 +43,7 @@ import {
   SavedObjectKibanaServicesWithVisualizations,
 } from '../../saved_visualizations';
 import { SavedVisualizations } from '../../../../kibana/public/visualize/np_ready/types';
+import { VisImpl, VisImplConstructor } from './vis_impl';
 import { showNewVisModal } from './wizard';
 /**
  * Interface for this plugin's returned setup/start contracts.
@@ -57,6 +58,7 @@ export interface VisualizationsStart {
   types: TypesStart;
   getSavedVisualizationsLoader: () => SavedVisualizations;
   showNewVisModal: typeof showNewVisModal;
+  Vis: VisImplConstructor;
 }
 
 export interface VisualizationsSetupDeps {
@@ -131,6 +133,7 @@ export class VisualizationsPlugin
       types,
       getSavedVisualizationsLoader: () => this.getSavedVisualizationsLoader(),
       showNewVisModal,
+      Vis: VisImpl,
     };
   }
 
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.d.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts
similarity index 84%
rename from src/legacy/core_plugins/visualizations/public/np_ready/public/vis.d.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts
index 71bf9bcf983ff..59a8013523ef6 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.d.ts
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.ts
@@ -42,9 +42,8 @@ export interface VisState {
   aggs: IAggConfigs;
 }
 
-export declare class VisualizationController {
-  constructor(element: HTMLElement, vis: Vis);
-  public render(visData: any, visParams: any, update: { [key in Status]: boolean }): Promise<void>;
-  public destroy(): void;
-  public isLoaded?(): Promise<void> | void;
+export interface VisualizationController {
+  render(visData: any, visParams: any, update: { [key in Status]: boolean }): Promise<void>;
+  destroy(): void;
+  isLoaded?(): Promise<void> | void;
 }
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis_impl.d.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis_impl.d.ts
new file mode 100644
index 0000000000000..45d65efb5dcdf
--- /dev/null
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis_impl.d.ts
@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Vis, VisState } from './vis';
+import { VisType } from './types';
+import { IIndexPattern } from '../../../../../../plugins/data/common';
+
+type InitVisStateType =
+  | Partial<VisState>
+  | Partial<Omit<VisState, 'type'> & { type: string }>
+  | string;
+
+export type VisImplConstructor = new (
+  indexPattern: IIndexPattern,
+  visState?: InitVisStateType
+) => VisImpl;
+
+export declare class VisImpl implements Vis {
+  constructor(indexPattern: IIndexPattern, visState?: InitVisStateType);
+
+  type: VisType;
+
+  // Since we haven't typed everything here yet, we basically "any" the rest
+  // of that interface. This should be removed as soon as this type definition
+  // has been completed. But that way we at least have typing for a couple of
+  // properties on that type.
+  [key: string]: any;
+}
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.js b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis_impl.js
similarity index 98%
rename from src/legacy/core_plugins/visualizations/public/np_ready/public/vis.js
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/vis_impl.js
index 0c2e5012df439..6f4ab6d708184 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/public/vis.js
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/vis_impl.js
@@ -33,7 +33,7 @@ import { AggConfigs, PersistedState } from '../../legacy_imports';
 import { updateVisualizationConfig } from './legacy/vis_update';
 import { getTypes } from './services';
 
-class Vis extends EventEmitter {
+class VisImpl extends EventEmitter {
   constructor(indexPattern, visState) {
     super();
     visState = visState || {};
@@ -203,6 +203,6 @@ class Vis extends EventEmitter {
   }
 }
 
-Vis.prototype.type = 'histogram';
+VisImpl.prototype.type = 'histogram';
 
-export { Vis };
+export { VisImpl };
diff --git a/src/legacy/core_plugins/visualizations/public/saved_visualizations/_saved_vis.ts b/src/legacy/core_plugins/visualizations/public/saved_visualizations/_saved_vis.ts
index ca2305a9cc91c..8b8c5fe94cc95 100644
--- a/src/legacy/core_plugins/visualizations/public/saved_visualizations/_saved_vis.ts
+++ b/src/legacy/core_plugins/visualizations/public/saved_visualizations/_saved_vis.ts
@@ -26,14 +26,14 @@
  */
 import { SavedObject, SavedObjectKibanaServices } from 'ui/saved_objects/types';
 import { createSavedObjectClass } from 'ui/saved_objects/saved_object';
-// @ts-ignore
-import { updateOldState, Vis } from '../index';
+import { updateOldState } from '../index';
 import { extractReferences, injectReferences } from './saved_visualization_references';
 import { IIndexPattern } from '../../../../../plugins/data/public';
 import { VisSavedObject } from '../embeddable/visualize_embeddable';
 
 import { createSavedSearchesLoader } from '../../../kibana/public/discover';
 import { VisualizeConstants } from '../../../kibana/public/visualize';
+import { VisImpl } from '../np_ready/public/vis_impl';
 
 async function _afterEsResp(savedVis: VisSavedObject, services: any) {
   await _getLinkedSavedSearch(savedVis, services);
@@ -72,9 +72,8 @@ async function _createVis(savedVis: VisSavedObject) {
   if (savedVis.visState) {
     savedVis.visState.title = savedVis.title;
   }
-  // the typescript compiler is wrong here, will be right when vis.js -> vis.ts
-  // @ts-ignore
-  savedVis.vis = new Vis(savedVis.searchSource!.getField('index'), savedVis.visState);
+
+  savedVis.vis = new VisImpl(savedVis.searchSource!.getField('index')!, savedVis.visState);
 
   savedVis.vis!.savedSearchId = savedVis.savedSearchId;
 
diff --git a/src/legacy/ui/public/agg_response/tabify/__tests__/_get_columns.js b/src/legacy/ui/public/agg_response/tabify/__tests__/_get_columns.js
index 56536a2e5b536..3eb41c03050d0 100644
--- a/src/legacy/ui/public/agg_response/tabify/__tests__/_get_columns.js
+++ b/src/legacy/ui/public/agg_response/tabify/__tests__/_get_columns.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import { tabifyGetColumns } from '../_get_columns';
-import { Vis } from '../../../../../core_plugins/visualizations/public';
+import { start as visualizationsStart } from '../../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 describe('get columns', function() {
   let indexPattern;
@@ -33,7 +33,7 @@ describe('get columns', function() {
   );
 
   it('should inject a count metric if no aggs exist', function() {
-    const vis = new Vis(indexPattern, {
+    const vis = new visualizationsStart.Vis(indexPattern, {
       type: 'pie',
     });
     while (vis.aggs.length) vis.aggs.pop();
@@ -49,7 +49,7 @@ describe('get columns', function() {
   });
 
   it('should inject a count metric if only buckets exist', function() {
-    const vis = new Vis(indexPattern, {
+    const vis = new visualizationsStart.Vis(indexPattern, {
       type: 'pie',
       aggs: [
         {
@@ -68,7 +68,7 @@ describe('get columns', function() {
   });
 
   it('should inject the metric after each bucket if the vis is hierarchical', function() {
-    const vis = new Vis(indexPattern, {
+    const vis = new visualizationsStart.Vis(indexPattern, {
       type: 'pie',
       aggs: [
         {
@@ -104,7 +104,7 @@ describe('get columns', function() {
   });
 
   it('should inject the multiple metrics after each bucket if the vis is hierarchical', function() {
-    const vis = new Vis(indexPattern, {
+    const vis = new visualizationsStart.Vis(indexPattern, {
       type: 'pie',
       aggs: [
         {
@@ -156,7 +156,7 @@ describe('get columns', function() {
   });
 
   it('should put all metrics at the end of the columns if the vis is not hierarchical', function() {
-    const vis = new Vis(indexPattern, {
+    const vis = new visualizationsStart.Vis(indexPattern, {
       type: 'histogram',
       aggs: [
         {
diff --git a/src/legacy/ui/public/agg_response/tabify/__tests__/_integration.js b/src/legacy/ui/public/agg_response/tabify/__tests__/_integration.js
index c7c328000772b..f3f2e20149acf 100644
--- a/src/legacy/ui/public/agg_response/tabify/__tests__/_integration.js
+++ b/src/legacy/ui/public/agg_response/tabify/__tests__/_integration.js
@@ -22,7 +22,7 @@ import fixtures from 'fixtures/fake_hierarchical_data';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import { tabifyAggResponse } from '../tabify';
-import { Vis } from '../../../../../core_plugins/visualizations/public';
+import { start as visualizationsStart } from '../../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
 describe('tabifyAggResponse Integration', function() {
@@ -42,7 +42,7 @@ describe('tabifyAggResponse Integration', function() {
   }
 
   it('transforms a simple response properly', function() {
-    const vis = new Vis(indexPattern, {
+    const vis = new visualizationsStart.Vis(indexPattern, {
       type: 'histogram',
       aggs: [],
     });
@@ -73,7 +73,7 @@ describe('tabifyAggResponse Integration', function() {
     let esResp;
 
     beforeEach(function() {
-      vis = new Vis(indexPattern, {
+      vis = new visualizationsStart.Vis(indexPattern, {
         type: 'pie',
         aggs: [
           { type: 'avg', schema: 'metric', params: { field: 'bytes' } },
diff --git a/src/legacy/ui/public/agg_response/tabify/__tests__/_response_writer.js b/src/legacy/ui/public/agg_response/tabify/__tests__/_response_writer.js
index ced495ef23c36..b0c0f2f3d9100 100644
--- a/src/legacy/ui/public/agg_response/tabify/__tests__/_response_writer.js
+++ b/src/legacy/ui/public/agg_response/tabify/__tests__/_response_writer.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import { TabbedAggResponseWriter } from '../_response_writer';
-import { Vis } from '../../../../../core_plugins/visualizations/public';
+import { start as visualizationsStart } from '../../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
 describe('TabbedAggResponseWriter class', function() {
@@ -61,7 +61,7 @@ describe('TabbedAggResponseWriter class', function() {
   ];
 
   const createResponseWritter = (aggs = [], opts = {}) => {
-    const vis = new Vis(indexPattern, { type: 'histogram', aggs: aggs });
+    const vis = new visualizationsStart.Vis(indexPattern, { type: 'histogram', aggs: aggs });
     return new TabbedAggResponseWriter(vis.getAggConfig(), opts);
   };
 
@@ -88,7 +88,7 @@ describe('TabbedAggResponseWriter class', function() {
 
     describe('sets timeRange', function() {
       it("to the first nested object's range", function() {
-        const vis = new Vis(indexPattern, { type: 'histogram', aggs: [] });
+        const vis = new visualizationsStart.Vis(indexPattern, { type: 'histogram', aggs: [] });
         const range = {
           gte: 0,
           lte: 100,
@@ -106,7 +106,7 @@ describe('TabbedAggResponseWriter class', function() {
       });
 
       it('to undefined if no nested object', function() {
-        const vis = new Vis(indexPattern, { type: 'histogram', aggs: [] });
+        const vis = new visualizationsStart.Vis(indexPattern, { type: 'histogram', aggs: [] });
 
         const writer = new TabbedAggResponseWriter(vis.getAggConfig(), {
           timeRange: {},
diff --git a/src/legacy/ui/public/vis/__tests__/_agg_config.js b/src/legacy/ui/public/vis/__tests__/_agg_config.js
index 7dccf3eec18aa..9e53044f681ba 100644
--- a/src/legacy/ui/public/vis/__tests__/_agg_config.js
+++ b/src/legacy/ui/public/vis/__tests__/_agg_config.js
@@ -20,8 +20,8 @@
 import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
-import { Vis } from '../../../../core_plugins/visualizations/public';
 import { AggType, AggConfig } from '../../agg_types';
+import { start as visualizationsStart } from '../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
@@ -37,7 +37,7 @@ describe('AggConfig', function() {
 
   describe('#toDsl', function() {
     it('calls #write()', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -55,7 +55,7 @@ describe('AggConfig', function() {
     });
 
     it('uses the type name as the agg name', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -73,7 +73,7 @@ describe('AggConfig', function() {
     });
 
     it('uses the params from #write() output as the agg params', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -93,7 +93,7 @@ describe('AggConfig', function() {
     });
 
     it('includes subAggs from #write() output', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -219,8 +219,8 @@ describe('AggConfig', function() {
 
     testsIdentical.forEach((visConfig, index) => {
       it(`identical aggregations (${index})`, function() {
-        const vis1 = new Vis(indexPattern, visConfig);
-        const vis2 = new Vis(indexPattern, visConfig);
+        const vis1 = new visualizationsStart.Vis(indexPattern, visConfig);
+        const vis2 = new visualizationsStart.Vis(indexPattern, visConfig);
         expect(vis1.aggs.jsonDataEquals(vis2.aggs.aggs)).to.be(true);
       });
     });
@@ -258,8 +258,8 @@ describe('AggConfig', function() {
 
     testsIdenticalDifferentOrder.forEach((test, index) => {
       it(`identical aggregations (${index}) - init json is in different order`, function() {
-        const vis1 = new Vis(indexPattern, test.config1);
-        const vis2 = new Vis(indexPattern, test.config2);
+        const vis1 = new visualizationsStart.Vis(indexPattern, test.config1);
+        const vis2 = new visualizationsStart.Vis(indexPattern, test.config2);
         expect(vis1.aggs.jsonDataEquals(vis2.aggs.aggs)).to.be(true);
       });
     });
@@ -323,8 +323,8 @@ describe('AggConfig', function() {
 
     testsDifferent.forEach((test, index) => {
       it(`different aggregations (${index})`, function() {
-        const vis1 = new Vis(indexPattern, test.config1);
-        const vis2 = new Vis(indexPattern, test.config2);
+        const vis1 = new visualizationsStart.Vis(indexPattern, test.config1);
+        const vis2 = new visualizationsStart.Vis(indexPattern, test.config2);
         expect(vis1.aggs.jsonDataEquals(vis2.aggs.aggs)).to.be(false);
       });
     });
@@ -332,7 +332,7 @@ describe('AggConfig', function() {
 
   describe('#toJSON', function() {
     it('includes the aggs id, params, type and schema', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -360,7 +360,7 @@ describe('AggConfig', function() {
     });
 
     it('test serialization  order is identical (for visual consistency)', function() {
-      const vis1 = new Vis(indexPattern, {
+      const vis1 = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -369,7 +369,7 @@ describe('AggConfig', function() {
           },
         ],
       });
-      const vis2 = new Vis(indexPattern, {
+      const vis2 = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -387,26 +387,26 @@ describe('AggConfig', function() {
 
   describe('#makeLabel', function() {
     it('uses the custom label if it is defined', function() {
-      const vis = new Vis(indexPattern, {});
+      const vis = new visualizationsStart.Vis(indexPattern, {});
       const aggConfig = vis.aggs.aggs[0];
       aggConfig.params.customLabel = 'Custom label';
       const label = aggConfig.makeLabel();
       expect(label).to.be(aggConfig.params.customLabel);
     });
     it('default label should be "Count"', function() {
-      const vis = new Vis(indexPattern, {});
+      const vis = new visualizationsStart.Vis(indexPattern, {});
       const aggConfig = vis.aggs.aggs[0];
       const label = aggConfig.makeLabel();
       expect(label).to.be('Count');
     });
     it('default label should be "Percentage of Count" when percentageMode is set to true', function() {
-      const vis = new Vis(indexPattern, {});
+      const vis = new visualizationsStart.Vis(indexPattern, {});
       const aggConfig = vis.aggs.aggs[0];
       const label = aggConfig.makeLabel(true);
       expect(label).to.be('Percentage of Count');
     });
-    it('empty label if the Vis type is not defined', function() {
-      const vis = new Vis(indexPattern, {});
+    it('empty label if the visualizationsStart.Vis type is not defined', function() {
+      const vis = new visualizationsStart.Vis(indexPattern, {});
       const aggConfig = vis.aggs.aggs[0];
       aggConfig.type = undefined;
       const label = aggConfig.makeLabel();
@@ -416,7 +416,7 @@ describe('AggConfig', function() {
 
   describe('#fieldFormatter - custom getFormat handler', function() {
     it('returns formatter from getFormat handler', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'metric',
         aggs: [
           {
@@ -447,7 +447,7 @@ describe('AggConfig', function() {
     let vis;
 
     beforeEach(function() {
-      vis = new Vis(indexPattern, visStateAggWithoutCustomGetFormat);
+      vis = new visualizationsStart.Vis(indexPattern, visStateAggWithoutCustomGetFormat);
     });
 
     it("returns the field's formatter", function() {
diff --git a/src/legacy/ui/public/vis/__tests__/_agg_configs.js b/src/legacy/ui/public/vis/__tests__/_agg_configs.js
index 62ad9a40ad058..172523ec50c8b 100644
--- a/src/legacy/ui/public/vis/__tests__/_agg_configs.js
+++ b/src/legacy/ui/public/vis/__tests__/_agg_configs.js
@@ -22,7 +22,7 @@ import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import { AggConfig, AggConfigs, AggGroupNames, Schemas } from '../../agg_types';
-import { Vis } from '../../../../core_plugins/visualizations/public';
+import { start as visualizationsStart } from '../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
 
 describe('AggConfigs', function() {
@@ -38,7 +38,7 @@ describe('AggConfigs', function() {
 
   describe('constructor', function() {
     it('handles passing just a vis', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [],
       });
@@ -48,7 +48,7 @@ describe('AggConfigs', function() {
     });
 
     it('converts configStates into AggConfig objects if they are not already', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [],
       });
@@ -72,7 +72,7 @@ describe('AggConfigs', function() {
     });
 
     it('attempts to ensure that all states have an id', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [],
       });
@@ -154,7 +154,7 @@ describe('AggConfigs', function() {
 
   describe('#getRequestAggs', function() {
     it('performs a stable sort, but moves metrics to the bottom', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           { type: 'avg', schema: 'metric' },
@@ -185,7 +185,7 @@ describe('AggConfigs', function() {
 
   describe('#getResponseAggs', function() {
     it('returns all request aggs for basic aggs', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           { type: 'terms', schema: 'split' },
@@ -206,7 +206,7 @@ describe('AggConfigs', function() {
     });
 
     it('expands aggs that have multiple responses', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           { type: 'terms', schema: 'split' },
@@ -231,14 +231,14 @@ describe('AggConfigs', function() {
 
   describe('#toDsl', function() {
     it('uses the sorted aggs', function() {
-      const vis = new Vis(indexPattern, { type: 'histogram' });
+      const vis = new visualizationsStart.Vis(indexPattern, { type: 'histogram' });
       sinon.spy(vis.aggs, 'getRequestAggs');
       vis.aggs.toDsl();
       expect(vis.aggs.getRequestAggs).to.have.property('callCount', 1);
     });
 
     it('calls aggConfig#toDsl() on each aggConfig and compiles the nested output', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           { type: 'date_histogram', schema: 'segment' },
@@ -272,7 +272,7 @@ describe('AggConfigs', function() {
     });
 
     it("skips aggs that don't have a dsl representation", function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -295,7 +295,7 @@ describe('AggConfigs', function() {
     });
 
     it('writes multiple metric aggregations at the same level', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {
@@ -326,7 +326,7 @@ describe('AggConfigs', function() {
     });
 
     it('writes multiple metric aggregations at every level if the vis is hierarchical', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           { type: 'terms', schema: 'segment', params: { field: 'ip', orderBy: 1 } },
@@ -362,7 +362,7 @@ describe('AggConfigs', function() {
     });
 
     it('adds the parent aggs of nested metrics at every level if the vis is hierarchical', function() {
-      const vis = new Vis(indexPattern, {
+      const vis = new visualizationsStart.Vis(indexPattern, {
         type: 'histogram',
         aggs: [
           {