Svg.Coordinates

This module contains helpers for cartesian/SVG coordinate translation.

Plane

type alias Plane =

{ x : Axis

, y : Axis

}

The properties of your plane.

type alias Axis =

{ marginLower : Float

, marginUpper : Float

, length : Float

, min : Float

, max : Float

}

The axis of the plane.

The margin properties are the upper and lower margins for the axis. So for example, if you want to add margin on top of the plot, increase the marginUpper of the y-Axis.
The length is the length of your SVG axis. (plane.x.length is the width, plane.y.length is the height)
The min and max values is the reach of your plane. (Domain for the y-axis, range for the x-axis)

Plane from data

You may want to produce a plane which fits all your data. For that you need to find the minimum and maximum values withing your data in order to calculate the domain and range.

minimum : List (a -> Float) -> List a -> Float

Helper to extract the minimum value amongst your coordinates.

maximum : List (a -> Float) -> List a -> Float

Helper to extract the maximum value amongst your coordinates.

planeFromPoints : List Point -> Plane
planeFromPoints points =
  { x =
    { marginLower = 10
    , marginUpper = 10
    , length = 300
    , min = minimum .x points
    , max = maximum .x points
    }
  , y =
    { marginLower = 10
    , marginUpper = 10
    , length = 300
    , min = minimum .y points
    , max = maximum .y points
    }
  }

Cartesian to SVG

toSVGX : Plane -> Float -> Float

Translate a SVG x-coordinate to its cartesian x-coordinate.

toSVGY : Plane -> Float -> Float

Translate a SVG y-coordinate to its cartesian y-coordinate.

scaleSVG : Axis -> Float -> Float

For scaling a cartesian value to a SVG value. Note that this will not return a coordinate on the plane, but the scaled value.

SVG to cartesian

toCartesianX : Plane -> Float -> Float

Translate a cartesian x-coordinate to its SVG x-coordinate.

toCartesianY : Plane -> Float -> Float

Translate a cartesian y-coordinate to its SVG y-coordinate.

scaleCartesian : Axis -> Float -> Float

For scaling a SVG value to a cartesian value. Note that this will not return a coordinate on the plane, but the scaled value.

Helpers

place : Plane -> Float -> Float -> Attribute msg

A transform translate(x, y) SVG attribute. Beware that using this and and another transform attribute on the same node, will overwrite the first. If that's the case, just make one yourself:

myTransformAttribute : Svg.Attribute msg
myTransformAttribute =
  transform <|
    "translate("
    ++ String.fromFloat (toSVGX plane x) ++ ","
    ++ String.fromFloat (toSVGY plane y) ++ ") "
    ++ "rotateX(" ++ whatever ++ ")"

placeWithOffset : Plane -> Float -> Float -> Float -> Float -> Attribute msg

Place at coordinate, but you may add a SVG offset. See place above for important notes.

terezka/charts/6.0.0