diff --git a/client/app/scripts/charts/node-networks-overlay.js b/client/app/scripts/charts/node-networks-overlay.js
index 7d2b02d27..a125309a4 100644
--- a/client/app/scripts/charts/node-networks-overlay.js
+++ b/client/app/scripts/charts/node-networks-overlay.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { scaleOrdinal } from 'd3-scale';
+import { scaleBand } from 'd3-scale';
 import { List as makeList } from 'immutable';
 import { getNetworkColor } from '../utils/color-utils';
 import { isContrastMode } from '../utils/contrast-utils';
@@ -10,7 +10,7 @@ const minBarHeight = 3;
 const padding = 0.05;
 const rx = 1;
 const ry = rx;
-const x = scaleOrdinal();
+const x = scaleBand();
 
 function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
   // Min size is about a quarter of the width, feels about right.
@@ -20,13 +20,14 @@ function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
 
   // Update singleton scale.
   x.domain(networks.map((n, i) => i).toJS());
-  x.rangeBands([barWidth * -0.5, barWidth * 0.5], padding, 0);
+  x.range([barWidth * -0.5, barWidth * 0.5]);
+  x.paddingInner(padding);
 
   const bars = networks.map((n, i) => (
     <rect
       x={x(i)}
       y={offset - barHeight * 0.5}
-      width={x.rangeBand()}
+      width={x.bandwidth()}
       height={barHeight}
       rx={rx}
       ry={ry}
diff --git a/client/app/scripts/charts/node-shape-heptagon.js b/client/app/scripts/charts/node-shape-heptagon.js
index 1abfe4b5b..40314b1c1 100644
--- a/client/app/scripts/charts/node-shape-heptagon.js
+++ b/client/app/scripts/charts/node-shape-heptagon.js
@@ -33,7 +33,7 @@ export default function NodeShapeHeptagon({id, highlighted, size, color, metric}
 
   return (
     <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId, size, height, size * 0.5 - height, -size * 0.5)}
+      {hasMetric && getClipPathDefinition(clipId, size, height, -size * 0.5, size * 0.5 - height)}
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
diff --git a/client/app/scripts/charts/node-shape-hexagon.js b/client/app/scripts/charts/node-shape-hexagon.js
index 4e4c18d72..36c2a6055 100644
--- a/client/app/scripts/charts/node-shape-hexagon.js
+++ b/client/app/scripts/charts/node-shape-hexagon.js
@@ -36,18 +36,20 @@ export default function NodeShapeHexagon({id, highlighted, size, color, metric})
   });
 
   const shadowSize = 0.45;
-  const upperHexBitHeight = -0.25 * size * shadowSize;
 
   const clipId = `mask-${id}`;
   const {height, hasMetric, formattedValue} = getMetricValue(metric, size);
   const metricStyle = { fill: getMetricColor(metric) };
   const className = classNames('shape', { metrics: hasMetric });
   const fontSize = size * CANVAS_METRIC_FONT_SIZE;
+  // how much the hex curve line interpolator curves outside the original shape definition in
+  // percent (very roughly)
+  const hexCurve = 0.05;
 
   return (
     <g className={className}>
-      {hasMetric && getClipPathDefinition(clipId, size, height, size - height +
-                                          upperHexBitHeight, 0)}
+      {hasMetric && getClipPathDefinition(clipId,
+        size * (1 + hexCurve * 2), height, -size * hexCurve, (size - height) * shadowSize * 2)}
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(shadowSize)} />