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

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

const bbox = {
  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