Svg.Chart

This module contains higher-level SVG plotting elements.

Series

Dots

type alias Dot msg =

Plane -> Float -> Float -> Svg msg

clear : Plane -> Float -> Float -> Svg msg

A dot without visual representation.

empty : Float -> Int -> Shape -> String -> Dot msg

Make a shape with a white core.

someDot : Svg msg
someDot =
  empty radius width circle "blue" plane x y

disconnected : Float -> Int -> Shape -> String -> Dot msg

Make a shape with a white border.

someDot : Svg msg
someDot =
  disconnected radius width circle "blue" plane x y

aura : Float -> Int -> Float -> Shape -> String -> Dot msg

Make a shape with a little translucent border.

someDot : Svg msg
someDot =
  aura radius width opacity circle "blue" plane x y

full : Float -> Shape -> String -> Dot msg

Make a regular shape.

someDot : Svg msg
someDot =
  full radius circle "blue" plane x y

circle : Shape

triangle : Shape

square : Shape

diamond : Shape

plus : Shape

cross : Shape

Interpolation

scatter :

Plane

-> (data -> Float)

-> Dot msg

-> List data

-> Svg msg

Series with no interpolation.

someScatter : Svg msg
someScatter =
  scatter plane .x .y (full 6 circle "blue") points

linear :

Plane

-> (data -> Float)

-> List (Attribute msg)

-> Dot msg

-> List data

-> Svg msg

Series with linear interpolation.

linearArea :

Plane

-> (data -> Float)

-> List (Attribute msg)

-> Dot msg

-> List data

-> Svg msg

Area series with linear interpolation.

monotone :

Plane

-> (data -> Float)

-> List (Attribute msg)

-> Dot msg

-> List data

-> Svg msg

Series with monotone interpolation.

monotoneArea :

Plane

-> (data -> Float)

-> List (Attribute msg)

-> Dot msg

-> List data

-> Svg msg

Area series with monotone interpolation.

Bars

type alias Bar msg =

{ attributes : List (Attribute msg)

, y : Float

}

Groups

type alias Groups msg =

{ groups : List (List (Bar msg))

, width : Float

}

grouped : 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.

Histograms

type alias Histogram msg =

{ bars : List (Bar msg)

, interval : Float

, intervalBegin : 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 : 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 ]

Straight lines

line :

Plane

-> List (Attribute msg)

-> Float

-> Svg msg

Renders a line.

myLine : Svg msg
myLine =
  horizontal plane [ stroke "pink" ] x0 y0 x1 y1

fullHorizontal : Plane -> List (Attribute msg) -> Float -> Svg msg

Renders a horizontal line with the full length of the range.

myXAxisOrGridLine : Svg msg
myXAxisOrGridLine =
  fullHorizontal plane [] yPosition

fullVertical : Plane -> List (Attribute msg) -> Float -> Svg msg

Renders a vertical line with the full length of the domain.

myYAxisOrGridLine : Svg msg
myYAxisOrGridLine =
  fullVertical plane [] xPosition

horizontal : Plane -> List (Attribute msg) -> Float -> Float -> Float -> Svg msg

Renders a horizontal line.

myLine : Svg msg
myLine =
  horizontal plane [ stroke "pink" ] y x0 x1

vertical : Plane -> List (Attribute msg) -> Float -> Float -> Float -> Svg msg

Renders a vertical line.

myLine : Svg msg
myLine =
  vertical plane [ stroke "pink" ] x y0 y1

Ticks

ProTip: Passing a negative value as the height/width of a tick renders it mirrored on the other side of the axis!

xTick : Plane -> Int -> List (Attribute msg) -> Float -> Float -> Svg msg

Renders a single tick for the horizontal axis.

xTicks : Plane -> Int -> List (Attribute msg) -> Float -> List Float -> Svg msg

Renders ticks for the horizontal axis.

horizontalTicks : Svg msg
horizontalTicks =
  xTicks plane height [ stroke "pink" ] axisYCoordinate tickPositions

yTick : Plane -> Int -> List (Attribute msg) -> Float -> Float -> Svg msg

Renders a single tick for the vertical axis.

yTicks : Plane -> Int -> List (Attribute msg) -> Float -> List Float -> Svg msg

Renders ticks for the vertical axis.

verticalTicks : Svg msg
verticalTicks =
  yTicks plane width [ stroke "pink" ] axisXCoordinate tickPositions

Labels

xLabel : String -> (Float -> String) -> Plane -> Float -> Float -> Svg msg

Renders a label for the horizontal axis.

horizontalLabel : Svg msg
horizontalLabel =
  xLabel "blue" String.fromFloat plane y x

xLabels :

Plane

-> (Plane -> Float -> Float -> Svg msg)

-> Float

-> List Float

-> Svg msg

Renders labels for the horizontal axis.

horizontalLabels : Svg msg
horizontalLabels =
  xLabels plane (xLabel "blue" String.fromFloat) axisYCoordinate tickPositions

yLabel : String -> (Float -> String) -> Plane -> Float -> Float -> Svg msg

Renders a label for the vertical axis.

verticalLabel : Svg msg
verticalLabel =
  yLabel "blue" String.fromFloat plane x y

yLabels :

Plane

-> (Plane -> Float -> Float -> Svg msg)

-> Float

-> List Float

-> Svg msg

Renders labels for the vertical axis.

verticalLabels : Svg msg
verticalLabels =
  yLabels plane (yLabel "blue" String.fromFloat) axisXCoordinate tickPositions

terezka/charts/2.0.0

Svg.Chart

Series

Dots

Interpolation

Bars

Groups

Histograms

Straight lines

Ticks

Labels

Modules