How to use the d3-contour.contourDensity function in d3-contour

To help you get started, we’ve selected a few d3-contour examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github colinmegill / react-d3-course / src / components / lessons / 06-hexbin.js View on Github external
}, (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})

    });
github hpcc-systems / Visualization / packages / chart / src / Contour.ts View on Github external
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")
github ethantran / react-native-examples / src / components / AnimatedSvgD3ContourDensity.js View on Github external
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);
}
github nteract / semiotic / src / components / svg / areaDrawing.tsx View on Github external
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
github uber / react-vis / src / plot / series / contour-series.js View on Github external
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 (
github poloclub / ganlab / demo / ganlab.ts View on Github external
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 = [

d3-contour

Compute contour polygons using marching squares.

ISC
Latest version published 2 years ago

Package Health Score

74 / 100
Full package analysis