fitScales

Helper function for creating linear scales that maintain the aspect ratio of x and y domains. The main usecase for this is when creating maps.

<script>
  import { Graphic, Section, Rectangle, fitScales } from '@snlab/florence'
  import { scaleLinear } from 'd3-scale'

  const domains = {
    x: [2.5, 7.5],
    y: [0, 10]
  }

  const regularScales = {
    scaleX: scaleLinear().domain(domains.x),
    scaleY: scaleLinear().domain(domains.y)
  }
  
  const geoScales = fitScales(domains)
</script> 

<Graphic width={400} height={200}>

  <Section 
    x1={0}
    x2={0.5}
    {...regularScales}
    padding={20}
    backgroundColor={'#d3d3d3'}
  >
    <Rectangle x1={2.5} x2={7.5} y1={0} y2={10} fill={'red'} />
  </Section>

  <Section 
    x1={0.5}
    x2={1}
    {...geoScales}
    padding={20}
    backgroundColor={'#d3d3d3'}
  >
    <Rectangle x1={2.5} x2={7.5} y1={0} y2={10} fill={'blue'} />
  </Section>

</Graphic>

Arguments

bounds is an Object with two members x and y, which are both Arrays containing two numbers:

interface Bounds {
  x: [number, number];
  y: [number, number];
}

The x and y members represent the domains of the variables that will be used as x and y dimensions.

Return value

fitScales returns an object containing two other objects that pretend to be scales:

{
  scaleX: { range: Function, copy: Function },
  scaleY: { range: Function, copy: Function }
}

These will be converted into real scales by florence after being passed to scaleX and scaleY.

Examples

You can see this in action here:

• Simple Choropleth
• CP Figure 8a