Disclaimer: If you're looking for a plotting library, then please use elm-plot instead, as this library is not made to be user friendly. If you feel like you're missing something in elm-plot, you're welcome to open an issue in the repo and I'll see what I can do to accommodate your needs!
This module contains higher-level SVG plotting elements.
{ view : Maybe (Basics.Float -> Basics.Float -> Svg msg)
, x : Basics.Float
, y : Basics.Float
}
dot : Svg msg -> Basics.Float -> Basics.Float -> Dot msg
An dot with a view which is wrapped in a g
element and positioned with a transform.
clear : Basics.Float -> Basics.Float -> Dot msg
A dot without visual representation.
customDot : (Basics.Float -> Basics.Float -> Svg msg) -> Basics.Float -> Basics.Float -> Dot msg
An dot with a view where you control how it's positioned.
scatter : Svg.Coordinates.Plane -> List (Dot msg) -> Svg msg
Series with no interpolation.
linear : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> List (Dot msg) -> Svg msg
Series with linear interpolation.
monotone : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> List (Dot msg) -> Svg msg
Series with monotone interpolation.
linearArea : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> List (Dot msg) -> Svg msg
Area series with linear interpolation.
monotoneArea : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> List (Dot msg) -> Svg msg
Area series with monotone interpolation.
These elements render a line series if no fill
attribute is added!
areaSeries : Svg msg
areaSeries =
monotone plane [ fill "pink" ] dots
lineSeries : Svg msg
lineSeries =
monotone plane [] dots
{ attributes : List (Svg.Attribute msg)
, y : Basics.Float
}
{ groups : List (List (Bar msg))
, width : Basics.Float
}
grouped : Svg.Coordinates.Plane -> Groups msg -> Svg msg
You can draw a bar chart like this:
group : List Float -> List (Bar msg)
group =
List.map (Bar [ stroke "pink", fill "lightpink" ])
groups : Groups msg
groups =
{ groups = List.map group [ [ 2, 3, 1 ], [ 5, 1, 4 ], [ 1, 5, 3 ] ]
, width = 0.8
}
main : Svg msg
main =
svg
[ width (String.fromFloat plane.x.length)
, height (String.fromFloat plane.y.length)
]
[ grouped plane groups ]
Note on width
: The width takes catersian units, however, should you have
a width in SVG units, you can use Svg.Coordinates.scaleCartesian
to
translate it into cartesian units.
{ bars : List (Bar msg)
, interval : Basics.Float
, intervalBegin : Basics.Float
}
The bars are the class frequencies and the interval is the class interval's upper limit minus lower limit. Right now, you can only have equal class intervals, but I might add unequal support later!
What is going on with all these words?
histogram : Svg.Coordinates.Plane -> Histogram msg -> Svg msg
frequencies : List Float
frequencies =
[ 1, 2, 3, 6, 8, 9, 6, 4, 2, 1 ]
testScores : Histogram msg
testScores =
{ bars = List.map (Bar [ stroke blueStroke, fill blueFill ]) frequencies
, interval = 1
}
main : Svg msg
main =
svg
[ width (String.fromFloat plane.x.length)
, height (String.fromFloat plane.y.length)
]
[ histogram plane testScores ]
line : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Svg msg
Renders a line.
myLine : Svg msg
myLine =
horizontal plane [ stroke "pink" ] x0 y0 x1 y1
fullHorizontal : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> Basics.Float -> Svg msg
Renders a horizontal line with the full length of the range.
myXAxisOrGridLine : Svg msg
myXAxisOrGridLine =
fullHorizontal plane [] yPosition
fullVertical : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> Basics.Float -> Svg msg
Renders a vertical line with the full length of the domain.
myYAxisOrGridLine : Svg msg
myYAxisOrGridLine =
fullVertical plane [] xPosition
horizontal : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Svg msg
Renders a horizontal line.
myLine : Svg msg
myLine =
horizontal plane [ stroke "pink" ] y x0 x1
vertical : Svg.Coordinates.Plane -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Svg msg
Renders a vertical line.
myLine : Svg msg
myLine =
vertical plane [ stroke "pink" ] x y0 y1
ProTip: Passing a negative value as the height/width of a tick renders it mirrored on the other side of the axis!
xTick : Svg.Coordinates.Plane -> Basics.Int -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Svg msg
Renders a single tick for the horizontal axis.
xTicks : Svg.Coordinates.Plane -> Basics.Int -> List (Svg.Attribute msg) -> Basics.Float -> List Basics.Float -> Svg msg
Renders ticks for the horizontal axis.
horizontalTicks : Svg msg
horizontalTicks =
xTicks plane height [ stroke "pink" ] axisYCoordinate tickPositions
yTick : Svg.Coordinates.Plane -> Basics.Int -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Svg msg
Renders a single tick for the vertical axis.
yTicks : Svg.Coordinates.Plane -> Basics.Int -> List (Svg.Attribute msg) -> Basics.Float -> List Basics.Float -> Svg msg
Renders ticks for the vertical axis.
verticalTicks : Svg msg
verticalTicks =
yTicks plane width [ stroke "pink" ] axisXCoordinate tickPositions