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

build(chartData) {
    const container = d3select('#timeline_svg_container');
    const computedStyles = window.getComputedStyle(container.node());
    leftOffset = container.node().offsetLeft;

    width = parseInt(computedStyles.width, 10) - 50;
    height = parseInt(computedStyles.height, 10);

    x = d3scaleTime().range([0, width]);
    y = d3scaleLinear().range([height, 0]);
    xAxis = d3axisTop().scale(x).ticks(this.tickCounter())
      .tickFormat(customTickFormat);

    // define the way the timeline chart is going to be drawn
    area = d3area()
      .x(d => x(d.date))
      .y0(height)
      .y1(d => y(d.value));
    x.domain(this.props.timelineOverallExtent);
    y.domain([0, d3max(chartData.map(d => d.value))]);

    this.svg = container.append('svg')
      .attr('width', width + 34)
      .attr('height', height);

    this.group = this.svg.append('g')

import React from "react"
import DocumentFrame from "../DocumentFrame"
import { XYFrame } from "semiotic"
import theme from "../theme"
import MarkdownText from "../MarkdownText"
import { scaleLinear } from "d3-scale"
import { points } from "./Scatterplot"

const steps = ["white", theme[3]]

const thresholds = scaleLinear().range(steps)

const colors = {
  "Ex Machina": theme[0],
  "Far from the Madding Crowd": theme[1],
  "The Longest Ride": theme[2]
}

const frameProps = {
  size: [700, 400],
  summaries: [{ coordinates: points }],
  summaryType: "heatmap",
  xAccessor: "theaterCount",
  yAccessor: "rank",
  yExtent: [0],
  xExtent: [0],
  showSummaryPoints: true,

export default function index(scheme) {
  var domain = [],
      length = 0,
      lookup = {},
      interp = scheme ? scaleSequential(scheme) : scaleLinear();

  function scale(_) {
    if (lookup.hasOwnProperty(_)) return interp(lookup[_]);
  }

  scale.domain = function(_) {
    if (!arguments.length) return domain.slice();
    domain = _.slice();
    length = domain.length;
    lookup = {};
    for (var i=0; i

function createScale(yaxis, type, min, max, y0, y1) {
    if (_.isUndefined(min) || _.isUndefined(max)) {
        return null;
    }
    switch (type.toUpperCase()) {
        case Charts_1.ScaleType.Linear:
            return d3_scale_1.scaleLinear()
                .domain([min, max])
                .range([y0, y1])
                .nice();
        case Charts_1.ScaleType.Log:
            var base = yaxis.props.logBase || 10;
            return d3_scale_1.scaleLog()
                .base(base)
                .domain([min, max])
                .range([y0, y1]);
        case Charts_1.ScaleType.Power:
            var power = yaxis.props.powerExponent || 2;
            return d3_scale_1.scalePow()
                .exponent(power)
                .domain([min, max])
                .range([y0, y1]);
    }

export const getScaleLinear = ({ frame, column, range }: ScaleProps) =>
  scaleLinear()
    .domain([0, maxValue(frame, column)])
    .range(range);

const barColors = this.props.isLightTheme ? ['#a2b0cd', '#cad2e2'] : ['#566e9f', '#a2b0cd']
        const series = Object.keys(data[0].yValues)
        const xLabels = data.map(({ xLabel }) => xLabel)
        const yValues = data.map(({ yValues }) => yValues)
        const yHeights = data.map(({ yValues }) => Object.keys(yValues).reduce((acc, k) => acc + yValues[k], 0))

        if (!data.length) {
            return
        }

        const columns = xLabels.length

        const x = scaleBand()
            .domain(xLabels)
            .rangeRound([0, width])
        const y = scaleLinear()
            .domain([0, Math.max(...yHeights)])
            .range([height, 0])
        const z = scaleOrdinal()
            .domain(series)
            .range(barColors)
        const xAxis = axisBottom(x)

        const svg = select(this.svgRef!)
        svg.selectAll('*').remove()

        const barWidth = width / columns - 2

        const barHolder = svg
            .classed(`d3-bar-chart ${this.props.className || ''}`, true)
            .attr('preserveAspectRatio', 'xMinYMin')
            .append('g')

simulation.force("link").links(componentEdges)

          simulation.stop()

          for (let i = 0; i < iterations; ++i) simulation.tick()

          const maxX = max(componentNodes.map(d => d.x))
          const maxY = max(componentNodes.map(d => d.y))
          const minX = min(componentNodes.map(d => d.x))
          const minY = min(componentNodes.map(d => d.y))

          const resetX = scaleLinear()
            .domain([minX, maxX])
            .range([currentX - componentLayoutSize, currentX - 20])
          const resetY = scaleLinear()
            .domain([minY, maxY])
            .range([currentY - componentLayoutSize, currentY - 20])

          componentNodes.forEach(node => {
            node.x = resetX(node.x)
            node.y = resetY(node.y)
          })
        })
      } else if (networkSettings.type === "matrix") {

const root = d3.select(this.$el).select('.bar-chart'),
                  margin = {top: 16, right: 0, bottom: 8, left: 0},
                  padding = 4;

            const svg = root.select('svg'),
                  g = svg.select('g').attr(
                    'transform', `translate(${margin.left},${margin.top})`
                  );
            g.selectAll('*').remove();

            const n = root.node(),
                  width = n.offsetWidth - margin.left - margin.right,
                  height = n.offsetHeight - margin.top - margin.bottom - padding,
                  x = scales.scaleBand().rangeRound([0, width]).padding(0.3),
                  y = scales.scaleLinear().rangeRound([height, 0]);

            const { min, max } = this.graphModel.getMinMax();

            x.domain(this.data.map((d) => d.month));
            y.domain([min, max]);

            svg.attr('width', n.offsetWidth).attr('height', n.offsetHeight);
            g.attr('width', width).attr('height', height);
            const lastMonth = this.data[this.data.length - 1].month;
            g.append('g').selectAll('.bar').data(this.data)
                .enter().append('rect')
                    .attr('x', (d) => x(d.month))
                    .attr('y', (d) => {
                        if (d.total >= 0) {
                            return y(d.total);
                        } else {

getYScale(domain, height): any {
    const scale = scaleLinear()
      .range([height, 0])
      .domain(domain);
    return this.roundDomains ? scale.nice() : scale;
  }

export const ChartProvider: React.FC = (props) => {
  const [innerHeight, setInnerHeight] = React.useState(0)
  const [innerWidth, setInnerWidth] = React.useState(0)
  const ref = React.useRef()
  const internalXScale = d3Scale.scaleBand()
  const internalYScale = d3Scale.scaleLinear()
  const [scaleData, setScaleData] = React.useState>({
    barDataKeys: [],
    lineDataKeys: [],
    circleDataKeys: [],
    areaDataKeys: [],
    xScale: props.xScale || internalXScale,
    yScale: props.yScale || internalYScale,
    userXScale: props.xScale,
    userYScale: props.yScale,
    internalXScale,
    internalYScale,
  })
  const [tooltipData, setTooltipData] = React.useState({
    x: -1,
    y: -1,
    showToolTip: false,