diff --git a/examples/server.js b/examples/server.js
index d97067f..583d3f8 100644
--- a/examples/server.js
+++ b/examples/server.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const config = require('./webpack.config');
 const open = require('open');
-const port = 8080;
+const port = 8082;
 
 const app = new WebpackDevServer(webpack(config), {
   publicPath: '/__build__/',
diff --git a/modules/pie-chart/hybrid/index.js b/modules/pie-chart/hybrid/index.js
index accf067..a52280d 100644
--- a/modules/pie-chart/hybrid/index.js
+++ b/modules/pie-chart/hybrid/index.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import {
   scaleOrdinal,
-  schemeCategory20,
+  schemeCategory10,
   range,
   pie as layout,
   arc,
@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 import { Style } from 'radium';
 import merge from 'lodash.merge';
 
-const color = scaleOrdinal(schemeCategory20).domain(range(0, 20));
+const color = scaleOrdinal(schemeCategory10).domain(range(0, 10));
 const pie = layout()
   .value((d) => d.value)
   .sort(null);
diff --git a/modules/scatterplot-chart/static/index.js b/modules/scatterplot-chart/static/index.js
index de31abc..cddc73c 100644
--- a/modules/scatterplot-chart/static/index.js
+++ b/modules/scatterplot-chart/static/index.js
@@ -8,7 +8,7 @@ import {
   min,
   max,
   scaleOrdinal,
-  schemeCategory20,
+  schemeCategory10,
   range,
   select,
   scaleTime,
@@ -33,7 +33,7 @@ import {
 
 const dateParser = {};
 
-const color = scaleOrdinal(schemeCategory20).domain(range(0, 20));
+const color = scaleOrdinal(schemeCategory10).domain(range(0, 10));
 
 const axisMargin = 18;
 
diff --git a/package.json b/package.json
index 4a0882b..31e0de8 100644
--- a/package.json
+++ b/package.json
@@ -83,11 +83,12 @@
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
-    "d3": "^4.12.0",
+    "d3": "^5.4.0",
     "d3-array": "^1.2.1",
     "d3-scale": "^1.0.7",
     "d3-shape": "^1.2.0",
     "d3-time-format": "^2.1.1",
+    "d3-scale-chromatic": "^1.3.0",
     "lodash.merge": "^4.0.1",
     "object-hash": "^1.1.4",
     "radium": "^0.19.1",