How to use d3-contour - 8 common examples

}, (error, diamonds) => {
      if (error) throw error;

      const x = d3.scaleLog()
        .domain([2e-1, 5e0])
        .rangeRound([this.margin.left, this.width - this.margin.right]);
      const y = d3.scaleLog()
        .domain([3e2, 2e4])
        .rangeRound([this.height - this.margin.bottom, this.margin.top]);


      console.log('got diamonds data', diamonds)
      var contoursParsed = d3contour.contourDensity()
        .x(function(d) { return x(d.carat); })
        .y(function(d) { return y(d.price); })
        .size([this.width, this.height])
        .bandwidth(10)
      (diamonds)

      this.setState({diamonds, contoursParsed})

    });

layerUpdate(host: XYAxis, element, duration: number = 250) {
        super.layerUpdate(host, element, duration);

        this._palette = this._palette.switch(this.paletteID());

        const data = this.flattenData(this.layerColumns(host), this.layerData(host));
        const contourData = d3ContourDensity()
            .x(d => this.xPos(host, d))
            .y(d => this.yPos(host, d))
            .size([this.width(), this.height()])
            .bandwidth(this.contourBandwidth())
            (data)
            ;
        const _vals = contourData.map(d => d.value);
        const minValue = Math.min.apply(this, _vals);
        const maxValue = Math.max.apply(this, _vals);
        this._dataMinWeight = minValue;
        this._dataMaxWeight = maxValue;
        const lines = element.selectAll("path").data(contourData);
        lines.enter().append("path")
            .merge(lines)
            .attr("d", geoPath())
            .attr("fill", d => this.showContourFill() ? this._palette(d.value, minValue, maxValue) : "none")

function createGenerator(props, generator?: ContourDensity): ContourDensity {
    generator = generator || d3.contourDensity();
    return args.reduce((acc: ContourDensity, arg) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}

data.forEach(contourData => {
    let contourProjectedSummaries = contourDensity()
      .size([resolution, resolution])
      .x(d => xScale(d[0]))
      .y(d => yScale(d[1]))
      .thresholds(thresholds)
      .bandwidth(bandwidth)(contourData._xyfCoordinates)

    if (neighborhood) {
      contourProjectedSummaries = [contourProjectedSummaries[0]]
    }

    const max = Math.max(...contourProjectedSummaries.map(d => d.value))

    contourProjectedSummaries.forEach(summary => {
      summary.parentSummary = contourData
      summary.bounds = []
      summary.percent = summary.value / max

if (!data || !innerWidth || !innerHeight) {
      return null;
    }

    if (animation) {
      return (
        
          
        
      );
    }

    const x = this._getAttributeFunctor('x');
    const y = this._getAttributeFunctor('y');

    const contouredData = contourDensity()
      .x(d => x(d))
      .y(d => y(d))
      .size([innerWidth, innerHeight])
      .bandwidth(bandwidth)(data);

    const geo = geoPath();
    const {min, max} = getDomain(contouredData);
    const colorScale = scaleLinear()
      .domain([min, max])
      .range(colorRange || CONTINUOUS_COLOR_RANGE);
    return (

private visualizeTrueDistribution(inputAtlasList: number[]) {
    const color = scaleSequential(interpolateGreens)
      .domain([0, 0.05]);

    const trueDistribution: Array<[number, number]> = [];
    while (trueDistribution.length < NUM_TRUE_SAMPLES_VISUALIZED) {
      const values = inputAtlasList.splice(0, 2);
      trueDistribution.push([values[0], values[1]]);
    }

    const contour = contourDensity()
      .x((d: number[]) => d[0] * this.plotSizePx)
      .y((d: number[]) => (1.0 - d[1]) * this.plotSizePx)
      .size([this.plotSizePx, this.plotSizePx])
      .bandwidth(15)
      .thresholds(5);

    d3.select('#vis-true-samples-contour')
      .selectAll('path')
      .data(contour(trueDistribution))
      .enter()
      .append('path')
      .attr('fill', (d: any) => color(d.value))
      .attr('data-value', (d: any) => d.value)
      .attr('d', geoPath());

    const trueDotsElementList = [

function createGenerator(props, generator?: Contours): Contours {
    generator = generator || d3.contours();
    return args.reduce((acc: Contours, arg) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}

function create(img) {
        return contours()
            .size([m, n])
            .thresholds(thresholds)(values)
            .map(function (contour) {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width = 2048;
                canvas.height = 2048;
                var path = geoPath(null, ctx);
                if (img) {
                    var pattern = ctx.createPattern(img, 'repeat');
                    ctx.fillStyle = pattern;
                }
                else {
                    ctx.fillStyle = '#fff';
                }
                ctx.fillRect(0, 0, canvas.width, canvas.height);