Data-space and SVG-space
Data-space is the regular cartesian coordinate system, the coordinate system you probably learned about in school. The x axis goes horizontally and the numbers grow larger as we progress to the right. The y axis goes vertically and the numbers grow larger as we progress upwards.
SVG-space is different because here, the y axis numbers grow larger as we progress downwards, and there coordinates are relative to the pixel height and width of the chart, not your data.
Since SVG only understand SVG-space coordinates, when we have data-space coordinates
we need to translate them in order the use them for drawing. For this we need some
info which I calculate for you and is stored in the System
type. With the System
we
can use the translating functions contained in this module.
Furthermore, the System
holds your axis range minimum and maximum, as well as
that off your data range. This can be useful info when moving stuff in Junk
!
Note: Most of the functions in Junk
takes data-space coordinates, so it's
only when you do your own crazy junk in pure SVG that you have to worry about
this module!
Internal.Coordinate.System
The system holds informations about the dimensions of your chart.
This is all the information we need for translating your data coordinates into SVG coordinates.
If you're confused as to what "axis range" and "data range" means,
check out Axis.Range
for an explanation!
{ margin : LineChart.Container.Margin
, size : Size
}
Specifies the size and margins of your chart.
{ width : Basics.Float
, height : Basics.Float
}
The size (px) of your chart.
{ min : Basics.Float
, max : Basics.Float
}
These are minimum and maximum values that make up a range.
{ x : Basics.Float, y : Basics.Float }
toSvg : System -> Point -> Point
Translates a data-space point to a SVG-space point.
toData : System -> Point -> Point
Translates a SVG-space point to a data-space point.
toSvgX : System -> Basics.Float -> Basics.Float
Translate a x-coordinate from data-space to SVG-space.
toSvgY : System -> Basics.Float -> Basics.Float
Translate a y-coordinate from data-space to SVG-space.
toDataX : System -> Basics.Float -> Basics.Float
Translate a x-coordinate from SVG-space to data-space.
toDataY : System -> Basics.Float -> Basics.Float
Translate a y-coordinate from SVG-space to data-space.
Scaling is different from translating in that it does not take a position as it's input, but a distance. Translating a position takes the frame into account, scaling doesn't.
system : System
system =
{ frame = Frame (Margin 10 10 10 10) (Size 100 100)
, x = Range 0 10
, y = Range 0 10
}
data : Point
data =
Point 2 3
dataXinSvg : Float
dataXinSvg =
toSvgX system data.x
-- 30 (margin.left + 2 * 100 / 10)
dataXinSvg : Float
dataXinSvg =
scaleSvgX system data.x
-- 20 (2 * 100 / 10)
scaleSvgX : System -> Basics.Float -> Basics.Float
Scale a x-value from data-space to SVG-space.
scaleSvgY : System -> Basics.Float -> Basics.Float
Scale a y-value from data-space to SVG-space.
scaleDataX : System -> Basics.Float -> Basics.Float
Scale a x-value from SVG-space to data-space.
scaleDataY : System -> Basics.Float -> Basics.Float
Scale a y-value from SVG-space to data-space.