Projection Offset and Scale

Projection Offset

Code

config

export const offset: ChartConfiguration<'choropleth'> = {
  type: 'choropleth',
  data,
  options: {
    scales: {
      projection: {
        axis: 'x',
        projection: 'albersUsa',
        // offset in pixel
        projectionOffset: [50, 0],
      },
    },
  },
};

data

import states10m from 'us-atlas/states-10m.json';

const nation: Feature = topojson.feature(states10m as any, states10m.objects.nation as any).features[0];
const states: Feature = topojson.feature(states10m as any, states10m.objects.states as any).features;

export const data: ChartConfiguration<'choropleth'>['data'] = {
  labels: states.map((d) => d.properties.name),
  datasets: [
    {
      label: 'States',
      outline: nation,
      data: states.map((d) => ({
        feature: d,
        value: Math.random() * 11,
      })),
    },
  ],
};

Projection Scale

Code

config

export const scale: ChartConfiguration<'choropleth'> = {
  type: 'choropleth',
  data,
  options: {
    scales: {
      projection: {
        axis: 'x',
        projection: 'albersUsa',
        // custom scale factor,
        projectionScale: 1.5,
      },
    },
  },
};

data

import states10m from 'us-atlas/states-10m.json';

const nation: Feature = topojson.feature(states10m as any, states10m.objects.nation as any).features[0];
const states: Feature = topojson.feature(states10m as any, states10m.objects.states as any).features;

export const data: ChartConfiguration<'choropleth'>['data'] = {
  labels: states.map((d) => d.properties.name),
  datasets: [
    {
      label: 'States',
      outline: nation,
      data: states.map((d) => ({
        feature: d,
        value: Math.random() * 11,
      })),
    },
  ],
};