Polar coordinates
<script>
import { Graphic, polar, RectangleLayer } from '@snlab/florence'
</script>
<Graphic width={200} height={200} coordinates={polar()}>
<RectangleLayer
x1={[0, 0.3, 0.7, 0.85]}
x2={[0.3, 0.7, 0.85, 1]}
fill={['#c84669', '#388077', '#92d82b', '#20609b']}
/>
</Graphic>
Arguments
The polar
function takes the following arguments:
Prop | Required | Types | Default | Unit(s) |
---|---|---|---|---|
startAngle | false |
Number |
-Math.PI / 2 |
Radian |
endAngle | false |
Number |
1.5 * Math.PI |
Radian |
Usage
In polar coordinate systems usually encountered in mathematics, the coordinate system begins on the right and turns counterclockwise. In florence
, polar coordinates start at the top of the Section
due to the startAngle
being -0.5 PI
, and turn clockwise because of the nature of coordinate systems on the web (which always go from top to bottom). This makes it easy to create pie charts, which also start from the top and turn clockwise. To make polar coordinates behave like in mathematics, the following settings can be used:
<Section
coordinates={polar({ startAngle: 0, endAngle: 2 * Math.PI })}
flipY
>
Check out the following code and the resulting output, and try switching the transformation from identity to polar:
<script>
import {
Graphic, Rectangle, LineLayer, LabelLayer, cartesian, polar
} from '@snlab/florence'
let transformation = 'identity'
$: coordinates = transformation === 'identity' ? cartesian() : polar()
</script>
<div>
<label for="coordinate-select">Coordinates:</label>
<select name="coordinate-select" bind:value={transformation}>
<option value="identity">Identity</option>
<option value="polar">Polar</option>
</select>
</div>
<Graphic
width={500}
height={500}
{coordinates}
backgroundColor="#b2ffb2"
>
<Rectangle fill="white" opacity={0.4} />
<LineLayer
x={[[0, 0], [0.25, 0.25], [0.5, 0.5], [0.75, 0.75]]}
y={[[0, 1], [0, 1], [0, 1], [0, 1]]}
stroke={["red", "orange", "yellow" , "green"]}
/>
<LabelLayer
x={[0, 0.25, 0.5, 0.75]}
y={[0.5, 0.5, 0.5, 0.5]}
text={[0, 0.25, 0.5, 0.75]}
fontSize={23}
/>
</Graphic>
Polar coordinates can be used either with or without scales. In the examples above, no scales are being used. But combining a polar transformation with scaling works fine too:
...
<Graphic
width={500}
height={500}
{coordinates}
backgroundColor="#b2ffb2"
scaleX={scaleLinear().domain([0, 4])}
scaleY={scaleLinear().domain([0, 4])}
>
<Rectangle fill="white" opacity={0.4} />
<LineLayer
x={[[0, 0], [1, 1], [2, 2], [3, 3]]}
y={[[0, 4], [0, 4], [0, 4], [0, 4]]}
stroke={["red", "orange", "yellow" , "green"]}
/>
<LabelLayer
x={[0, 1, 2, 3]}
y={[2, 2, 2, 2]}
text={[0, 1, 2, 3]}
fontSize={23}
/>
</Graphic>
Reprojection of vertices vs segments
For most marks and layers, only the vertices are reprojected to polar coordinates. The exceptions are the Rectangle
and RectangleLayer
, for which the line segments between the vertices are also reprojected. Compare the behavior of a LineLayer
vs a RectangleLayer
in both cartesian and polar coordinates:
<Graphic width={500} height={500} {coordinates} backgroundColor={'#f3f3f3'}>
<RectangleLayer
x1={[0, 0.5]}
x2={[0.25, 0.75]}
y1={[0, 0]}
y2={[1, 1]}
fill={['red', 'blue']}
opacity={0.2}
/>
<LineLayer
x={[[0, 0, 0.25, 0.25, 0], [0.5, 0.5, 0.75, 0.75, 0.5]]}
y={[[0, 1, 1, 0, 0], [0, 1, 1, 0, 0]]}
stroke={['red', 'blue']}
strokeWidth={5}
/>
</Graphic>
In a future version, an option will be added to other marks and layers besides Rectangle
and RectangleLayer
that will allow you to decide if you want to reproject the line segments as well.