How to use the d3-array.extent function in d3-array

To help you get started, we’ve selected a few d3-array 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 hashicorp / consul / ui / packages / consul-ui / app / components / topology-metrics / series / index.js View on Github external
let stackData = st(series);

    // Sum all of the values for each point to get max range. Technically
    // stackData contains this but I didn't find reliable documentation on
    // whether we can rely on the highest stacked area to always be first/last
    // in array etc. so this is simpler.
    let summed = series.map(d => {
      let sum = 0;
      keys.forEach(l => {
        sum = sum + d[l];
      });
      return sum;
    });

    let x = scaleTime()
      .domain(extent(series, d => d.time))
      .range([0, w]);

    let y = scaleLinear()
      .domain([0, max(summed)])
      .range([h, 0]);

    let a = area()
      .x(d => x(d.data.time))
      .y1(d => y(d[0]))
      .y0(d => y(d[1]));

    // Use the grey/red we prefer by default but have more colors available in
    // case user adds extra series with a custom provider.
    let colorScheme = ['#DCE0E6', '#C73445'].concat(schemeTableau10);
    let color = scaleOrdinal(colorScheme).domain(keys);
github vasturiano / horizon-timeseries-chart / src / horizonChart.js View on Github external
update(state) {
    const valAccessor = accessorFn(state.val);
    const yExtentAccessor = accessorFn(state.yExtent);
    const yScaleExpAccessor = accessorFn(state.yScaleExp);
    const positiveColorsAccessor = accessorFn(state.positiveColors);
    const negativeColorsAccessor = accessorFn(state.negativeColors);
    const positiveColorStopsAccessor = accessorFn(state.positiveColorStops);
    const negativeColorStopsAccessor = accessorFn(state.negativeColorStops);

    // memoize to prevent calling timeAccessor multiple times
    const tsMemo = memo(accessorFn(state.ts));

    const times = state.data.map(tsMemo);
    const timeScale = (state.useUtc ? d3ScaleUtc : d3ScaleTime)()
      .domain(d3Extent(times))
      .range([0, state.width]);

    // const timeAxis = d3AxisBottom(timeScale)
    state.timeAxis
      .scale(timeScale)
      .tickFormat(axisTimeFormatter({ useUtc: state.useUtc, use24h: state.use24h }));

    // set scale extent to 1 if zoom is disabled, to allow default wheel events to bubble
    state.zoom.scaleExtent([1, state.enableZoom ? MAX_ZOOM_SCALE : 1]);

    if (state.enableZoom) {
      state.zoom.translateExtent([[0, 0], [state.width, 0]]);

      // apply zoom
      const zoomTransform = d3ZoomTransform(state.zoom.__baseElem.node());
      const zoomedTimeLength = (timeScale.domain()[1] - timeScale.domain()[0]) / zoomTransform.k;
github broadinstitute / gtex-viz / src / modules / Violin.js View on Github external
_setScales(yDomain, width, height, xPadding){
        if (undefined === yDomain){
            let allV = [];
            this.data.forEach((d) => allV = allV.concat(d.values));
            yDomain = extent(allV);
        }

        this.scale = {
            x: scaleBand()
                .rangeRound([0, width])
                .domain(this.data.map((d) => d.label))
                .padding(xPadding),
            y: scaleLinear()
                .rangeRound([height, 0])
                .domain(yDomain),
            z: scaleLinear() // the violin's width
        };
        return this.scale;
    }
    _drawViolin(entry, dom, scale){
github kmandov / d3-horizon-chart / src / horizon-chart.js View on Github external
.attr('width', width)
            .attr('height', height);

        selection.append('span')
            .attr('class', 'title')
            .text(title);

        selection.append('span')
            .attr('class', 'value');

        var context = canvas.node().getContext('2d');
        //context.imageSmoothingEnabled = false;
        //context.translate(margin.left, margin.top);

        // update the y scale, based on the data extents
        var _extent = extent || d3_extent(data);

        var max = Math.max(-_extent[0], _extent[1]);
        y.domain([0, max]);
        //x = d3.scaleTime().domain[];
        axis = axisTop(x).ticks(5);

        // Draw ----------------------------------------------------------------------------

        context.clearRect(0, 0, width, height);
        //context.translate(0.5, 0.5);

        // the data frame currently being shown:
        var increment = step + spacing,
            startIndex = ~~Math.max(0, -(offsetX / increment)),
            endIndex = ~~Math.min(data.length, startIndex + width / increment);
github BinaryStudioAcademy / bsa-2018-watcher / frontend / src / app / dashboards / 02_multi_series_line_chart / multi-series.component.ts View on Github external
this.width = this.svg.attr('width') - this.margin.left - this.margin.right;
        this.height = this.svg.attr('height') - this.margin.top - this.margin.bottom;

        this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.x = d3Scale.scaleTime().range([0, this.width]);
        this.y = d3Scale.scaleLinear().range([this.height, 0]);
        this.z = d3Scale.scaleOrdinal(d3ScaleChromatic.schemeCategory10);

        this.line = d3Shape.line()
            .curve(d3Shape.curveBasis)
            .x( (d: any) => this.x(d.date) )
            .y( (d: any) => this.y(d.temperature) );

        this.x.domain(d3Array.extent(this.data, (d: Date) => d ));

        this.y.domain([
            d3Array.min(TEMPERATURES, function(c) { return d3Array.min(c.values, function(d) { return d.temperature; }); }),
            d3Array.max(TEMPERATURES, function(c) { return d3Array.max(c.values, function(d) { return d.temperature; }); })
        ]);

        this.z.domain(TEMPERATURES.map(function(c) { return c.id; }));
    }
github nteract / semiotic / src / components / InteractionLayer.tsx View on Github external
) {
          const pointKey = `${xValue},${yValue}`
          if (!voronoiUniqueHash[pointKey]) {
            const voronoiPoint = {
              ...d,
              coincidentPoints: [d],
              voronoiX: xValue,
              voronoiY: yValue
            }
            voronoiDataset.push(voronoiPoint)
            voronoiUniqueHash[pointKey] = voronoiPoint
          } else voronoiUniqueHash[pointKey].coincidentPoints.push(d)
        }
      })

      const voronoiXExtent = d3Extent(voronoiDataset.map(d => d.voronoiX))
      const voronoiYExtent = d3Extent(voronoiDataset.map(d => d.voronoiY))

      const voronoiExtent = [
        [
          Math.min(voronoiXExtent[0], -interactionOverflow.left),
          Math.min(voronoiYExtent[0], -interactionOverflow.top)
        ],
        [
          Math.max(voronoiXExtent[1], size[0] + interactionOverflow.right),
          Math.max(voronoiYExtent[1], size[1] + interactionOverflow.bottom)
        ]
      ]

      const voronoiDiagram = voronoi()
        .extent(voronoiExtent)
        .x((d: VoronoiEntryType) => d.voronoiX)
github influxdata / giraffe / giraffe / src / transforms / heatmap.ts View on Github external
inputTable.getColumn(yColumnKey, 'number'),
    yDomain
  )

  const table = bin2d(
    inputTable,
    xColumnKey,
    yColumnKey,
    resolvedXDomain,
    resolvedYDomain,
    width,
    height,
    binSize
  )

  const countDomain = extent(table.getColumn(COUNT, 'number'))
  const fillScale = getContinuousColorScale(countDomain, colors)

  return {
    type: 'rect',
    inputTable,
    table,
    binDimension: 'xy',
    xDomain: resolvedXDomain,
    yDomain: resolvedYDomain,
    xColumnKey,
    yColumnKey,
    xColumnType: inputTable.getColumnType(xColumnKey),
    yColumnType: 'number',
    scales: {fill: fillScale},
    columnGroupMaps: {},
  }
github jwilber / roughViz / src / Line.js View on Github external
      const extents = this.dataSources.map(key => extent(this.data, d => +d[key]));
      const dataMin = min(extents, d => d[0]);
github rrag / react-stockcharts / docs / lib / charts / BubbleChart.jsx View on Github external
render() {
		const { data: unsortedData, type, width, ratio } = this.props;

		const data = unsortedData.slice().sort((a, b) => a.income - b.income);
		const r = scaleLinear()
			.range([2, 20])
			.domain(extent(data, d => d.population));

		const f = scaleOrdinal(schemeCategory10)
			.domain(set(data.map(d => d.region)));

		const fill = d => f(d.region);
		const radius = d => r(d.population);
		return (
			 d.income}
					xScale={scaleLog()}
					padding={{ left: 20, right: 20 }}
					>