d3-scale#scaleOrdinal JavaScript Examples

networkColorScale = scaleOrdinal(schemeCategory10)

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();
}

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,
    },
  },
}