How to use the d3.extent function in d3

x: d.locationX,
        y: d.locationY,
        r: d.frequency,
        color: d.accuracy,
        datum: d
      };
    });

    // define the inner margins of the chart
    const innerMargin = { top: 10, bottom: 25, left: 10, right: 10 };
    const innerWidth = width - innerMargin.left - innerMargin.right;
    const innerHeight = height - innerMargin.top - innerMargin.bottom;

    // get the range of values from the x and y attributes in the data
    const xDomain = d3.extent(points, d => d.x);
    const yDomain = d3.extent(points, d => d.y);

    // use d3 to create scales based on the dimensions and domains
    const x = d3.scale.linear().domain(xDomain)
      .range([innerMargin.left, innerMargin.left + innerWidth]);

    const y = d3.scale.linear().domain(yDomain)
      .range([innerMargin.top, innerMargin.top + innerHeight]);

    // create radius scale based on data
    const rDomain = d3.extent(points, d => d.r);
    const numCols = xDomain[1];
    const r = d3.scale.linear().domain(rDomain)
      .range([0, (innerWidth / numCols) / 2]);

    // create color scale (colors from http://colorbrewer2.org)
    const color = d3.scale.linear().domain([0.3, 0.45, 0.6])

// This could be inferred from the data if it weren't sparse.
    var xStep = avg_x + 0.1,
        yStep = avg_y + 0.2;
    var svg_heat = d3.select("#heatchart").append("svg")
        .attr("width", width_heat + margin_heat.left + margin_heat.right)
        .attr("height", height_heat + margin_heat.top + margin_heat.bottom)
        .append("g")
        .attr("transform", "translate(" + margin_heat.left + "," + margin_heat.top + ")")
        .style("background-color", "#FFEBEE");


    // Compute the scale domains.
    x.domain(d3.extent(data_plot, function (d, i) {
        return data_plot[i].xaxis;
    }));
    y.domain(d3.extent(data_plot, function (d, i) {
        return data_plot[i].yaxis;
    }));
    z.domain([0, d3.max(data_plot, function (d, i) {
        return data_plot[i].score;
    })]);

    // Extend the x- and y-domain to fit the last bucket.
    // For example, the y-bucket 3200 corresponds to values [3200, 3300].
    x.domain([x.domain()[0], +x.domain()[1] + xStep]);
    y.domain([y.domain()[0], y.domain()[1] + yStep]);

    // Display the tiles for each non-zero bucket.
    // See http://bl.ocks.org/3074470 for an alternative implementation.
    svg_heat.selectAll(".tile")
        .data(data_plot)
        .enter().append("rect")

private drawYAxis() {
        const range = d3.extent(this.internalValues, (d) => d.value);
        const rangeOffset = (range[1] - range[0]) * 0.10;
        this.yScale = d3.scale.linear()
            .domain([range[0] - rangeOffset, range[1] + rangeOffset])
            .range([this.height(), 0]);

        this.yAxisGen = d3.svg.axis()
            .scale(this.yScale)
            .orient('left')
            .ticks(5);

        // draw y axis
        this.graph.append('svg:g')
            .attr('class', 'y axis')
            .call(this.yAxisGen);

        // calculate

var colorScalerFactory = function (colors, data, accessor) {
    // Returns a linear scaler our of an array of color
    if (!Array.isArray(colors)) {
      colors = spectrums[colors];
    }

    var ext = [0, 1];
    if (data !== undefined) {
      ext = d3.extent(data, accessor);
    }

    var points = [];
    var chunkSize = (ext[1] - ext[0]) / colors.length;
    $.each(colors, function (i, c) {
      points.push(i * chunkSize);
    });
    return d3.scale.linear().domain(points).range(colors);
  };
  return {

//console.time('dataLoading');
      allData = sampleData;
      allWiggles = allData.measures.wiggles.sort(regularSorting);

      const positiveStrand = (sampleData.gene.strand === '+');


      const extents = [];
      sampleData.measures.wiggles.forEach(function (wig) {
        const extentX = d3.extent(wig.data);
        extents.push(extentX[0]);
        extents.push(extentX[1]);
      });
      dataExtent = d3.extent(extents);


      //console.timeEnd('dataLoading');

      //console.time('updatevis');
      cleanVis();
      updateVis();
      //console.timeEnd('updatevis');
    });

.append('text')
      .text(function(d) {
        return d;
      })
      .attr('x', function(d, i) {
        return i * gridSize;
      })
      .attr('y', 0)
      .style('text-anchor', 'middle')
      .attr('transform', 'translate(' + gridSize / 2 + ', -6)')
      .attr('class', 'wardLabel mono axis');

    var colorScale = d3.scale
      .quantile()
      .domain(
        d3.extent(contributions, function(d) {
          return d.amount;
        })
      )
      .range(colors);

    var cards = svg.selectAll('.card').data(contributions, function(d) {
      var ward = d.ward.split(' ')[1];
      var coords =
        contributors.indexOf(d.contributorType) +
        ':' +
        (!isNaN(ward) ? ward : 0);
      return coords;
    });

    cards.append('title');

function WordCloud(element, props) {
  const { data, width, height, rotation, sizeRange, colorScheme } = props;

  const chart = d3.select(element);
  chart.classed('superset-legacy-chart-word-cloud', true);
  const size = [width, height];
  const rotationFn = ROTATION[rotation] || ROTATION.flat;

  const scale = d3.scale
    .linear()
    .range(sizeRange)
    .domain(d3.extent(data, d => d.size));

  const layout = cloudLayout()
    .size(size)
    .words(data)
    .padding(5)
    .rotate(rotationFn)
    .font('Helvetica')
    .fontWeight('bold')
    .fontSize(d => scale(d.size));

  const colorFn = CategoricalColorNamespace.getScale(colorScheme);

  function draw(words) {
    chart.selectAll('*').remove();

    const [w, h] = layout.size();

const init = function(data) {
		const { coordinatesMax, coordinatesMin } = dataTransform(data).summary();
		const { x: minX, y: minY, z: minZ } = coordinatesMin;
		const { x: maxX, y: maxY, z: maxZ } = coordinatesMax;
		const { x: dimensionX, y: dimensionY, z: dimensionZ } = dimensions;

		const extent = d3.extent(data.values.map((f) => {
			let vx, vy, vz;
			if ("vx" in f) {
				({ vx, vy, vz } = f);
			} else {
				({ vx, vy, vz } = vectorFunction(f.x, f.y, f.z, f.value));
			}

			let vector = glMatrix.vec3.fromValues(vx, vy, vz);
			return glMatrix.vec3.length(vector);
		}));

		xScale = d3.scaleLinear()
			.domain([minX, maxX])
			.range([0, dimensionX]);

		yScale = d3.scaleLinear()

getExtent(data, getX, getY) {
            return {
                x: d3.extent(data, accessor(getX)),
                y: d3.extent(d3.extent(data, accessor(getY)).concat(0))
            }
        }
    },

that.data.getGeneData(curProject, curGene).then(function (sampleData) {
      //d3.nest().key(function(k){return k.key}).map(a)

      mergedRanges = sampleData.gene.merged_ranges;

      minMaxValues = d3.extent(sampleData.measures.isoforms, function (d: any) {
        return +d.weight;
      });

      const usedIsoforms = d3.nest()
        .key(function (measure: any) {
          return measure.id;
        })
        .map(sampleData.measures.isoforms);


      const allIsoforms = sampleData.gene.isoforms;
      //const allExons = sampleData.gene.exons;


      isoformList = [];
      Object.keys(usedIsoforms).map(function (isokey) {