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
Argument | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
bbox | true |
Object |
undefined |
See explanation |
bbox.x | true |
Number[] |
undefined |
See explanation |
bbox.y | true |
Number[] |
undefined |
See explanation |
bbox
is an Object with two members x
and y
, which are both Array
s 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: