How to use the @vx/scale.scaleLinear function in @vx/scale

const stock = appleStock;

  // bounds
  const xMax = width - margin.left - margin.right;
  const yMax = height - margin.top - margin.bottom;

  // accessors
  const xStock = d => new Date(d.date);
  const yStock = d => d.close;

  // scales
  const xStockScale = scaleTime({
    range: [0, xMax],
    domain: extent(stock, xStock),
  });
  const yStockScale = scaleLinear({
    range: [yMax, 0],
    domain: [0, max(stock, yStock)],
    nice: true,
  });

  return (
    <svg width="{width}" height="{height}">
      
      
        
        </svg>

}

  const brushMargin = { top: 0, bottom: 20, left: 50, right: 20 };

  // bounds
  const xMax = Math.max(width - margin.left - margin.right, 0);
  const yMax = Math.max(height * 0.6 - margin.top - margin.bottom, 0);
  const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0);
  const yBrushMax = Math.max(120 - brushMargin.top - brushMargin.bottom, 0);

  // scales
  const xScale = scaleTime({
    range: [0, xMax],
    domain: extent(filteredStock, xStock),
  });
  const yScale = scaleLinear({
    range: [yMax, 0],
    domain: [0, max(filteredStock, yStock) + yMax / 3],
    nice: true,
  });
  const xBrushScale = scaleTime({
    range: [0, xBrushMax],
    domain: extent(stock, xStock),
  });
  const yBrushScale = scaleLinear({
    range: [yBrushMax, 0],
    domain: [0, max(stock, yStock) + yBrushMax / 3],
    nice: true,
  });

  return (
    <div></div>

focusMargin.bottom;

// data
const data = appleStock;

// accessors
const x = d => new Date(d.date);
const y = d => d.close;

// scales
const xScaleContext = scaleTime({
  range: [0, contextWidth],
  domain: extent(data, x),
  clamp: true,
});
const yScaleContext = scaleLinear({
  range: [contextHeight, 0],
  domain: [0, max(data, y)],
  nice: true,
});
const xScaleFocus = scaleTime({
  range: [0, contextWidth],
  domain: extent(data, x),
  clamp: true,
});
const yScaleFocus = scaleLinear({
  range: [focusHeight, 0],
  domain: [0, max(data, y)],
  nice: true,
});

const invertX = ({ x, tx, sx }) => (x - tx) / sx;

const {tooltipData, tooltipTop, tooltipLeft} = this.state

    const x = ([i, j]) => i
    const y = ([i, j]) => j

    // Bounds
    const margin = {
      top: 20,
      bottom: 60,
      left: 80,
      right: 20
    }
    const xMax = width - margin.left - margin.right
    const yMax = height - margin.top - margin.bottom

    const xScale = scaleLinear({
      range: [0, xMax],
      domain: extent(data, x)
    })
    const yScale = scaleLog({
      range: [yMax, 1],
      domain: [min(data, y), max(data, y)],
      base: 10,
      nice: true
    })

    const maxL = 10 ** Math.ceil(Math.log10(max(data, y)))
    const minL = 10 ** Math.floor(Math.log10(min(data, y)))

    const tNum = Math.ceil(Math.log10(maxL - minL)) + 1
    const tValues = Array(tNum).fill().map((_, p) => 10 ** p)

export default withTooltip(props => {
  const { width, height } = props;
  const xMax = width;
  const yMax = height - 80;
  if (width < 10) return null;

  const xScale = scaleLinear({
    domain: [1.3, 2.2],
    range: [0, xMax],
    clamp: true
  });
  const yScale = scaleLinear({
    domain: [0.75, 1.6],
    range: [yMax, 0],
    clamp: true
  });

  return (
    <div>
      <svg height="{height}" width="{width}">
        
        <rect fill="{`url(#pink)`}" rx="{14}" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
         event =&gt; {
            if (tooltipTimeout) clearTimeout(tooltipTimeout);
            props.hideTooltip();
          }}
        &gt;
</svg></div>

{({ width, height }) => {
          const xScale = scaleTime({
            range: [0, width],
            domain: extent(data, x),
          })
          const yMax = max(data, y)
          const yScale = scaleLinear({
            range: [height / 2, 0],
            domain: [0, yMax],
            nice: true,
          })
          const interpolate = data.map(d => Math.random() * yMax)
          return (
            <div style="{{">
              </div>

export function transformYScale (data, transformMatrix, rangeParameters) {
  const dataExtent = getDataExtent(data)
  const yRange = [yMin(rangeParameters), yMax(rangeParameters)]

  const yScale = scaleLinear({
    domain: dataExtent.y,
    range: yRange
  })

  return scaleLinear({
    domain: [
      yScale.invert((yScale(dataExtent.y[0]) - transformMatrix.translateY) / transformMatrix.scaleY),
      yScale.invert((yScale(dataExtent.y[1]) - transformMatrix.translateY) / transformMatrix.scaleY)
    ],
    range: yRange
  })
}

const xScale = scaleBand({
      range: [0, width - 50],
      domain: buckets.map(b => b.closeTime),
      padding: 0.3
    });
    const timeScale = scaleTime({
      range: [0, width - 50],
      domain: [start, end]
    });
    const yScale = scaleLinear({
      range: [height - margin.bottom, 20],
      domain: [minLowPrice - 3, maxHighPrice]
    });

    const volumeHeight = (height - margin.bottom) * 0.25;
    const yVolumeScale = scaleLinear({
      range: [volumeHeight, 0],
      domain: [0, maxVolume]
    });

    return (
      <div>
        <svg height="{height}" width="{width}"> (this.svg = s)}&gt;
          
            <linearGradient id="gradient"></linearGradient>
            <rect fill="url(#gradient)" height="{height}" width="{width}"></rect>
            </svg></div>

import { scaleQuantize, scaleLinear, scaleOrdinal, scaleThreshold } from '@vx/scale';
import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from '@vx/glyph';
import {
  Legend,
  LegendLinear,
  LegendQuantile,
  LegendOrdinal,
  LegendSize,
  LegendThreshold,
  LegendItem,
  LegendLabel,
} from '@vx/legend';

const oneDecimalFormat = format('.1f');

const sizeScale = scaleLinear({
  domain: [0, 10],
  range: [10, 30],
});

const sizeColorScale = scaleLinear({
  domain: [0, 10],
  range: ['#75fcfc', '#3236b8'],
});

const quantileScale = scaleQuantize({
  domain: [0, 0.15],
  range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
});

const linearScale = scaleLinear({
  domain: [0, 10],

range: [0, xMax],
    domain: [0, data.length]
  });
  const yScale = scaleLinear({
    range: [yMax, 0],
    domain: [0, maxBucketSize]
  });
  const colorScale = scaleLinear({
    range: ['#77312f', '#f33d15'],
    domain: [0, colorMax]
  });
  const colorScale2 = scaleLinear({
    range: ['#122549', '#b4fbde'],
    domain: [0, colorMax]
  });
  const opacityScale = scaleLinear({
    range: [0.1, 1],
    domain: [0, colorMax]
  });

  return (
    <svg height="{height}" width="{width}">
      <rect fill="#28272c" rx="{14}" height="{height}" width="{width}" y="{0}" x="{0}"></rect>
      
        </svg>