How to use the d3.max function in d3

// Determine offset to use for translation
        let y_index  = px.h;
        if(px.h === -1) {
            y_index = px.o;
        }
        // Update all of the marks
        this.d3el.selectAll(".stick")
            .style("fill", function(d, i) {
                return (d.y[px.o] > d.y[px.c]) ? down_color : up_color;
            })
            .attr("stroke-width", this.model.get("stroke_width"));
        if(x_scale.model.type === "ordinal") {
            // If we are out of range, we just set the mark in the final
            // bucket's range band. FIXME?
            const x_max = d3.max(this.parent.range("x"));
            this.d3el.selectAll(".stick").attr( "transform", function(d, i) {
                return "translate(" + ((x_scale.scale(that.model.mark_data[i][0]) !== undefined ?
                                        x_scale.scale(that.model.mark_data[i][0]) : x_max) +
                                        x_scale.scale.bandwidth()/2) + "," +
                                      (y_scale.scale(d.y[y_index]) + y_scale.offset) + ")";
            });
        } else {
            this.d3el.selectAll(".stick").attr( "transform", function(d, i) {
                 return "translate(" + (x_scale.scale(that.model.mark_data[i][0]) +
                                     x_scale.offset) + "," +
                                     (y_scale.scale(d.y[y_index]) +
                                     y_scale.offset) + ")";
             });
        }

        // Draw the mark paths

const calc: any = {
			id: null,
			chartTopMargin: null,
			chartLeftMargin: null,
			chartWidth: null,
			chartHeight: null
		};
		calc.id = `ID${Math.floor(Math.random() * 1000000)}`; // id for event handlings
		calc.chartLeftMargin = attrs.marginLeft;
		calc.chartTopMargin = attrs.marginTop;
		calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin;
		calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin;
		attrs.calc = calc;

		// Get maximum node width and height
		calc.nodeMaxWidth = d3.max(attrs.data, (d) => d.width);

		// Calculate max node depth (it's needed for layout heights calculation)
		calc.centerX = calc.chartWidth / 2;

		// ******************* BEHAVIORS . **********************
		this.zoomBehavior = d3.zoom().on("zoom", () => this.zoomed());

		// *************************  DRAWING **************************
		//Add svg

		const svg = patternify(container, {
			tag: 'svg',
			selector: 'svg-chart-container'
		})
			.attr('width', attrs.svgWidth)
			.attr('height', attrs.svgHeight)

xVals[xi] = xi;
            yValKey.push({y: yVals[xi], x: keys[i]});
            xi = xi + 1;
        }
        yValKey.sort((a, b) => b.y - a.y); // array of objects, each object has y, the same as yVals, and x, the category
        yVals.sort((a, b) => b - a); // array of y values, the height of the bars
    } else {
        for (var i = 0; i < keys.length; i++) {
            yVals[i] = node.plotValues[keys[i]];
            xVals[i] = Number(keys[i]);
        }
    }

    var maxY = d3.max(yVals);
    var minX = d3.min(xVals);
    var maxX = d3.max(xVals);

    var width = radius * 1.5;
    var height = radius * 0.75;
    var margin = {
        top: 50 - radius * .75,
        right: (80 - width) / 2,
        bottom: 53,
        left: (80 - width) / 2
    };

    var x = d3.scaleLinear()
        .domain([minX - 0.5, maxX + 0.5])
        .range([0, width]);

    var invx = d3.scaleLinear()
        .range([minX - 0.5, maxX + 0.5])

createBarChart() {
        const {score} = this.props;
        // FIXME: 'varScoresArray' was generated from a copy of the findlay functional scores.
        //  ideally this should be generated/exported by the pipeline to the front-end, so it stays in sync with the source.
        const values = varScoresArray;

        const margin = { top: 0, bottom: 80, left: 65, right: 20 };
        const width = 500 - margin.left - margin.right;
        const height = 150 - margin.top - margin.bottom;

        const max = d3.max(values);
        const min = d3.min(values);
        const x = d3.scale.linear()
            .domain([min, max])
            .range([0, width])
            .clamp(true);

        // Generate a histogram using twenty uniformly-spaced bins.
        const data = d3.layout.histogram()
            .bins(x.ticks(40))
            (values);

        const yMax = d3.max(data, d => d.length);
        // const yMin = d3.min(data, d => d.length);

        const y = d3.scale.linear()
            .domain([0, yMax])

selection.each(function(d) {
      let selection = select(this);
      selection.attr('x', d.x )
        .attr('y', max(scale.y.range()))
        .attr('stroke', 'none')
        .text(d.text)
      that.styleFont(selection);
    })
  }

updateChart() {
    var max = d3.max(this.data, function(d) { return d3.max(d.samples) });
    var min = d3.min(this.data, function(d) { return d3.min(d.samples) });

		var x = d3.scale.linear().domain([0, this.SAMPLE_COUNT]).range([0, this.width]);
    var y = d3.scale.linear().domain([min - 5, max + 5]).range([this.height, 0]);

		var line = d3.svg.line()
			.x(function(d, i) { return x(i); })
			.y(function(d) { return y(d); })

    var xAxis = d3.svg.axis().scale(x).orient("bottom");
    var yAxis = d3.svg.axis().scale(y).orient("left");

    this.svg.select(".x.axis").call(xAxis);
    this.svg.select(".y.axis").call(yAxis);

    var lines = this.svg.select("g.data")

renderGraphData() {
    const historicalData = TransferDataStore.getTransferRates();
    const {height, id, width} = this.props;
    const graph = d3.select(`#${id}`);
    const margin = {bottom: 10, top: 10};

    this.xScale = d3.scale
      .linear()
      .domain([0, historicalData.download.length - 1])
      .range([0, width]);

    this.yScale = d3.scale
      .linear()
      .domain([
        0,
        d3.max(historicalData.download, (dataPoint, index) => Math.max(dataPoint, historicalData.upload[index])),
      ])
      .range([height - margin.top, margin.bottom]);

    const lineFunc = interpolation =>
      d3.svg
        .line()
        .x((dataPoint, index) => this.xScale(index))
        .y(dataPoint => this.yScale(dataPoint))
        .interpolate(interpolation);

    const areaFunc = interpolation =>
      d3.svg
        .area()
        .x((dataPoint, index) => this.xScale(index))
        .y0(height)
        .y1(dataPoint => this.yScale(dataPoint))

public d3GetYAxisWidth() {
        let { yScale, yAxis } = this.d3GetYAxis();
        let tickValues = yScale.ticks(yAxis.ticks()[0]);
        let tickStrings = tickValues.map(yScale.tickFormat());
        return d3.max(tickStrings, (d) => measureTextWidth(d, "Arial", 14)) + 30;
    }

const multiMaxDecimalPlace = function(data) {
		return d3.max(d3.map(data).values().reduce((places, row, i) => {
			places[i] = singleMaxDecimalPlace(row);

			return places;
		}, []));
	};

});
        })
        var minGDP = d3.min(data, function (d) {
            return d3.min(keys, function (key) {
                return parseFloat(d[key]);
            });
        })

        var maxGDP = d3.max(data, (d) => d[_measure[1]]);
        var minGDP = d3.min(data, (d) => d[_measure[1]]);

        var rScale = d3.scaleLinear()
            .domain([minGDP, maxGDP])
            .range([5, 25]);

        var maxx = d3.max(data, (d) => d[_measure[2]]);
        var minx = d3.min(data, (d) => d[_measure[2]]);

        x.rangeRound([0, plotWidth])
            .domain([minx, maxx]);

        var maxy = d3.max(data, (d) => d[_measure[0]]);
        var miny = d3.min(data, (d) => d[_measure[0]]);

        y.rangeRound([plotHeight - 40, 0])
            .domain([miny, maxy]);

        var _localXLabels = data.map(function (d) {
            return d[_dimension[0]];
        });

        _localXGrid = d3.axisBottom()