How to use the d3-scale.scaleOrdinal function in d3-scale

.attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", `translate(${margin.left}, ${margin.top})`);

    // Append the areas to the chart.
    areas.forEach(area => {
        svg.append("path")
            .attr("d", area.func(data))
            .attr("class", "graph-line")
            .style("stroke", "none")
            .style("fill", area.name === "quartile" ? "#3C763D": "#FFF475")
            .style("opacity", 0.5);
    });

    // Define a scale and a d3-legend for rendering a legend on the chart.
    const legendScale = scaleOrdinal()
        .domain(["Mean", "Median", "Quartile", "Decile"])
        .range(["#a94442", "#428bca", "#3C763D", "#FFF475"]);

    const legend = legendColor()
        .shape("path", symbol().type(symbolSquare).size(150))
        .shapePadding(10)
        .scale(legendScale);

    // Append the legend to the chart.
    svg.append("g")
        .attr("class", "legendOrdinal")
        .attr("transform", `translate(${width - 60}, 5)`)
        .call(legend);

    svg.append("g")
        .attr("class","legend")

l = l * 100 + '%'
  return `hsl(${h}, ${s}, ${l})`
}

const lightnessFactor = {
  'entity': 1,
  'address': 0.83
}
const defaultColor = {
  'entity': hsl2rgb(178, 0, 0.95),
  'address': hsl2rgb(178, 0, 0.90)
}

const transactionsPixelRange = [1, 7]

const colorScale = scaleOrdinal(schemeSet3)

const maxNumSnapshots = 4

export default class NodeGraph extends Component {
  constructor (dispatcher, labelType, currency, txLabelType) {
    super()
    this.currency = currency
    this.dispatcher = dispatcher
    this.labelType = labelType
    this.txLabelType = txLabelType
    // nodes of the graph
    this.entityNodes = map()
    this.addressNodes = map()
    // ids of addresses/entities present in graph
    this.references = {address: map(), entity: map()}
    this.adding = set()

// .append('a')
    // .attr('href', '#')
    // .attr('class', 'list-group-item active')
    // .text('Shortest Path List');

    this.svg = select('#graphDiv')
      .append('svg')
      .attr('width', this.width)
      .attr('height', this.height)
      .attr('id', 'graph')
      // .style('margin-top', 195)
      .append('g')
      .attr('id', 'genealogyTree')
      .attr('transform', 'translate(' + this.margin.left + ',' + (Config.glyphSize + this.margin.top) + ')');

    this.color = scaleOrdinal(schemeCategory20);

    //Create Defs
    const svgDefs = this.svg.append('defs');

    //Gradient used to fade out the stubs of hidden edges
    const radGrad = svgDefs.append('radialGradient')
      .attr('id', 'radialGrad')
      .attr('cx', '50%')
      .attr('cy', '50%')
      .attr('r', '50%');

    radGrad.append('stop')
      .attr('stop-opacity', '0')
      .attr('stop-color', 'white')
      .attr('offset', '25%');

import React, { Component } from 'react';
import { RadialBarChart, RadialBar, Cell, Legend, Tooltip, ResponsiveContainer,
  LabelList, PolarAngleAxis } from 'recharts';
import { changeNumberOfData } from './utils';
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';

const colors = scaleOrdinal(schemeCategory10).range();

const data = [
  { name: '18-24', uv: 60, amt: 31.47, pv: 2400,  fill: '#8884d8' },
  { name: '25-29', uv: 50, amt: 26.69, pv: 4500, fill: '#83a6ed' },
  { name: '30-34', uv: 30, amt: 15.69, pv: -1398, fill: '#8dd1e1' },
  { name: '35-39', uv: 59, amt: 8.22, pv: 2800, fill: '#82ca9d' },
  { name: '40-49', uv: 48, amt: 8.63, pv: 1908, fill: '#a4de6c' },
  { name: '50+', uv: 62, amt: 2.63, pv: -2800, fill: '#d0ed57' },
  { name: 'unknown', uv: 38, amt: 6.67, pv: 4800, fill: '#ffc658' },
];

const initialState = { data };

export default class Demo extends Component {

  static displayName = 'RadialBarChartDemo';

private initSvg() {
      this.svg = d3.select('div.stacked-bar').select('svg');

        this.width = +this.svg.attr('width') - this.margin.left - this.margin.right;
        this.height = +this.svg.attr('height') - this.margin.top - this.margin.bottom;
        this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.x = d3Scale.scaleBand()
            .rangeRound([0, this.width])
            .paddingInner(0.05)
            .align(0.1);
        this.y = d3Scale.scaleLinear()
            .rangeRound([this.height, 0]);
        this.z = d3Scale.scaleOrdinal()
            .range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00']);
    }

import React from 'react'
import { hierarchy } from 'd3-hierarchy'
import { Group } from '@vx/group'
import { ParentSize } from '@vx/responsive'
import { arc as d3arc } from 'd3-shape'
import { scaleLinear, scaleSqrt, scaleOrdinal } from 'd3-scale'
import { interpolate as d3interpolate } from 'd3-interpolate'
import { Spring, animated } from 'react-spring'
import Partition from './Partition'
import data from './data'
import './styles.css'

var color = scaleOrdinal().range([
  '#FE938C',
  '#E6B89C',
  '#EAD2AC',
  '#9CAFB7',
  '#4281A4',
])

class Example extends React.Component {
  constructor(props) {
    super()
    this.state = {
      xDomain: [0, 1],
      xRange: [0, 2 * Math.PI],
      yDomain: [0, 1],
      yRange: [0, props.width / 2],
    }

case ScaleType.SQRT:
      return scaleSqrt<output>();
    case ScaleType.SYMLOG:
      return undefined;
    case ScaleType.TIME:
      return scaleTime<output>();
    case ScaleType.UTC:
      return scaleUtc<output>();
    case ScaleType.QUANTILE:
      return scaleQuantile<output>();
    case ScaleType.QUANTIZE:
      return scaleQuantize<output>();
    case ScaleType.THRESHOLD:
      return scaleThreshold();
    case ScaleType.BIN_ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.POINT:
      return scalePoint&lt;{ toString(): string }&gt;();
    case ScaleType.BAND:
      return scaleBand&lt;{ toString(): string }&gt;();
    default:
      return undefined;
  }
}
</output></output></output></output></output>

"NOT_APPLICABLE",
            "MEH",
            "PHYSICAL"
        ]
    }
];

const variableScaleMap = _.reduce(
    variableColorList,
    (acc, colorSet) => {
        _.each(colorSet.keys, k => acc[k] = colorSet.color);
        return acc;
    },
    {});

export const randomColorScale = scaleOrdinal(schemeCategory20c);


export const variableScale = (x = "") => {
    const key = x.toUpperCase();
    const foundColor = variableScaleMap[key];
    return foundColor || rgb(randomColorScale(x));
};


export function useBlackAsForeground(r, g, b) {
    if (_.isString(r)) {
        const c = rgb(r);
        r = c.r;
        g = c.g;
        b = c.b;
    }

domain: string[],
  colors: string[]
): Scale => {
  let scaleRange = []

  if (domain.length <= colors.length) {
    scaleRange = colors.slice(0, domain.length)
  } else {
    const interpolator = interpolateRgbBasis(colors)

    scaleRange = range(domain.length).map(k =>
      interpolator(k / (domain.length - 1))
    )
  }

  const scale = scaleOrdinal()
    .domain(domain)
    .range(scaleRange)

  return scale
}