Upgrade d3 to v4

package.json

@@ -73,7 +73,7 @@
     "chronoshift": "0.9.6",
     "compression": "1.7.1",
     "core-js": "2.6.0",
-    "d3": "3.5.17",
+    "d3": "4.13.0",
     "d3-dsv": "2.0.0",
     "express": "4.16.2",
     "file-saver": "1.3.3",
@@ -109,9 +109,8 @@
     "@types/chai": "4.2.7",
     "@types/chai-datetime": "0.0.33",
     "@types/compression": "0.0.35",
-    "@types/d3": "3.5.40",
+    "@types/d3": "4.13.12",
     "@types/d3-dsv": "2.0.0",
-    "@types/d3-scale": "2.1.1",
     "@types/enzyme": "3.1.11",
     "@types/express": "4.11.0",
     "@types/express-session": "1.15.6",

src/client/components/color-legend/color-legend.tsx

@@ -24,7 +24,7 @@ interface ColorLegendProps {
   height?: number;
   title: string;
   formatter: Unary<number, string>;
-  colorScale: d3.scale.Linear<string, string>;
+  colorScale: d3.ScaleLinear<string, string>;
 }
 
 const leftMargin = 5;

src/client/components/tabular-scroller/measures/measure-row.tsx

@@ -30,7 +30,7 @@ interface MeasureRowProps {
   style: React.CSSProperties;
   datum: Datum;
   cellWidth: number;
-  scales: Map<string, d3.scale.Linear<number, number>>;
+  scales: Map<string, d3.ScaleLinear<number, number>>;
   showBar: boolean;
 }
 

src/client/components/tabular-scroller/measures/measure-rows.tsx

@@ -27,7 +27,7 @@ interface MeasureRowsProps {
   visibleRowsIndexRange: [number, number];
   essence: Essence;
   highlightedRowIndex: number | null;
-  scales: Map<string, d3.scale.Linear<number, number>>;
+  scales: Map<string, d3.ScaleLinear<number, number>>;
   data: PseudoDatum[];
   hoverRow?: Datum;
   cellWidth: number;

src/client/components/tabular-scroller/measures/measure-value.tsx

@@ -25,7 +25,7 @@ import { MeasureCell } from "./measure-cell";
 interface MeasureValueProps {
   series: ConcreteSeries;
   datum: Datum;
-  barScale?: d3.scale.Linear<number, number>;
+  barScale?: d3.ScaleLinear<number, number>;
   cellWidth: number;
   showPrevious: boolean;
   highlight: boolean;

src/client/components/tabular-scroller/utils/get-scales-for-columns.ts

@@ -18,15 +18,15 @@ import { Map } from "immutable";
 import { Datum, PseudoDatum } from "plywood";
 import { Essence } from "../../../../common/models/essence/essence";
 
-export function getScalesForColumns(essence: Essence, flatData: PseudoDatum[]): Map<string, d3.scale.Linear<number, number>> {
+export function getScalesForColumns(essence: Essence, flatData: PseudoDatum[]): Map<string, d3.ScaleLinear<number, number>> {
   return essence.getConcreteSeries()
     .groupBy(series => series.reactKey())
     .map(seriesCollection => seriesCollection.first())
     .toMap()
     .map(series => {
     const measureValues = flatData.map((d: Datum) => series.selectValue(d));
 
-    return d3.scale.linear()
+    return d3.scaleLinear()
       // Ensure that 0 is in there
       .domain(d3.extent([0, ...measureValues]))
       .range([0, 100]);

src/client/index.d.ts

@@ -56,7 +56,7 @@ declare module "@vx/scale" {
     domain: [number, number];
   }
 
-  export const scaleLinear: <Range = number, Output = number>(options: ScaleLinearOptions<Range, Output>) => d3.scale.Linear<Range, Output>;
+  export const scaleLinear: <Range = number, Output = number>(options: ScaleLinearOptions<Range, Output>) => d3.ScaleLinear<Range, Output>;
 }
 
 declare module "@vx/tooltip" {

src/client/utils/dataset/selectors/dataset-fixtures.ts

@@ -45,7 +45,7 @@ export const nominalDataset = makeDataset([{ channel: "foobar", [SPLIT]: nonNomi
 
 export const sparseNominalDataset = makeDataset([{ channel: "foobar", [SPLIT]: sparseNonNominalDatums }]);
 
-export const scale = d3.time.scale().domain([january(1), january(7)]).range([0, 1000]) as unknown as ContinuousScale;
+export const scale = d3.scaleTime().domain([january(1), january(7)]).range([0, 1000]) as unknown as ContinuousScale;
 
 export function createDailyNominalDatasetInJanuary(startDay: number, endDay: number): Dataset {
   const datums = range(startDay, endDay).map(i => {

src/client/utils/linear-scale/linear-scale.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { scale } from "d3";
+import * as d3 from "d3";
 
-export type LinearScale = scale.Linear<number, number>;
+export type LinearScale = d3.ScaleLinear<number, number>;
 
 export const TICKS_COUNT = 5;
 
@@ -29,7 +29,7 @@ export default function getScale([min, max]: number[], height: number): LinearSc
     return null;
   }
 
-  return scale.linear()
+  return d3.scaleLinear()
     .domain([Math.min(min, 0), Math.max(max, 0)])
     .nice(TICKS_COUNT)
     .range([height, 0]);

src/client/visualizations/bar-chart/bar-chart.tsx

@@ -297,7 +297,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
     return d3.extent(data, getY);
   }
 
-  getYScale(series: ConcreteSeries, yAxisStage: Stage): d3.scale.Linear<number, number> {
+  getYScale(series: ConcreteSeries, yAxisStage: Stage): d3.ScaleLinear<number, number> {
     const { essence } = this.props;
     const { flatData } = this.state;
 
@@ -306,7 +306,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
 
     const extentY = this.getYExtent(leafData, series);
 
-    return d3.scale.linear()
+    return d3.scaleLinear()
       .domain([Math.min(extentY[0] * 1.1, 0), Math.max(extentY[1] * 1.1, 0)])
       .range([yAxisStage.height, yAxisStage.y]);
   }
@@ -320,7 +320,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
     const xScale = this.getPrimaryXScale();
     const { essence, stage } = this.props;
 
-    const { stepWidth } = this.getBarDimensions(xScale.rangeBand());
+    const { stepWidth } = this.getBarDimensions(xScale.bandwidth());
     const xTicks = xScale.domain();
     const width = xTicks.length > 0 ? roundToPx(xScale(xTicks[xTicks.length - 1])) + stepWidth : 0;
 
@@ -635,7 +635,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
   }
 
   getYAxisStuff(dataset: Dataset, series: ConcreteSeries, chartStage: Stage, chartIndex: number): {
-    yGridLines: JSX.Element, yAxis: JSX.Element, yScale: d3.scale.Linear<number, number>
+    yGridLines: JSX.Element, yAxis: JSX.Element, yScale: d3.ScaleLinear<number, number>
   } {
     const { yAxisStage } = this.getAxisStages(chartStage);
 
@@ -773,7 +773,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
     }
   }
 
-  getPrimaryXScale(): d3.scale.Ordinal<string, number> {
+  getPrimaryXScale(): d3.ScaleBand<string> {
     const { data } = this.props;
     const { maxNumberOfLeaves } = this.state;
     const dataset = (data.data[0][SPLIT] as Dataset).data;
@@ -787,9 +787,9 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
 
     const { usedWidth, padLeft } = this.getXValues(maxNumberOfLeaves);
 
-    return d3.scale.ordinal()
+    return d3.scaleBand()
       .domain(dataset.map(getX))
-      .rangeBands([padLeft, padLeft + usedWidth]);
+      .range([padLeft, padLeft + usedWidth]);
   }
 
   getBarDimensions(xRangeBand: number): { stepWidth: number, barWidth: number, barOffset: number } {
@@ -823,7 +823,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
     return { padLeft, usedWidth };
   }
 
-  getBarsCoordinates(chartIndex: number, xScale: d3.scale.Ordinal<string, number>): BarCoordinates[] {
+  getBarsCoordinates(chartIndex: number, xScale: d3.ScaleBand<string>): BarCoordinates[] {
     if (!!this.coordinatesCache[chartIndex]) {
       return this.coordinatesCache[chartIndex];
     }
@@ -858,14 +858,14 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
     series: ConcreteSeries,
     chartStage: Stage,
     getX: (d: Datum, i: number) => string,
-    xScale: d3.scale.Ordinal<string, number>,
-    scaleY: d3.scale.Linear<number, number>,
+    xScale: d3.ScaleBand<string>,
+    scaleY: d3.ScaleLinear<number, number>,
     splitIndex = 1
   ): BarCoordinates[] {
     const { essence } = this.props;
     const { maxNumberOfLeaves } = this.state;
 
-    const { stepWidth, barWidth, barOffset } = this.getBarDimensions(xScale.rangeBand());
+    const { stepWidth, barWidth, barOffset } = this.getBarDimensions(xScale.bandwidth());
 
     const coordinates: BarCoordinates[] = data.map((d, i) => {
       let x = xScale(getX(d, i));
@@ -887,9 +887,9 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
         let subStage: Stage = new Stage({ x, y: chartStage.y, width: barWidth, height: chartStage.height });
         let subGetX: any = (d: Datum, i: number) => String(i);
         let subData: Datum[] = (d[SPLIT] as Dataset).data;
-        let subxScale = d3.scale.ordinal()
+        let subxScale = d3.scaleBand()
           .domain(d3.range(0, maxNumberOfLeaves[splitIndex]).map(String))
-          .rangeBands([x + barOffset, x + subStage.width]);
+          .range([x + barOffset, x + subStage.width]);
 
         coordinate.children = this.getSubCoordinates(subData, series, subStage, subGetX, subxScale, scaleY, splitIndex + 1);
       }

src/client/visualizations/bar-chart/improved-bar-chart/utils/x-scale.ts

@@ -29,18 +29,19 @@ export interface XScale {
 export function createXScale(domain: XDomain, width: number): XScale {
   const range: [number, number] = [0, width];
   const stringifiedDomain = domain.map(formatDomainValue);
-  const ordinalScale = d3.scale.ordinal()
+  const ordinalScale = d3.scaleBand()
     .domain(stringifiedDomain)
-    .rangeRoundBands(range, 0, 0);
-  const quantizedScale = d3.scale.quantize<DomainValue>()
+    .rangeRound(range);
+
+  const quantizedScale = d3.scaleQuantize<DomainValue>()
     .domain(range)
     .range(domain);
 
   return {
     calculate: (value: DomainValue) => ordinalScale(formatDomainValue(value)),
     domain: () => domain,
     invert: (x: number) => quantizedScale(x),
-    rangeBand: () => ordinalScale.rangeBand()
+    rangeBand: () => ordinalScale.bandwidth()
   };
 }
 

src/client/visualizations/heat-map/utils/scales.ts

@@ -15,14 +15,14 @@
  */
 
 import { scaleLinear } from "@vx/scale";
-import { max, min, scale } from "d3";
+import * as d3 from "d3";
 import { Datum } from "plywood";
 import { ConcreteSeries } from "../../../../common/models/series/concrete-series";
 import { Unary } from "../../../../common/utils/functional/functional";
 import { LinearScale } from "../../../utils/linear-scale/linear-scale";
 import { nestedDataset } from "./nested-dataset";
 
-export type ColorScale = scale.Linear<string, string>;
+export type ColorScale = d3.ScaleLinear<string, string>;
 
 const white = "#fff";
 const orange = "#ff5a00";
@@ -38,7 +38,7 @@ function seriesSelector(series: ConcreteSeries): Unary<Datum, number> {
 }
 
 export default function scales(dataset: Datum[], tileSize: number, series: ConcreteSeries): Scales {
-  const bucketSizeMax = max(dataset, d => nestedDataset(d).length) || 0; // d3.max returns undefined if collection is empty
+  const bucketSizeMax = d3.max(dataset, d => nestedDataset(d).length) || 0; // d3.max returns undefined if collection is empty
   const dataLength = dataset.length;
 
   const width = bucketSizeMax * tileSize;
@@ -56,8 +56,8 @@ export default function scales(dataset: Datum[], tileSize: number, series: Concr
 
   const select = seriesSelector(series);
 
-  const colorMin = min(dataset, d => min(nestedDataset(d), select));
-  const colorMax = max(dataset, d => max(nestedDataset(d), select));
+  const colorMin = d3.min(dataset, d => d3.min(nestedDataset(d), select));
+  const colorMax = d3.max(dataset, d => d3.max(nestedDataset(d), select));
 
   const color = scaleLinear<string, string>({
     range: [white, orange],

src/client/visualizations/line-chart/base-chart/foreground/hover-guide.tsx

@@ -23,7 +23,7 @@ import { ContinuousScale } from "../../utils/continuous-types";
 interface HoverGuideProps {
   hover: Hover;
   stage: Stage;
-  yScale: d3.scale.Linear<number, number>;
+  yScale: d3.ScaleLinear<number, number>;
   xScale: ContinuousScale;
 }
 

src/client/visualizations/line-chart/chart-line/chart-line.tsx

@@ -23,7 +23,7 @@ import { ContinuousRange, ContinuousScale } from "../utils/continuous-types";
 import "./chart-line.scss";
 import { prepareDataPoints } from "./prepare-data-points";
 
-export type Scale = d3.scale.Linear<number, number>;
+export type Scale = d3.ScaleLinear<number, number>;
 
 export interface ChartLineProps {
   xScale: ContinuousScale;
@@ -45,8 +45,8 @@ const stroke = (color: string, dashed: boolean): Pick<React.CSSProperties, "stro
 export const ChartLine: React.SFC<ChartLineProps> = props => {
   const { color, dashed, getX, getY, dataset, showArea, stage, xScale, yScale } = props;
 
-  const area = d3.svg.area().y0(yScale(0));
-  const line = d3.svg.line();
+  const area = d3.area().y0(yScale(0));
+  const line = d3.line();
 
   const points = prepareDataPoints(dataset, getX, getY);
   const scaledPoints = points.map(([x, y]) => [xScale(x), yScale(y)] as [number, number]);

src/client/visualizations/line-chart/utils/x-scale.ts

@@ -36,11 +36,11 @@ export function createContinuousScale(essence: Essence, domainRange: PlywoodRang
   switch (kind) {
     case "number": {
       const domain = [domainRange.start, domainRange.end] as [number, number];
-      return (d3.scale.linear().clamp(true) as unknown as ContinuousScale).domain(domain).range(range);
+      return (d3.scaleLinear().clamp(true) as unknown as ContinuousScale).domain(domain).range(range);
     }
     case "time": {
       const domain = [domainRange.start, domainRange.end] as [Date, Date];
-      return (d3.time.scale().clamp(true) as unknown as ContinuousScale).domain(domain).range(range);
+      return (d3.scaleTime().clamp(true) as unknown as ContinuousScale).domain(domain).range(range);
     }
   }
 }

src/client/visualizations/scatterplot/heatmap.tsx

@@ -15,7 +15,6 @@
  */
 
 import * as d3 from "d3";
-import { scale } from "d3";
 import { Datum } from "plywood";
 import * as React from "react";
 import { ConcreteSeries } from "../../../common/models/series/concrete-series";
@@ -40,14 +39,14 @@ const COLOR_SCALE_START = "#fff";
 const COLOR_SCALE_END = "#90b5d0";
 
 export const Heatmap: React.SFC<HeatmapProps> = ({ xBinCount, yBinCount, xScale, yScale, stage, data, xSeries, ySeries }) => {
-  const xQuantile = d3.scale.quantile<number>().domain(xScale.domain()).range(range(0, xBinCount));
-  const yQuantile = d3.scale.quantile<number>().domain(yScale.domain()).range(range(0, yBinCount));
+  const xQuantile = d3.scaleQuantile<number>().domain(xScale.domain()).range(range(0, xBinCount));
+  const yQuantile = d3.scaleQuantile<number>().domain(yScale.domain()).range(range(0, yBinCount));
 
   const counts = getCounts({ xBinCount, yBinCount, data, xQuantile, xSeries, yQuantile, ySeries });
 
   const countExtent = [0, d3.max(counts, c => d3.max(c))];
 
-  const colorScale = d3.scale.linear<string>().domain(countExtent).range([COLOR_SCALE_START, COLOR_SCALE_END]);
+  const colorScale = d3.scaleLinear<string>().domain(countExtent).range([COLOR_SCALE_START, COLOR_SCALE_END]);
 
   return <React.Fragment>
     <LegendSpot>
@@ -73,8 +72,8 @@ interface GetCounts {
   yBinCount: number;
   xSeries: ConcreteSeries;
   ySeries: ConcreteSeries;
-  xQuantile: scale.Quantile<number>;
-  yQuantile: scale.Quantile<number>;
+  xQuantile: d3.ScaleQuantile<number>;
+  yQuantile: d3.ScaleQuantile<number>;
   data: Datum[];
 }
 

src/client/visualizations/scatterplot/utils/get-plotting-data.ts

@@ -47,8 +47,8 @@ export function preparePlottingData(data: Dataset, essence: Essence, stage: Stag
   const yExtent = getExtent(scatterplotData, ySeries);
 
   const plottingStage = calculatePlottingStage(stage);
-  const yScale = d3.scale.linear().domain(yExtent).nice().range([plottingStage.height, 0]);
-  const xScale = d3.scale.linear().domain(xExtent).nice().range([0, plottingStage.width]);
+  const yScale = d3.scaleLinear().domain(yExtent).nice().range([plottingStage.height, 0]);
+  const xScale = d3.scaleLinear().domain(xExtent).nice().range([0, plottingStage.width]);
 
   const xTicks = xScale.ticks(TICK_COUNT);
   const yTicks = yScale.ticks(TICK_COUNT);

src/common/utils/time/time.mocha.ts

@@ -58,7 +58,7 @@ describe("Time", () => {
     const createScale = (...dates: Date[]) => {
       return {
         ticks: () => dates
-      } as d3.time.Scale<number, number>;
+      } as d3.ScaleTime<number, number>;
     };
 
     it("should hide year when just year is the same in all ticks", () => {

src/common/utils/time/time.ts

@@ -64,7 +64,7 @@ function hasSameDateAndMonth(a: Date, b: Date): boolean {
   return a.getDate() === b.getDate() && a.getMonth() === b.getMonth();
 }
 
-export function scaleTicksFormat(scale: d3.time.Scale<number, number>): string {
+export function scaleTicksFormat(scale: d3.ScaleTime<number, number>): string {
   const ticks = scale.ticks();
   if (ticks.length < 2) return SHORT_FULL_FORMAT;
   const [first, ...rest] = ticks;
@@ -74,7 +74,7 @@ export function scaleTicksFormat(scale: d3.time.Scale<number, number>): string {
   return getShortFormat(sameYear, sameDayAndMonth, sameHour);
 }
 
-export function scaleTicksFormatter(scale: d3.time.Scale<number, number>): Unary<Moment, string> {
+export function scaleTicksFormatter(scale: d3.ScaleTime<number, number>): Unary<Moment, string> {
   return formatterFromDefinition(scaleTicksFormat(scale));
 }