diff --git a/examples/Legend.js b/examples/Legend.js
index 10b80d0..e6b0766 100644
--- a/examples/Legend.js
+++ b/examples/Legend.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
-import d3 from 'd3';
+import {
+  scaleOrdinal,
+  schemeCategory10,
+  range,
+} from 'd3';
 
 const legendStyles = {
   '.legend': {
@@ -30,7 +34,7 @@ const legendStyles = {
   }
 };
 
-const colors = d3.scale.category10().range();
+const colors = scaleOrdinal(schemeCategory10).domain(range(0, 20)).range();
 
 class Legend extends React.Component {
 
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
index dde62ef..f473af9 100644
--- a/examples/webpack.config.js
+++ b/examples/webpack.config.js
@@ -13,7 +13,9 @@ module.exports = {
 
     return entries
   }, {}),
-
+  externals: [{
+    xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}'
+  }],
   output: {
     path: __dirname + '/__build__',
     filename: '[name].js',
diff --git a/karma.conf.js b/karma.conf.js
index 28388c4..598259e 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -26,8 +26,9 @@ module.exports = (config) => {
       'node_modules/phantomjs-polyfill/bind-polyfill.js',
       './tests/**/*.js'
     ],
+    // list of files to exclude
     exclude: [
-      './tests/index.js'
+      './tests/index.js', 'node_modules', 'bower_components'
     ],
 
     plugins: [
@@ -44,11 +45,6 @@ module.exports = (config) => {
       'karma-webpack'
     ],
 
-
-    // list of files to exclude
-    exclude: ['node_modules', 'bower_components'],
-
-
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
@@ -108,6 +104,9 @@ module.exports = (config) => {
           'react-easy-chart': modulesPath
         }
       },
+      externals: [{
+        xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}'
+      }],
       module: {
         preLoaders: [
           {
diff --git a/modules/area-chart/index.js b/modules/area-chart/index.js
index 2f060a1..75adf38 100644
--- a/modules/area-chart/index.js
+++ b/modules/area-chart/index.js
@@ -14,8 +14,13 @@ import {
 import {
   event as lastEvent,
   select,
-  svg,
-  time } from 'd3';
+  axisBottom,
+  axisLeft,
+  axisRight,
+  line,
+  area,
+  timeFormat } from 'd3';
+import interpolateLine from '../interpolate';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
@@ -118,13 +123,11 @@ export default class AreaChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(x)
-      .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
     if (grid && verticalGrid) {
       axis
@@ -177,13 +180,11 @@ export default class AreaChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(y)
-      .orient(yAxisOrientRight ? 'right' : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (grid) {
@@ -273,14 +274,14 @@ export default class AreaChart extends PureComponent {
 
     const getStroke = (d, i) => colors[i];
 
-    const areaPath = svg.area()
-      .interpolate(interpolate)
+    const areaPath = area()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y0(h)
       .y1((d) => y(yValue(d)));
 
-    const linePath = svg.line()
-      .interpolate(interpolate)
+    const linePath = line()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y((d) => y(yValue(d)));
 
diff --git a/modules/bar-chart/index.js b/modules/bar-chart/index.js
index 14619d6..0c392bd 100644
--- a/modules/bar-chart/index.js
+++ b/modules/bar-chart/index.js
@@ -3,9 +3,15 @@ import { scaleBand as band, scaleLinear as linear } from 'd3-scale';
 import {
   event as lastEvent,
   select,
-  svg,
-  time,
-  scale,
+  axisBottom,
+  axisLeft,
+  axisRight,
+  scaleTime,
+  timeFormat,
+  scaleOrdinal,
+  schemeCategory20,
+  range,
+  line,
   max
 } from 'd3';
 import {
@@ -18,6 +24,7 @@ import {
   createValueGenerator,
   createCircularTicks
 } from '../shared';
+import interpolateLine from '../interpolate';
 import { extent } from 'd3-array';
 import { timeParse as parse } from 'd3-time-format';
 import ReactFauxDOM from 'react-faux-dom';
@@ -27,7 +34,7 @@ import merge from 'lodash.merge';
 
 const dateParser = {};
 
-const colorScale = scale.category20();
+const colorScale = scaleOrdinal(schemeCategory20).domain(range(0, 20));
 
 export default class BarChart extends PureComponent {
 
@@ -130,7 +137,7 @@ export default class BarChart extends PureComponent {
           );
         break;
       case 'time':
-        axis = time.scale();
+        axis = scaleTime();
         axis
           .domain(
             Array.isArray(domainRange)
@@ -175,13 +182,11 @@ export default class BarChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-        .scale(x)
-        .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     axis
@@ -226,9 +231,7 @@ export default class BarChart extends PureComponent {
       grid
     } = this.props;
 
-    const axis = svg.axis()
-        .scale(y)
-        .orient(yAxisOrientRight ? 'right' : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yTickNumber) {
       axis
@@ -284,12 +287,7 @@ export default class BarChart extends PureComponent {
 
     const y = this.createDomainRangeGenerator('y', yDomainRange, lineData, y2Type, h);
 
-    const axis = svg.axis()
-        .scale(y)
-        .orient(
-          (yAxisOrientRight)
-            ? 'left'
-            : 'right');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yTickNumber) {
       axis
@@ -402,8 +400,8 @@ export default class BarChart extends PureComponent {
     const yValue = createValueGenerator('y', y2Type, parseDate);
     const xValue = createValueGenerator('x', xType, parseDate);
 
-    const linePath = svg.line()
-      .interpolate(interpolate)
+    const linePath = line()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y((d) => y(yValue(d)));
 
diff --git a/modules/interpolate.js b/modules/interpolate.js
new file mode 100644
index 0000000..db65432
--- /dev/null
+++ b/modules/interpolate.js
@@ -0,0 +1,42 @@
+import {
+  curveLinear,
+  curveStepBefore,
+  curveStepAfter,
+  curveBasis,
+  curveBasisOpen,
+  curveBasisClosed,
+  curveBundle,
+  curveCardinal,
+  curveCardinalOpen,
+  curveCardinalClosed,
+  curveNatural
+} from 'd3';
+
+const interpolate = (type) => {
+  switch (type) {
+    case 'stepBefore':
+      return curveStepBefore;
+    case 'stepAfter':
+      return curveStepAfter;
+    case 'basis':
+      return curveBasis;
+    case 'basisOpen':
+      return curveBasisOpen;
+    case 'basisClosed':
+      return curveBasisClosed;
+    case 'bundle':
+      return curveBundle;
+    case 'cardinal':
+      return curveCardinal;
+    case 'cardinalOpen':
+      return curveCardinalOpen;
+    case 'cardinalClosed':
+      return curveCardinalClosed;
+    case 'natural':
+      return curveNatural;
+    default:
+      return curveLinear;
+  }
+};
+
+export default interpolate;
diff --git a/modules/legend/index.js b/modules/legend/index.js
index a152140..b2722ab 100644
--- a/modules/legend/index.js
+++ b/modules/legend/index.js
@@ -1,7 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
-import { scale } from 'd3';
+import {
+  scaleOrdinal,
+  schemeCategory20,
+  range
+ } from 'd3';
 import {
   createUniqueID
 } from '../shared';
@@ -9,7 +13,7 @@ import merge from 'lodash.merge';
 
 import defaultStyles from './defaultStyles';
 
-const colors = scale.category20().range();
+const colors = scaleOrdinal(schemeCategory20).domain(range(0, 20)).range();
 
 export default class Legend extends PureComponent {
 
diff --git a/modules/line-chart/hybrid/LineChart/common.js b/modules/line-chart/hybrid/LineChart/common.js
index abbc6ef..e8a7022 100644
--- a/modules/line-chart/hybrid/LineChart/common.js
+++ b/modules/line-chart/hybrid/LineChart/common.js
@@ -1,5 +1,5 @@
 
-import { time } from 'd3';
+import { scaleTime, timeFormat } from 'd3';
 import { extent } from 'd3-array';
 import { scaleLinear, scalePoint } from 'd3-scale';
 import { timeParse } from 'd3-time-format';
@@ -94,7 +94,7 @@ export { createParser };
 function createFormat(pattern = '%b %d') {
   return (
     TIMEFORMAT[pattern] || (
-    TIMEFORMAT[pattern] = time.format(pattern)));
+    TIMEFORMAT[pattern] = timeFormat(pattern)));
 }
 
 export function createFormatX(type, pattern) {
@@ -179,13 +179,13 @@ export const reduce = (p, c) => (p -= c);
 export const createUniqueID = () => Math.floor(Math.random() * new Date().getTime());
 
 export function createScaleTimeX(domain = [], x = 0) {
-  return time.scale()
+  return scaleTime()
     .domain(domain)
     .range([0, x]);
 }
 
 export function createScaleTimeY(domain = [], y = 0) {
-  return time.scale()
+  return scaleTime()
     .domain(domain)
     .range([y, 0]);
 }
diff --git a/modules/line-chart/hybrid/LineChart/index.js b/modules/line-chart/hybrid/LineChart/index.js
index f944535..8dafd7a 100644
--- a/modules/line-chart/hybrid/LineChart/index.js
+++ b/modules/line-chart/hybrid/LineChart/index.js
@@ -1,6 +1,9 @@
 import {
   select,
-  svg
+  axisBottom,
+  axisLeft,
+  axisRight,
+  line
 } from 'd3';
 
 import {
@@ -18,6 +21,7 @@ import {
   // createFormatX,
   // createFormatY
 } from './common';
+import interpolateLine from '../../../interpolate';
 
 function initialise(chart, props) {
   const {
@@ -109,8 +113,8 @@ function initialise(chart, props) {
   };
   */
 
-  const linePath = svg.line()
-    .interpolate(interpolate)
+  const linePath = line()
+    .curve(interpolateLine(interpolate))
     .x((d) => scales.x(parsers.x(d)))
     .y((d) => scales.y(parsers.y(d)));
 
@@ -119,9 +123,7 @@ function initialise(chart, props) {
     .attr('class', 'chartGroup')
     .attr('transform', `translate(${l}, ${t})`);
 
-  const xAxis = svg.axis()
-    .scale(scales.x)
-    .orient('bottom');
+  const xAxis = axisBottom(scales.x);
 
   if (vGrid || grid) {
     xAxis
@@ -159,12 +161,7 @@ function initialise(chart, props) {
         : 'end')
       .text(xLabel);
   }
-
-  const yAxis = svg.axis()
-    .scale(scales.y)
-    .orient((orient === 'right')
-      ? 'right'
-      : 'left');
+  const yAxis = (orient === 'right') ? axisRight(scales.y) : axisLeft(scales.y);
 
   if (hGrid || grid) {
     yAxis
@@ -310,8 +307,8 @@ function transition(chart, props) {
   };
   */
 
-  const linePath = svg.line()
-    .interpolate(interpolate)
+  const linePath = line()
+    .curve(interpolateLine(interpolate))
     .x((d) => scales.x(parsers.x(d)))
     .y((d) => scales.y(parsers.y(d)));
 
@@ -325,9 +322,7 @@ function transition(chart, props) {
     .duration(750)
     .attr('transform', `translate(${l}, ${t})`);
 
-  const xAxis = svg.axis()
-    .scale(scales.x)
-    .orient('bottom');
+  const xAxis = axisBottom(scales.x);
 
   if (vGrid || grid) {
     xAxis
@@ -373,11 +368,7 @@ function transition(chart, props) {
       .text(xLabel);
   }
 
-  const yAxis = svg.axis()
-    .scale(scales.y)
-    .orient((orient === 'right')
-      ? 'right'
-      : 'left');
+  const yAxis = (orient === 'right') ? axisRight(scales.y) : axisLeft(scales.y);
 
   if (hGrid || grid) {
     yAxis
diff --git a/modules/line-chart/index.js b/modules/line-chart/index.js
index c9a07a6..d263456 100644
--- a/modules/line-chart/index.js
+++ b/modules/line-chart/index.js
@@ -4,8 +4,11 @@ import ReactFauxDOM from 'react-faux-dom';
 import {
   event as lastEvent,
   select,
-  svg,
-  time
+  axisBottom,
+  axisLeft,
+  axisRight,
+  line,
+  timeFormat
 } from 'd3';
 import {
   createUniqueID,
@@ -18,6 +21,7 @@ import {
   getAxisStyles,
   createCircularTicks
 } from '../shared';
+import interpolateLine from '../interpolate';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
@@ -119,13 +123,11 @@ export default class LineChart extends React.Component {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(x)
-      .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (grid && verticalGrid) {
@@ -174,13 +176,11 @@ export default class LineChart extends React.Component {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(y)
-      .orient(yAxisOrientRight ? 'right' : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
     if (grid) {
       axis
@@ -230,8 +230,8 @@ export default class LineChart extends React.Component {
 
     const getStroke = (d, i) => colors[i];
 
-    const linePath = svg.line()
-      .interpolate(interpolate)
+    const linePath = line()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y((d) => y(yValue(d)));
 
diff --git a/modules/line-chart/static/index.js b/modules/line-chart/static/index.js
index 0c79c13..e378685 100644
--- a/modules/line-chart/static/index.js
+++ b/modules/line-chart/static/index.js
@@ -3,8 +3,11 @@ import ReactFauxDOM from 'react-faux-dom';
 import {
   event as lastEvent,
   select,
-  svg,
-  time
+  axisBottom,
+  axisLeft,
+  axisRight,
+  line,
+  timeFormat
 } from 'd3';
 import {
   createUniqueID,
@@ -17,6 +20,7 @@ import {
   getAxisStyles,
   createCircularTicks
 } from '../../shared';
+import interpolateLine from '../../interpolate';
 import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
@@ -118,13 +122,11 @@ export default class LineChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(x)
-      .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (grid && verticalGrid) {
@@ -183,16 +185,11 @@ export default class LineChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(y)
-      .orient(
-        (yAxisOrientRight)
-          ? 'right'
-          : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (yType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (grid) {
@@ -250,8 +247,8 @@ export default class LineChart extends PureComponent {
 
     const getStroke = (d, i) => colors[i];
 
-    const linePath = svg.line()
-      .interpolate(interpolate)
+    const linePath = line()
+      .curve(interpolateLine(interpolate))
       .x((d) => x(xValue(d)))
       .y((d) => y(yValue(d)));
 
diff --git a/modules/pie-chart/hybrid/index.js b/modules/pie-chart/hybrid/index.js
index 7b3d11b..accf067 100644
--- a/modules/pie-chart/hybrid/index.js
+++ b/modules/pie-chart/hybrid/index.js
@@ -1,8 +1,10 @@
 import React, { PureComponent } from 'react';
 import {
-  scale,
-  layout,
-  svg,
+  scaleOrdinal,
+  schemeCategory20,
+  range,
+  pie as layout,
+  arc,
   select,
   event as lastEvent,
   interpolate
@@ -16,8 +18,8 @@ import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
 
-const color = scale.category20();
-const pie = layout.pie()
+const color = scaleOrdinal(schemeCategory20).domain(range(0, 20));
+const pie = layout()
   .value((d) => d.value)
   .sort(null);
 
@@ -87,7 +89,7 @@ export default class PieChart extends PureComponent {
     const innerRadius = this.getInnerRadius();
     const outerRadius = this.getOuterRadius();
 
-    return svg.arc()
+    return arc()
       .innerRadius(innerRadius - padding)
       .outerRadius(outerRadius - padding);
   }
@@ -100,7 +102,7 @@ export default class PieChart extends PureComponent {
     const outerRadius = this.getOuterRadius();
     const radius = outerRadius - padding - ((20 * outerRadius) / 100);
 
-    return svg.arc()
+    return arc()
       .outerRadius(radius)
       .innerRadius(radius);
   }
diff --git a/modules/pie-chart/static/index.js b/modules/pie-chart/static/index.js
index f519bf8..a6928e8 100644
--- a/modules/pie-chart/static/index.js
+++ b/modules/pie-chart/static/index.js
@@ -1,8 +1,10 @@
 import React, { PureComponent } from 'react';
 import {
-  scale,
-  layout,
-  svg,
+  scaleOrdinal,
+  schemeCategory20,
+  range,
+  pie as layout,
+  arc,
   select,
   event as lastEvent
 } from 'd3';
@@ -15,8 +17,8 @@ import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
 
-const color = scale.category20();
-const pie = layout.pie()
+const color = scaleOrdinal(schemeCategory20).domain(range(0, 20));
+const pie = layout()
   .value((d) => d.value)
   .sort(null);
 
@@ -70,7 +72,7 @@ export default class PieChart extends PureComponent {
     const innerRadius = this.getInnerRadius();
     const outerRadius = this.getOuterRadius();
 
-    return svg.arc()
+    return arc()
       .innerRadius(innerRadius - padding)
       .outerRadius(outerRadius - padding);
   }
@@ -83,7 +85,7 @@ export default class PieChart extends PureComponent {
     const outerRadius = this.getOuterRadius();
     const radius = outerRadius - padding - ((20 * outerRadius) / 100);
 
-    return svg.arc()
+    return arc()
       .outerRadius(radius)
       .innerRadius(radius);
   }
diff --git a/modules/scatterplot-chart/hybrid/index.js b/modules/scatterplot-chart/hybrid/index.js
index 3a0bd01..76abf3f 100644
--- a/modules/scatterplot-chart/hybrid/index.js
+++ b/modules/scatterplot-chart/hybrid/index.js
@@ -7,10 +7,15 @@ import {
   event as lastEvent,
   min,
   max,
-  scale,
+  scaleOrdinal,
+  schemeCategory20,
+  range,
   select,
-  svg,
-  time
+  axisBottom,
+  axisLeft,
+  axisRight,
+  scaleTime,
+  timeFormat
 } from 'd3';
 import { timeParse as parse } from 'd3-time-format';
 import { extent } from 'd3-array';
@@ -28,7 +33,7 @@ import {
 
 const dateParser = {};
 
-const color = scale.category20();
+const color = scaleOrdinal(schemeCategory20).domain(range(0, 20));
 
 const axisMargin = 18;
 
@@ -110,7 +115,7 @@ export default class ScatterplotChart extends PureComponent {
   getScale(type) {
     switch (type) {
       case 'time':
-        return time.scale();
+        return scaleTime();
       case 'text':
         return point();
       default:
@@ -136,9 +141,9 @@ export default class ScatterplotChart extends PureComponent {
 
   getRadius(data, dataItem, dotRadius) {
     if (typeof data[0].z !== 'undefined') {
-      const range = extent(data, (d) => d.z);
-      const mn = range[0];
-      const mx = range[1];
+      const rangeRadius = extent(data, (d) => d.z);
+      const mn = rangeRadius[0];
+      const mx = rangeRadius[1];
       const p = ((dataItem.z - mn) / (mx - mn));
       const minRad = 5;
       const maxRad = 20;
@@ -225,7 +230,7 @@ export default class ScatterplotChart extends PureComponent {
               : [length, 0]);
         break;
       case 'time':
-        axis = time.scale();
+        axis = scaleTime();
         axis
           .domain(
             (domainRange)
@@ -275,13 +280,11 @@ export default class ScatterplotChart extends PureComponent {
       xTicks
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(x)
-      .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (xTickNumber) {
@@ -314,12 +317,7 @@ export default class ScatterplotChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(y)
-      .orient(
-        (yAxisOrientRight)
-          ? 'right'
-          : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (grid) {
       axis
diff --git a/modules/scatterplot-chart/static/index.js b/modules/scatterplot-chart/static/index.js
index 547af23..de31abc 100644
--- a/modules/scatterplot-chart/static/index.js
+++ b/modules/scatterplot-chart/static/index.js
@@ -7,10 +7,15 @@ import {
   event as lastEvent,
   min,
   max,
-  scale,
+  scaleOrdinal,
+  schemeCategory20,
+  range,
   select,
-  svg,
-  time
+  scaleTime,
+  axisBottom,
+  axisLeft,
+  axisRight,
+  timeFormat
 } from 'd3';
 import { timeParse as parse } from 'd3-time-format';
 import { extent } from 'd3-array';
@@ -28,7 +33,7 @@ import {
 
 const dateParser = {};
 
-const color = scale.category20();
+const color = scaleOrdinal(schemeCategory20).domain(range(0, 20));
 
 const axisMargin = 18;
 
@@ -108,7 +113,7 @@ export default class ScatterplotChart extends PureComponent {
   getScale(type) {
     switch (type) {
       case 'time':
-        return time.scale();
+        return scaleTime();
       case 'text':
         return point();
       default:
@@ -134,9 +139,9 @@ export default class ScatterplotChart extends PureComponent {
 
   getRadius(data, dataItem, dotRadius) {
     if (typeof data[0].z !== 'undefined') {
-      const range = extent(data, (d) => d.z);
-      const mn = range[0];
-      const mx = range[1];
+      const rangeRadius = extent(data, (d) => d.z);
+      const mn = rangeRadius[0];
+      const mx = rangeRadius[1];
       const p = ((dataItem.z - mn) / (mx - mn));
       const minRad = 5;
       const maxRad = 20;
@@ -207,7 +212,7 @@ export default class ScatterplotChart extends PureComponent {
               : [length, 0]);
         break;
       case 'time':
-        axis = time.scale();
+        axis = scaleTime();
         axis
           .domain(
             (domainRange)
@@ -257,13 +262,11 @@ export default class ScatterplotChart extends PureComponent {
       xTicks
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(x)
-      .orient('bottom');
+    const axis = axisBottom(x);
 
     if (xType === 'time' && tickTimeDisplayFormat) {
       axis
-        .tickFormat(time.format(tickTimeDisplayFormat));
+        .tickFormat(timeFormat(tickTimeDisplayFormat));
     }
 
     if (xTickNumber) {
@@ -296,12 +299,7 @@ export default class ScatterplotChart extends PureComponent {
       yAxisOrientRight
     } = this.props;
 
-    const axis = svg.axis()
-      .scale(y)
-      .orient(
-        (yAxisOrientRight)
-          ? 'right'
-          : 'left');
+    const axis = yAxisOrientRight ? axisRight(y) : axisLeft(y);
 
     if (grid) {
       axis
diff --git a/modules/shared.js b/modules/shared.js
index 5cf71ba..20f20cc 100644
--- a/modules/shared.js
+++ b/modules/shared.js
@@ -1,6 +1,6 @@
 import { extent } from 'd3-array';
 import { scaleLinear as linear, scalePoint as point } from 'd3-scale';
-import { time, select } from 'd3';
+import { scaleTime, select } from 'd3';
 import hash from 'object-hash';
 
 export const defaultColors = [
@@ -246,7 +246,7 @@ export function createDomainRangeGenerator(scale, domainRange, data, type, lengt
             : [length, 0]);
       break;
     case 'time':
-      axis = time.scale();
+      axis = scaleTime();
       axis
         .domain(
           Array.isArray(domainRange)
diff --git a/package.json b/package.json
index b224f15..b08926b 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "homepage": "https://github.com/rma-consulting/react-easy-chart#readme",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.11.4",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -83,11 +83,11 @@
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
-    "d3": "^3.5.17",
-    "d3-array": "^0.8.1",
-    "d3-scale": "^0.9.3",
-    "d3-shape": "^0.7.1",
-    "d3-time-format": "^2.0.3",
+    "d3": "^4.12.0",
+    "d3-array": "^1.2.1",
+    "d3-scale": "^1.0.7",
+    "d3-shape": "^1.2.0",
+    "d3-time-format": "^2.1.1",
     "lodash.merge": "^4.0.1",
     "object-hash": "^1.1.4",
     "radium": "^0.19.1",
diff --git a/tests/legend/legend.test.js b/tests/legend/legend.test.js
index 748697c..6066a1a 100644
--- a/tests/legend/legend.test.js
+++ b/tests/legend/legend.test.js
@@ -4,7 +4,9 @@ import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 import ReactTestUtils from 'react-dom/test-utils';
 import {Legend} from 'react-easy-chart';
-import {scale} from 'd3';
+import {scaleOrdinal,
+schemeCategory20,
+range} from 'd3';
 
 const should = chaiShould();
 
@@ -26,7 +28,7 @@ const config = [
   {color: 'tomato'}
 ];
 
-const colors = scale.category20().range();
+const colors = scaleOrdinal(schemeCategory20).domain(range(0, 20)).range();
 
 describe('Legend component', () => {
   it('Should be defined', () => {