d3-scale#scaleOrdinal JavaScript Examples

The following examples show how to use d3-scale#scaleOrdinal. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: color-utils.js    From ThreatMapper with Apache License 2.0 6 votes vote down vote up 
networkColorScale = scaleOrdinal(schemeCategory10)
Example #2
Source File: MapLegend.js    From covid19india-react with MIT License 4 votes vote down vote up 
function legend({
  svg,
  color,
  title,
  tickSize = 6,
  width = 320,
  height = 44 + tickSize,
  marginTop = 18,
  marginRight = 0,
  marginBottom = 16 + tickSize,
  marginLeft = 0,
  ticks = width / 64,
  tickFormat,
  tickValues,
  ordinalWeights,
} = {}) {
  const t = svg.transition().duration(D3_TRANSITION_DURATION);

  let tickAdjust = (g) => {
    const ticks = g.selectAll('.tick line');
    ticks.attr('y1', marginTop + marginBottom - height);
    // select(ticks.nodes()[ticks.size() - 1]).remove();
  };
  let x;

  // Continuous
  if (color.interpolate) {
    const n = Math.min(color.domain().length, color.range().length);

    x = color
      .copy()
      .rangeRound(quantize(interpolate(marginLeft, width - marginRight), n));

    svg
      .select('.ramp')
      .attr('x', marginLeft)
      .attr('y', marginTop)
      .attr('width', width - marginLeft - marginRight)
      .attr('height', height - marginTop - marginBottom)
      .attr(
        'xlink:href',
        ramp(color.copy().domain(quantize(interpolate(0, 1), n))).toDataURL()
      );
  }

  // Sequential
  else if (color.interpolator) {
    svg
      .select('.bars')
      .selectAll('rect')
      .transition(t)
      .attr('opacity', 0)
      .remove();

    x = Object.assign(
      color
        .copy()
        .interpolator(interpolateRound(marginLeft, width - marginRight)),
      {
        range() {
          return [marginLeft, width - marginRight];
        },
      }
    );

    svg
      .select('.ramp')
      .attr('x', marginLeft)
      .attr('y', marginTop)
      .attr('width', width - marginLeft - marginRight)
      .attr('height', height - marginTop - marginBottom)
      .attr('xlink:href', ramp(color.interpolator()).toDataURL())
      .attr('display', 'visible')
      .transition(t)
      .attr('opacity', 1);

    // scaleSequentialQuantile doesn’t implement ticks or tickFormat.
    if (!x.ticks) {
      if (tickValues === undefined) {
        const n = Math.round(ticks + 1);
        tickValues = range(n).map((i) => quantile(color.domain(), i / (n - 1)));
      }
      if (typeof tickFormat !== 'function') {
        tickFormat = format(tickFormat === undefined ? ',f' : tickFormat);
      }
    }
  }

  // Threshold
  else if (color.invertExtent) {
    const thresholds = color.thresholds
      ? color.thresholds() // scaleQuantize
      : color.quantiles
      ? color.quantiles() // scaleQuantile
      : color.domain(); // scaleThreshold

    const thresholdFormat =
      tickFormat === undefined
        ? (d) => d
        : typeof tickFormat === 'string'
        ? format(tickFormat)
        : tickFormat;

    x = scaleLinear()
      .domain([-1, color.range().length - 1])
      .rangeRound([marginLeft, width - marginRight]);

    svg
      .append('g')
      .selectAll('rect')
      .data(color.range())
      .join('rect')
      .attr('x', (d, i) => x(i - 1))
      .attr('y', marginTop)
      .attr('width', (d, i) => x(i) - x(i - 1))
      .attr('height', height - marginTop - marginBottom)
      .attr('fill', (d) => d);

    tickValues = range(-1, thresholds.length);
    tickFormat = (i) => {
      if (i === -1) return thresholdFormat(1);
      else if (i === thresholds.length - 1) return;
      else if (i === thresholds.length - 2)
        return thresholdFormat(thresholds[i] + '+', i);
      return thresholdFormat(thresholds[i], i);
    };
  }

  // Ordinal
  else {
    svg
      .select('.ramp')
      .transition(t)
      .attr('opacity', 0)
      .attr('xlink:href', null);
    if (!ordinalWeights) {
      x = scaleBand()
        .domain(color.domain().filter((d) => d))
        .rangeRound([marginLeft, width - marginRight]);
      svg
        .select('.bars')
        .selectAll('rect')
        .data(color.domain().filter((d) => d))
        .join('rect')
        .attr('x', x)
        .attr('y', marginTop)
        .attr('width', Math.max(0, x.bandwidth() - 1))
        .attr('height', height - marginTop - marginBottom)
        .attr('fill', color);
    } else {
      const widthScale = scaleLinear()
        .domain([0, ordinalWeights.reduce((a, b) => a + b)])
        .rangeRound([0, width - marginLeft - marginRight]);

      const xPos = ordinalWeights.map((w, i) =>
        ordinalWeights
          .slice(0, i)
          .reduce((acc, w) => acc + widthScale(w), marginLeft)
      );

      x = scaleOrdinal().domain(color.domain()).range(xPos);

      svg
        .select('.bars')
        .selectAll('rect')
        .data(color.domain())
        .join((enter) =>
          enter
            .append('rect')
            .attr('x', x)
            .attr('width', (d, i) => widthScale(ordinalWeights[i]))
        )
        .attr('y', marginTop)
        .attr('height', height - marginTop - marginBottom)
        .attr('fill', color)
        .transition(t)
        .attr('x', x)
        .attr('width', (d, i) => widthScale(ordinalWeights[i]))
        .attr('opacity', 1);
    }

    tickAdjust = () => {};
  }

  svg
    .select('.axis')
    .attr('transform', `translate(0,${height - marginBottom})`)
    .transition(t)
    .attr('class', 'axis')
    .call(
      axisBottom(x)
        .ticks(ticks, typeof tickFormat === 'string' ? tickFormat : undefined)
        .tickFormat(typeof tickFormat === 'function' ? tickFormat : undefined)
        .tickSize(tickSize)
        .tickValues(tickValues)
    )
    .on('start', () => {
      svg.call(tickAdjust).call((svg) => svg.select('.domain').remove());
    })
    .call((g) =>
      g
        .select('.axistext')
        .attr('class', 'axistext')
        .attr('x', marginLeft)
        .attr('y', marginTop + marginBottom - height - 6)
        .attr('fill', 'currentColor')
        .attr('text-anchor', 'start')
        .attr('font-weight', 'bold')
        .text(title)
    );

  return svg.node();
}
Example #3
Source File: constants.js    From covid19india-react with MIT License 4 votes vote down vote up 
STATISTIC_CONFIGS = {
  confirmed: {
    displayName: 'confirmed',
    color: '#ff073a',
    format: 'long',
    showDelta: true,
    hasPrimary: true,
  },
  active: {
    displayName: 'active',
    color: '#007bff',
    format: 'long',
    hasPrimary: true,
  },
  recovered: {
    displayName: 'recovered',
    color: '#28a745',
    format: 'long',
    showDelta: true,
    hasPrimary: true,
  },
  deceased: {
    displayName: 'deceased',
    color: '#6c757d',
    format: 'long',
    showDelta: true,
    hasPrimary: true,
  },
  other: {
    displayName: 'other',
    format: 'long',
    color: '#fd7e14',
    showDelta: true,
    tableConfig: {
      notes: 'Migrated cases or non-COVID deaths',
    },
    hasPrimary: true,
  },
  tested: {
    displayName: 'tested',
    color: '#4b1eaa',
    format: 'short',
    showDelta: true,
    hideZero: true,
    category: 'tested',
  },
  vaccinated1: {
    displayName: 'vaccinated (at least one dose)',
    color: '#fb5581',
    format: 'short',
    showDelta: true,
    hideZero: true,
    category: 'vaccinated',
  },
  vaccinated2: {
    displayName: 'fully vaccinated',
    color: '#fb5581',
    format: 'short',
    showDelta: true,
    hideZero: true,
    category: 'vaccinated',
  },
  vaccinated: {
    displayName: 'vaccine doses administered',
    color: '#fb5581',
    format: 'short',
    showDelta: true,
    hideZero: true,
    category: 'vaccinated',
  },
  tpr: {
    displayName: 'test positivity ratio',
    format: '%',
    color: '#fd7e14',
    nonLinear: true,
    onlyDelta7: true,
    hideZero: true,
    category: 'tested',
    tableConfig: {
      notes: 'Calculated over last 7 days',
    },
    hasPrimary: true,
  },
  cfr: {
    displayName: 'case fatality ratio',
    format: '%',
    color: '#fd7e14',
    nonLinear: true,
    hasPrimary: true,
  },
  recoveryRatio: {
    displayName: 'recovery ratio',
    format: '%',
    nonLinear: true,
    tableConfig: {
      hide: true,
    },
    hasPrimary: true,
  },
  activeRatio: {
    displayName: 'active ratio',
    format: '%',
    nonLinear: true,
    tableConfig: {
      hide: true,
    },
    hasPrimary: true,
  },
  caseGrowth: {
    displayName: 'Case Growth',
    format: '%',
    nonLinear: true,
    canBeInfinite: true,
    tableConfig: {
      notes:
        'Percentage growth of cases last week compared to the week a fortnight ago',
    },
    hasPrimary: true,
    mapConfig: {
      transformFn: (val) => {
        if (val <= 0) return '≤ 0%';
        else if (val <= 20) return '0 - 20%';
        else if (val <= 50) return '20 - 50%';
        else if (val > 50) return '> 50%';
      },
      colorScale: scaleOrdinal(
        ['≤ 0%', '0 - 20%', '20 - 50%', '> 50%'],
        ['#1a9850', '#fee08b', '#fc8d59', '#d73027']
      ),
    },
  },
  population: {
    displayName: 'population',
    format: 'short',
    color: '#b6854d',
    hideZero: true,
    mapConfig: {
      spike: true,
    },
  },
}