From d296c26fccfd89775ca90a73e92b25c7cb9d8c30 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 26 Sep 2017 00:27:21 -0400
Subject: [PATCH] Convert lodah-es and d3 to named imports for ui/intro

---
 modules/ui/intro/area.js          | 66 +++++++++++++++++--------------
 modules/ui/intro/building.js      | 65 ++++++++++++++++--------------
 modules/ui/intro/helper.js        |  5 ++-
 modules/ui/intro/intro.js         | 29 ++++++++------
 modules/ui/intro/line.js          | 55 +++++++++++++++-----------
 modules/ui/intro/navigation.js    | 50 ++++++++++++-----------
 modules/ui/intro/point.js         | 43 +++++++++++---------
 modules/ui/intro/start_editing.js | 17 +++++---
 modules/ui/intro/welcome.js       | 53 ++++++++++++++-----------
 9 files changed, 216 insertions(+), 167 deletions(-)

diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index df173ab4f..222fef120 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -1,4 +1,10 @@
-import * as d3 from 'd3';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
 import { t } from '../../util/locale';
 import { modeBrowse, modeSelect } from '../../modes';
 import { utilRebind } from '../../util/rebind';
@@ -7,7 +13,7 @@ import { icon, pad, transitionTime } from './helper';
 
 
 export function uiIntroArea(context, reveal) {
-    var dispatch = d3.dispatch('done'),
+    var dispatch = d3_dispatch('done'),
         playground = [-85.63552, 41.94159],
         playgroundPreset = context.presets().item('leisure/playground'),
         descriptionField = context.presets().field('description'),
@@ -26,8 +32,8 @@ export function uiIntroArea(context, reveal) {
 
 
     function eventCancel() {
-        d3.event.stopPropagation();
-        d3.event.preventDefault();
+        d3_event.stopPropagation();
+        d3_event.preventDefault();
     }
 
 
@@ -196,13 +202,13 @@ export function uiIntroArea(context, reveal) {
         }
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
             // reset pane, in case user somehow happened to change it..
-            d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+            d3_select('.inspector-wrap .panewrap').style('right', '-100%');
 
-            d3.select('.preset-search-input')
+            d3_select('.preset-search-input')
                 .on('keydown.intro', null)
                 .on('keyup.intro', checkPresetSearch);
 
@@ -222,11 +228,11 @@ export function uiIntroArea(context, reveal) {
                 context.enter(modeSelect(context, [areaId]));
 
                 // reset pane, in case user somehow happened to change it..
-                d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+                d3_select('.inspector-wrap .panewrap').style('right', '-100%');
                 // disallow scrolling
-                d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+                d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
-                d3.select('.preset-search-input')
+                d3_select('.preset-search-input')
                     .on('keydown.intro', null)
                     .on('keyup.intro', checkPresetSearch);
 
@@ -239,7 +245,7 @@ export function uiIntroArea(context, reveal) {
         });
 
         function checkPresetSearch() {
-            var first = d3.select('.preset-list-item:first-child');
+            var first = d3_select('.preset-list-item:first-child');
 
             if (first.classed('preset-leisure-playground')) {
                 reveal(first.select('.preset-list-button').node(),
@@ -247,7 +253,7 @@ export function uiIntroArea(context, reveal) {
                     { duration: 300 }
                 );
 
-                d3.select('.preset-search-input')
+                d3_select('.preset-search-input')
                     .on('keydown.intro', eventCancel, true)
                     .on('keyup.intro', null);
 
@@ -258,10 +264,10 @@ export function uiIntroArea(context, reveal) {
         }
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
             context.on('enter.intro', null);
             context.history().on('change.intro', null);
-            d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
+            d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
             nextStep();
         }
     }
@@ -276,16 +282,16 @@ export function uiIntroArea(context, reveal) {
             return searchPresets();
         }
 
-        if (!d3.select('.form-field-description').empty()) {
+        if (!d3_select('.form-field-description').empty()) {
             return continueTo(describePlayground);
         }
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
             // reset pane, in case user somehow happened to change it..
-            d3.select('.inspector-wrap .panewrap').style('right', '0%');
+            d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
             // It's possible for the user to add a description in a previous step..
             // If they did this already, just continue to next step.
@@ -299,7 +305,7 @@ export function uiIntroArea(context, reveal) {
                 { duration: 300 }
             );
 
-            d3.select('.more-fields .combobox-input')
+            d3_select('.more-fields .combobox-input')
                 .on('click.intro', function() {
                     continueTo(chooseDescriptionField);
                 });
@@ -310,8 +316,8 @@ export function uiIntroArea(context, reveal) {
         });
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
-            d3.select('.more-fields .combobox-input').on('click.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.more-fields .combobox-input').on('click.intro', null);
             context.on('exit.intro', null);
             nextStep();
         }
@@ -327,21 +333,21 @@ export function uiIntroArea(context, reveal) {
             return searchPresets();
         }
 
-        if (!d3.select('.form-field-description').empty()) {
+        if (!d3_select('.form-field-description').empty()) {
             return continueTo(describePlayground);
         }
 
         // Make sure combobox is ready..
-        if (d3.select('div.combobox').empty()) {
+        if (d3_select('div.combobox').empty()) {
             return continueTo(clickAddField);
         }
         // Watch for the combobox to go away..
         var watcher;
         watcher = window.setInterval(function() {
-            if (d3.select('div.combobox').empty()) {
+            if (d3_select('div.combobox').empty()) {
                 window.clearInterval(watcher);
                 timeout(function() {
-                    if (d3.select('.form-field-description').empty()) {
+                    if (d3_select('.form-field-description').empty()) {
                         continueTo(retryChooseDescription);
                     } else {
                         continueTo(describePlayground);
@@ -377,9 +383,9 @@ export function uiIntroArea(context, reveal) {
         }
 
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
-        if (d3.select('.form-field-description').empty()) {
+        if (d3_select('.form-field-description').empty()) {
             return continueTo(retryChooseDescription);
         }
 
@@ -409,7 +415,7 @@ export function uiIntroArea(context, reveal) {
         }
 
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
         reveal('.entity-editor-pane',
             t('intro.areas.retry_add_field', { field: descriptionField.label() }), {
@@ -450,9 +456,9 @@ export function uiIntroArea(context, reveal) {
         context.on('enter.intro exit.intro', null);
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.intro', null);
-        d3.select('.inspector-wrap').on('wheel.intro', null);
-        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
-        d3.select('.more-fields .combobox-input').on('click.intro', null);
+        d3_select('.inspector-wrap').on('wheel.intro', null);
+        d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
+        d3_select('.more-fields .combobox-input').on('click.intro', null);
     };
 
 
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index 6348d42fe..e416db806 100644
--- a/modules/ui/intro/building.js
+++ b/modules/ui/intro/building.js
@@ -1,5 +1,12 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
+import _uniq from 'lodash-es/uniq';
+
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
 import { t, textDirection } from '../../util/locale';
 import { modeBrowse, modeSelect } from '../../modes';
 import { utilRebind } from '../../util/rebind';
@@ -7,7 +14,7 @@ import { icon, pad, isMostlySquare, selectMenuItem, transitionTime } from './hel
 
 
 export function uiIntroBuilding(context, reveal) {
-    var dispatch = d3.dispatch('done'),
+    var dispatch = d3_dispatch('done'),
         house = [-85.62815, 41.95638],
         tank = [-85.62732, 41.95347],
         buildingCatetory = context.presets().item('category-building'),
@@ -29,8 +36,8 @@ export function uiIntroBuilding(context, reveal) {
 
 
     function eventCancel() {
-        d3.event.stopPropagation();
-        d3.event.preventDefault();
+        d3_event.stopPropagation();
+        d3_event.preventDefault();
     }
 
 
@@ -148,7 +155,7 @@ export function uiIntroBuilding(context, reveal) {
                 var graph = context.graph(),
                     way = context.entity(context.selectedIDs()[0]),
                     nodes = graph.childNodes(way),
-                    points = _.uniq(nodes).map(function(n) { return context.projection(n.loc); });
+                    points = _uniq(nodes).map(function(n) { return context.projection(n.loc); });
 
                 if (isMostlySquare(points)) {
                     houseId = way.id;
@@ -200,13 +207,13 @@ export function uiIntroBuilding(context, reveal) {
         }
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
             // reset pane, in case user somehow happened to change it..
-            d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+            d3_select('.inspector-wrap .panewrap').style('right', '-100%');
 
-            var button = d3.select('.preset-category-building .preset-list-button');
+            var button = d3_select('.preset-category-building .preset-list-button');
 
             reveal(button.node(),
                 t('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
@@ -231,8 +238,8 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
-            d3.select('.preset-list-button').on('click.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.preset-list-button').on('click.intro', null);
             context.on('enter.intro', null);
             nextStep();
         }
@@ -249,13 +256,13 @@ export function uiIntroBuilding(context, reveal) {
         }
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
             // reset pane, in case user somehow happened to change it..
-            d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+            d3_select('.inspector-wrap .panewrap').style('right', '-100%');
 
-            var button = d3.select('.preset-building-house .preset-list-button');
+            var button = d3_select('.preset-building-house .preset-list-button');
 
             reveal(button.node(),
                 t('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
@@ -281,8 +288,8 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
-            d3.select('.preset-list-button').on('click.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.preset-list-button').on('click.intro', null);
             context.on('enter.intro', null);
             nextStep();
         }
@@ -541,13 +548,13 @@ export function uiIntroBuilding(context, reveal) {
         }
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
             // reset pane, in case user somehow happened to change it..
-            d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+            d3_select('.inspector-wrap .panewrap').style('right', '-100%');
 
-            d3.select('.preset-search-input')
+            d3_select('.preset-search-input')
                 .on('keydown.intro', null)
                 .on('keyup.intro', checkPresetSearch);
 
@@ -567,11 +574,11 @@ export function uiIntroBuilding(context, reveal) {
                 context.enter(modeSelect(context, [tankId]));
 
                 // reset pane, in case user somehow happened to change it..
-                d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+                d3_select('.inspector-wrap .panewrap').style('right', '-100%');
                 // disallow scrolling
-                d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+                d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
-                d3.select('.preset-search-input')
+                d3_select('.preset-search-input')
                     .on('keydown.intro', null)
                     .on('keyup.intro', checkPresetSearch);
 
@@ -584,7 +591,7 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         function checkPresetSearch() {
-            var first = d3.select('.preset-list-item:first-child');
+            var first = d3_select('.preset-list-item:first-child');
 
             if (first.classed('preset-man_made-storage_tank')) {
                 reveal(first.select('.preset-list-button').node(),
@@ -592,7 +599,7 @@ export function uiIntroBuilding(context, reveal) {
                     { duration: 300 }
                 );
 
-                d3.select('.preset-search-input')
+                d3_select('.preset-search-input')
                     .on('keydown.intro', eventCancel, true)
                     .on('keyup.intro', null);
 
@@ -603,10 +610,10 @@ export function uiIntroBuilding(context, reveal) {
         }
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
             context.on('enter.intro', null);
             context.history().on('change.intro', null);
-            d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
+            d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
             nextStep();
         }
     }
@@ -773,9 +780,9 @@ export function uiIntroBuilding(context, reveal) {
         context.on('enter.intro exit.intro', null);
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.intro', null);
-        d3.select('.inspector-wrap').on('wheel.intro', null);
-        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
-        d3.select('.more-fields .combobox-input').on('click.intro', null);
+        d3_select('.inspector-wrap').on('wheel.intro', null);
+        d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
+        d3_select('.more-fields .combobox-input').on('click.intro', null);
     };
 
 
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 9d42df2c4..37e257fa8 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -1,4 +1,5 @@
-import * as d3 from 'd3';
+import { select as d3_select } from 'd3-selection';
+
 import { t } from '../../util/locale';
 import { geoSphericalDistance } from '../../geo';
 
@@ -160,7 +161,7 @@ export function isMostlySquare(points) {
 export function selectMenuItem(operation) {
     var selector = '.edit-menu .edit-menu-item-' + operation +
         ', .radial-menu .radial-menu-item-' + operation;
-    return d3.select(selector);
+    return d3_select(selector);
 }
 
 
diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js
index f87bb9b16..7bc72bdff 100644
--- a/modules/ui/intro/intro.js
+++ b/modules/ui/intro/intro.js
@@ -1,5 +1,12 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
+import _difference from 'lodash-es/difference';
+import _uniq from 'lodash-es/uniq';
+import _values from 'lodash-es/values';
+
+import {
+    select as d3_select,
+    selectAll as d3_selectAll
+} from 'd3-selection';
+
 import { t, textDirection } from '../../util/locale';
 import { localize } from './helper';
 
@@ -63,7 +70,7 @@ export function uiIntro(context) {
             zoom = context.map().zoom(),
             background = context.background().baseLayerSource(),
             overlays = context.background().overlayLayerSources(),
-            opacity = d3.selectAll('#map .layer-background').style('opacity'),
+            opacity = d3_selectAll('#map .layer-background').style('opacity'),
             loadedTiles = osm && osm.loadedTiles(),
             baseEntities = context.history().graph().base().entities,
             countryCode = services.geocoder.countryCode;
@@ -74,7 +81,7 @@ export function uiIntro(context) {
         // Load semi-real data used in intro
         if (osm) { osm.toggle(false).reset(); }
         context.history().reset();
-        context.history().merge(d3.values(coreGraph().load(introGraph).entities));
+        context.history().merge(_values(coreGraph().load(introGraph).entities));
         context.history().checkpoint('initial');
         context.background().bing();
         overlays.forEach(function (d) { context.background().toggleOverlayLayer(d); });
@@ -84,7 +91,7 @@ export function uiIntro(context) {
             callback(null, t('intro.graph.countrycode'));
         };
 
-        d3.selectAll('#map .layer-background').style('opacity', 1);
+        d3_selectAll('#map .layer-background').style('opacity', 1);
 
         var curtain = uiCurtain();
         selection.call(curtain);
@@ -107,13 +114,13 @@ export function uiIntro(context) {
 
                     if (i < chapterFlow.length - 1) {
                         var next = chapterFlow[i + 1];
-                        d3.select('button.chapter-' + next)
+                        d3_select('button.chapter-' + next)
                             .classed('next', true);
                     }
 
                     // store walkthrough progress..
                     progress.push(chapter);
-                    context.storage('walkthrough_progress', _.uniq(progress).join(';'));
+                    context.storage('walkthrough_progress', _uniq(progress).join(';'));
                 });
             return s;
         });
@@ -121,19 +128,19 @@ export function uiIntro(context) {
         chapters[chapters.length - 1].on('startEditing', function() {
             // store walkthrough progress..
             progress.push('startEditing');
-            context.storage('walkthrough_progress', _.uniq(progress).join(';'));
+            context.storage('walkthrough_progress', _uniq(progress).join(';'));
 
             // store if walkthrough is completed..
-            var incomplete = _.difference(chapterFlow, progress);
+            var incomplete = _difference(chapterFlow, progress);
             if (!incomplete.length) {
                 context.storage('walkthrough_completed', 'yes');
             }
 
             curtain.remove();
             navwrap.remove();
-            d3.selectAll('#map .layer-background').style('opacity', opacity);
+            d3_selectAll('#map .layer-background').style('opacity', opacity);
             if (osm) { osm.toggle(true).reset().loadedTiles(loadedTiles); }
-            context.history().reset().merge(d3.values(baseEntities));
+            context.history().reset().merge(_values(baseEntities));
             context.background().baseLayerSource(background);
             overlays.forEach(function (d) { context.background().toggleOverlayLayer(d); });
             if (history) { context.history().fromJSON(history, false); }
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index 754404c63..c5d0d9f2f 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -1,5 +1,12 @@
-import * as d3 from 'd3';
-import _ from 'lodash';
+import _some from 'lodash-es/some';
+
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
 import { t, textDirection } from '../../util/locale';
 import { geoSphericalDistance } from '../../geo';
 import { modeBrowse, modeSelect } from '../../modes';
@@ -8,7 +15,7 @@ import { icon, pad, selectMenuItem, transitionTime } from './helper';
 
 
 export function uiIntroLine(context, reveal) {
-    var dispatch = d3.dispatch('done'),
+    var dispatch = d3_dispatch('done'),
         timeouts = [],
         tulipRoadId = null,
         flowerRoadId = 'w646',
@@ -44,8 +51,8 @@ export function uiIntroLine(context, reveal) {
 
 
     function eventCancel() {
-        d3.event.stopPropagation();
-        d3.event.preventDefault();
+        d3_event.stopPropagation();
+        d3_event.preventDefault();
     }
 
 
@@ -191,8 +198,8 @@ export function uiIntroLine(context, reveal) {
         if (!entity) return false;
 
         var drawNodes = context.graph().childNodes(entity);
-        return _.some(drawNodes, function(node) {
-            return _.some(context.graph().parentWays(node), function(parent) {
+        return _some(drawNodes, function(node) {
+            return _some(context.graph().parentWays(node), function(parent) {
                 return parent.id === flowerRoadId;
             });
         });
@@ -200,7 +207,7 @@ export function uiIntroLine(context, reveal) {
 
 
     function retryIntersect() {
-        d3.select(window).on('mousedown.intro', eventCancel, true);
+        d3_select(window).on('mousedown.intro', eventCancel, true);
 
         var box = pad(tulipRoadIntersection, 80, context);
         reveal(box,
@@ -245,15 +252,15 @@ export function uiIntroLine(context, reveal) {
             return chapter.restart();
         });
 
-        var button = d3.select('.preset-category-road .preset-list-button');
+        var button = d3_select('.preset-category-road .preset-list-button');
         if (button.empty()) return chapter.restart();
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
             // reset pane, in case user somehow happened to change it..
-            d3.select('.inspector-wrap .panewrap').style('right', '-100%');
+            d3_select('.inspector-wrap .panewrap').style('right', '-100%');
 
             reveal(button.node(),
                 t('intro.lines.choose_category_road', { category: roadCategory.name() })
@@ -266,8 +273,8 @@ export function uiIntroLine(context, reveal) {
         }, 400);  // after editor pane visible
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
-            d3.select('.preset-list-button').on('click.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.preset-list-button').on('click.intro', null);
             context.on('exit.intro', null);
             nextStep();
         }
@@ -283,7 +290,7 @@ export function uiIntroLine(context, reveal) {
             return chapter.restart();
         });
 
-        var subgrid = d3.select('.preset-category-road .subgrid');
+        var subgrid = d3_select('.preset-category-road .subgrid');
         if (subgrid.empty()) return chapter.restart();
 
         subgrid.selectAll(':not(.preset-highway-residential) .preset-list-button')
@@ -304,7 +311,7 @@ export function uiIntroLine(context, reveal) {
         }, 300);
 
         function continueTo(nextStep) {
-            d3.select('.preset-list-button').on('click.intro', null);
+            d3_select('.preset-list-button').on('click.intro', null);
             context.on('exit.intro', null);
             nextStep();
         }
@@ -322,10 +329,10 @@ export function uiIntroLine(context, reveal) {
         });
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         timeout(function() {
-            var button = d3.select('.entity-editor-pane .preset-list-button');
+            var button = d3_select('.entity-editor-pane .preset-list-button');
 
             reveal(button.node(),
                 t('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
@@ -338,8 +345,8 @@ export function uiIntroLine(context, reveal) {
         }, 500);
 
         function continueTo(nextStep) {
-            d3.select('.inspector-wrap').on('wheel.intro', null);
-            d3.select('.preset-list-button').on('click.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.preset-list-button').on('click.intro', null);
             context.on('exit.intro', null);
             nextStep();
         }
@@ -953,7 +960,7 @@ export function uiIntroLine(context, reveal) {
             reveal(box, t('intro.lines.multi_rightclick'), { duration: 0 });
         });
 
-        d3.select(window).on('click.intro contextmenu.intro', function() {
+        d3_select(window).on('click.intro contextmenu.intro', function() {
             timeout(function() {
                 var ids = context.selectedIDs();
                 if (ids.length === 2 &&
@@ -983,7 +990,7 @@ export function uiIntroLine(context, reveal) {
 
         function continueTo(nextStep) {
             context.map().on('move.intro drawn.intro', null);
-            d3.select(window).on('click.intro contextmenu.intro', null, true);
+            d3_select(window).on('click.intro contextmenu.intro', null, true);
             context.history().on('change.intro', null);
             nextStep();
         }
@@ -1072,12 +1079,12 @@ export function uiIntroLine(context, reveal) {
 
     chapter.exit = function() {
         timeouts.forEach(window.clearTimeout);
-        d3.select(window).on('mousedown.intro', null, true);
+        d3_select(window).on('mousedown.intro', null, true);
         context.on('enter.intro exit.intro', null);
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.intro', null);
-        d3.select('.inspector-wrap').on('wheel.intro', null);
-        d3.select('.preset-list-button').on('click.intro', null);
+        d3_select('.inspector-wrap').on('wheel.intro', null);
+        d3_select('.preset-list-button').on('click.intro', null);
     };
 
 
diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js
index e3f93222c..2a24df925 100644
--- a/modules/ui/intro/navigation.js
+++ b/modules/ui/intro/navigation.js
@@ -1,4 +1,10 @@
-import * as d3 from 'd3';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
 import { t } from '../../util/locale';
 import { modeBrowse, modeSelect } from '../../modes';
 import { utilRebind } from '../../util/rebind';
@@ -6,7 +12,7 @@ import { icon, pointBox, transitionTime } from './helper';
 
 
 export function uiIntroNavigation(context, reveal) {
-    var dispatch = d3.dispatch('done'),
+    var dispatch = d3_dispatch('done'),
         timeouts = [],
         hallId = 'n2061',
         townHall = [-85.63591, 41.94285],
@@ -28,8 +34,8 @@ export function uiIntroNavigation(context, reveal) {
 
 
     function eventCancel() {
-        d3.event.stopPropagation();
-        d3.event.preventDefault();
+        d3_event.stopPropagation();
+        d3_event.preventDefault();
     }
 
 
@@ -250,7 +256,7 @@ export function uiIntroNavigation(context, reveal) {
         if (!isTownHallSelected()) return clickTownHall();
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         var onClick = function() { continueTo(presetTownHall); };
 
@@ -272,7 +278,7 @@ export function uiIntroNavigation(context, reveal) {
         function continueTo(nextStep) {
             context.on('exit.intro', null);
             context.history().on('change.intro', null);
-            d3.select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
             nextStep();
         }
     }
@@ -282,9 +288,9 @@ export function uiIntroNavigation(context, reveal) {
         if (!isTownHallSelected()) return clickTownHall();
 
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         // preset match, in case the user happened to change it.
         var entity = context.entity(context.selectedIDs()[0]);
@@ -310,7 +316,7 @@ export function uiIntroNavigation(context, reveal) {
         function continueTo(nextStep) {
             context.on('exit.intro', null);
             context.history().on('change.intro', null);
-            d3.select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
             nextStep();
         }
     }
@@ -320,9 +326,9 @@ export function uiIntroNavigation(context, reveal) {
         if (!isTownHallSelected()) return clickTownHall();
 
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
         var onClick = function() { continueTo(closeTownHall); };
 
@@ -344,7 +350,7 @@ export function uiIntroNavigation(context, reveal) {
         function continueTo(nextStep) {
             context.on('exit.intro', null);
             context.history().on('change.intro', null);
-            d3.select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
             nextStep();
         }
     }
@@ -354,7 +360,7 @@ export function uiIntroNavigation(context, reveal) {
         if (!isTownHallSelected()) return clickTownHall();
 
         var selector = '.entity-editor-pane button.preset-close svg use';
-        var href = d3.select(selector).attr('href') || '#icon-close';
+        var href = d3_select(selector).attr('href') || '#icon-close';
 
         reveal('.entity-editor-pane',
             t('intro.navigation.close_townhall', { button: icon(href, 'pre-text') })
@@ -367,7 +373,7 @@ export function uiIntroNavigation(context, reveal) {
         context.history().on('change.intro', function() {
             // update the close icon in the tooltip if the user edits something.
             var selector = '.entity-editor-pane button.preset-close svg use';
-            var href = d3.select(selector).attr('href') || '#icon-close';
+            var href = d3_select(selector).attr('href') || '#icon-close';
 
             reveal('.entity-editor-pane',
                 t('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
@@ -396,14 +402,14 @@ export function uiIntroNavigation(context, reveal) {
                 t('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
             );
 
-            d3.select('.search-header input')
+            d3_select('.search-header input')
                 .on('keyup.intro', checkSearchResult);
         }, msec + 100);
     }
 
 
     function checkSearchResult() {
-        var first = d3.select('.feature-list-item:nth-child(0n+2)'),  // skip "No Results" item
+        var first = d3_select('.feature-list-item:nth-child(0n+2)'),  // skip "No Results" item
             firstName = first.select('.entity-name'),
             name = t('intro.graph.name.spring-street');
 
@@ -417,14 +423,14 @@ export function uiIntroNavigation(context, reveal) {
                 continueTo(selectedStreet);
             });
 
-            d3.select('.search-header input')
+            d3_select('.search-header input')
                 .on('keydown.intro', eventCancel, true)
                 .on('keyup.intro', null);
         }
 
         function continueTo(nextStep) {
             context.on('exit.intro', null);
-            d3.select('.search-header input')
+            d3_select('.search-header input')
                 .on('keydown.intro', null)
                 .on('keyup.intro', null);
             nextStep();
@@ -490,7 +496,7 @@ export function uiIntroNavigation(context, reveal) {
 
     function editorStreet() {
         var selector = '.entity-editor-pane button.preset-close svg use';
-        var href = d3.select(selector).attr('href') || '#icon-close';
+        var href = d3_select(selector).attr('href') || '#icon-close';
 
         reveal('.entity-editor-pane',
             t('intro.navigation.editor_street', {
@@ -507,7 +513,7 @@ export function uiIntroNavigation(context, reveal) {
         context.history().on('change.intro', function() {
             // update the close icon in the tooltip if the user edits something.
             var selector = '.entity-editor-pane button.preset-close svg use';
-            var href = d3.select(selector).attr('href') || '#icon-close';
+            var href = d3_select(selector).attr('href') || '#icon-close';
 
             reveal('.entity-editor-pane',
                 t('intro.navigation.editor_street', {
@@ -548,8 +554,8 @@ export function uiIntroNavigation(context, reveal) {
         context.on('enter.intro exit.intro', null);
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.intro', null);
-        d3.select('.inspector-wrap').on('wheel.intro', null);
-        d3.select('.search-header input').on('keydown.intro keyup.intro', null);
+        d3_select('.inspector-wrap').on('wheel.intro', null);
+        d3_select('.search-header input').on('keydown.intro keyup.intro', null);
     };
 
 
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index b52fb9085..0d46fd2a2 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -1,4 +1,9 @@
-import * as d3 from 'd3';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
 import { t, textDirection } from '../../util/locale';
 import { actionChangePreset } from '../../actions';
 import { modeBrowse, modeSelect } from '../../modes';
@@ -7,7 +12,7 @@ import { icon, pointBox, pad, selectMenuItem, transitionTime } from './helper';
 
 
 export function uiIntroPoint(context, reveal) {
-    var dispatch = d3.dispatch('done'),
+    var dispatch = d3_dispatch('done'),
         timeouts = [],
         intersection = [-85.63279, 41.94394],
         building = [-85.632422, 41.944045],
@@ -44,8 +49,8 @@ export function uiIntroPoint(context, reveal) {
 
 
     function eventCancel() {
-        d3.event.stopPropagation();
-        d3.event.preventDefault();
+        d3_event.stopPropagation();
+        d3_event.preventDefault();
     }
 
 
@@ -115,9 +120,9 @@ export function uiIntroPoint(context, reveal) {
         }
 
         // disallow scrolling
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
-        d3.select('.preset-search-input')
+        d3_select('.preset-search-input')
             .on('keydown.intro', null)
             .on('keyup.intro', checkPresetSearch);
 
@@ -136,9 +141,9 @@ export function uiIntroPoint(context, reveal) {
                 context.enter(modeSelect(context, [pointId]));
 
                 // disallow scrolling
-                d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
+                d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
 
-                d3.select('.preset-search-input')
+                d3_select('.preset-search-input')
                     .on('keydown.intro', null)
                     .on('keyup.intro', checkPresetSearch);
 
@@ -152,10 +157,10 @@ export function uiIntroPoint(context, reveal) {
 
 
         function checkPresetSearch() {
-            var first = d3.select('.preset-list-item:first-child');
+            var first = d3_select('.preset-list-item:first-child');
 
             if (first.classed('preset-amenity-cafe')) {
-                d3.select('.preset-search-input')
+                d3_select('.preset-search-input')
                     .on('keydown.intro', eventCancel, true)
                     .on('keyup.intro', null);
 
@@ -173,8 +178,8 @@ export function uiIntroPoint(context, reveal) {
         function continueTo(nextStep) {
             context.on('enter.intro', null);
             context.history().on('change.intro', null);
-            d3.select('.inspector-wrap').on('wheel.intro', null);
-            d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
+            d3_select('.inspector-wrap').on('wheel.intro', null);
+            d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
             nextStep();
         }
     }
@@ -211,7 +216,7 @@ export function uiIntroPoint(context, reveal) {
         }
 
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
         timeout(function() {
             // It's possible for the user to add a name in a previous step..
@@ -252,10 +257,10 @@ export function uiIntroPoint(context, reveal) {
 
     function addCloseEditor() {
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
         var selector = '.entity-editor-pane button.preset-close svg use';
-        var href = d3.select(selector).attr('href') || '#icon-close';
+        var href = d3_select(selector).attr('href') || '#icon-close';
 
         context.on('exit.intro', function() {
             continueTo(reselectPoint);
@@ -321,7 +326,7 @@ export function uiIntroPoint(context, reveal) {
         }
 
         // reset pane, in case user happened to untag the point..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
         context.on('exit.intro', function() {
             continueTo(reselectPoint);
@@ -351,7 +356,7 @@ export function uiIntroPoint(context, reveal) {
         }
 
         // reset pane, in case user happened to change it..
-        d3.select('.inspector-wrap .panewrap').style('right', '0%');
+        d3_select('.inspector-wrap .panewrap').style('right', '0%');
 
         context.on('exit.intro', function() {
             continueTo(rightClickPoint);
@@ -490,8 +495,8 @@ export function uiIntroPoint(context, reveal) {
         context.on('enter.intro exit.intro', null);
         context.map().on('move.intro drawn.intro', null);
         context.history().on('change.intro', null);
-        d3.select('.inspector-wrap').on('wheel.intro', eventCancel);
-        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
+        d3_select('.inspector-wrap').on('wheel.intro', eventCancel);
+        d3_select('.preset-search-input').on('keydown.intro keyup.intro', null);
     };
 
 
diff --git a/modules/ui/intro/start_editing.js b/modules/ui/intro/start_editing.js
index 8d3610067..6bd5c397f 100644
--- a/modules/ui/intro/start_editing.js
+++ b/modules/ui/intro/start_editing.js
@@ -1,4 +1,9 @@
-import * as d3 from 'd3';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import {
+    select as d3_select,
+    selectAll as d3_selectAll
+} from 'd3-selection';
+
 import { t } from '../../util/locale';
 import { icon } from './helper';
 import { uiModal } from '../modal';
@@ -6,8 +11,8 @@ import { utilRebind } from '../../util/rebind';
 
 
 export function uiIntroStartEditing(context, reveal) {
-    var dispatch = d3.dispatch('done', 'startEditing'),
-        modalSelection = d3.select(null);
+    var dispatch = d3_dispatch('done', 'startEditing'),
+        modalSelection = d3_select(null);
 
 
     var chapter = {
@@ -33,7 +38,7 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
     function showSave() {
-        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
+        d3_selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
         reveal('#bar button.save',
             t('intro.startediting.save'), {
                 buttonText: t('intro.ok'),
@@ -43,7 +48,7 @@ export function uiIntroStartEditing(context, reveal) {
     }
 
     function showStart() {
-        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
+        d3_selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
 
         modalSelection = uiModal(context.container());
 
@@ -81,7 +86,7 @@ export function uiIntroStartEditing(context, reveal) {
 
     chapter.exit = function() {
         modalSelection.remove();
-        d3.selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
+        d3_selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
     };
 
 
diff --git a/modules/ui/intro/welcome.js b/modules/ui/intro/welcome.js
index cd869f005..f54c81bc4 100644
--- a/modules/ui/intro/welcome.js
+++ b/modules/ui/intro/welcome.js
@@ -1,10 +1,15 @@
-import * as d3 from 'd3';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
 import { t } from '../../util/locale';
 import { utilRebind } from '../../util/rebind';
 
 
 export function uiIntroWelcome(context, reveal) {
-    var dispatch = d3.dispatch('done'),
+    var dispatch = d3_dispatch('done'),
         listener = clickListener();
 
     var chapter = {
@@ -66,7 +71,7 @@ export function uiIntroWelcome(context, reveal) {
 
         listener.on('click', function(which) {
             if (which === 'left') {
-                d3.select('.curtain-tooltip.intro-mouse .counter')
+                d3_select('.curtain-tooltip.intro-mouse .counter')
                     .text(String(++counter));
 
                 if (counter === times) {
@@ -107,7 +112,7 @@ export function uiIntroWelcome(context, reveal) {
 
         listener.on('click', function(which) {
             if (which === 'right') {
-                d3.select('.curtain-tooltip.intro-mouse .counter')
+                d3_select('.curtain-tooltip.intro-mouse .counter')
                     .text(String(++counter));
 
                 if (counter === times) {
@@ -155,9 +160,9 @@ export function uiIntroWelcome(context, reveal) {
 
 
 function clickListener() {
-    var dispatch = d3.dispatch('click'),
+    var dispatch = d3_dispatch('click'),
         minTime = 120,
-        tooltip = d3.select(null),
+        tooltip = d3_select(null),
         down = {};
 
     // `down` keeps track of which buttons/keys are down.
@@ -166,20 +171,20 @@ function clickListener() {
     //   on Windows a contextmenu event happens after keyup/mouseup
 
     function keydown() {
-        if (d3.event.keyCode === 93)  {   // context menu
-            d3.event.preventDefault();
-            d3.event.stopPropagation();
-            down.menu = d3.event.timeStamp;
+        if (d3_event.keyCode === 93)  {   // context menu
+            d3_event.preventDefault();
+            d3_event.stopPropagation();
+            down.menu = d3_event.timeStamp;
             tooltip.classed('rightclick', true);
         }
     }
 
 
     function keyup() {
-        if (d3.event.keyCode === 93)  {   // context menu
-            d3.event.preventDefault();
-            d3.event.stopPropagation();
-            var endTime = d3.event.timeStamp,
+        if (d3_event.keyCode === 93)  {   // context menu
+            d3_event.preventDefault();
+            d3_event.stopPropagation();
+            var endTime = d3_event.timeStamp,
                 startTime = down.menu || endTime,
                 delay = (endTime - startTime < minTime) ? minTime : 0;
 
@@ -194,23 +199,23 @@ function clickListener() {
 
 
     function mousedown() {
-        var button = d3.event.button;
-        if (button === 0 && !d3.event.ctrlKey) {
+        var button = d3_event.button;
+        if (button === 0 && !d3_event.ctrlKey) {
             tooltip.classed('leftclick', true);
         } else if (button === 2) {
             tooltip.classed('rightclick', true);
         }
-        down[button] = d3.event.timeStamp;
+        down[button] = d3_event.timeStamp;
     }
 
 
     function mouseup() {
-        var button = d3.event.button,
-            endTime = d3.event.timeStamp,
+        var button = d3_event.button,
+            endTime = d3_event.timeStamp,
             startTime = down[button] || endTime,
             delay = (endTime - startTime < minTime) ? minTime : 0;
 
-        if (button === 0 && !d3.event.ctrlKey) {
+        if (button === 0 && !d3_event.ctrlKey) {
             window.setTimeout(function() {
                 tooltip.classed('leftclick', false);
                 down[button] = undefined;  // delayed, for Windows
@@ -235,8 +240,8 @@ function clickListener() {
 
 
     function contextmenu() {
-        d3.event.preventDefault();
-        d3.event.stopPropagation();
+        d3_event.preventDefault();
+        d3_event.stopPropagation();
         if (!down[2] && !down.menu) {
             tooltip.classed('rightclick', true);
             window.setTimeout(function() {
@@ -251,7 +256,7 @@ function clickListener() {
         tooltip = selection;
         down = {};
 
-        d3.select(window)
+        d3_select(window)
             .on('keydown.intro', keydown)
             .on('keyup.intro', keyup)
             .on('mousedown.intro', mousedown)
@@ -261,7 +266,7 @@ function clickListener() {
 
 
     behavior.off = function() {
-        d3.select(window)
+        d3_select(window)
             .on('keydown.intro', null)
             .on('keyup.intro', null)
             .on('mousedown.intro', null)