terezka/charts/1.0.0

NOTE: the latest version is 20.0.1

Svg.Tiles

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!


View for creating tiled maps like heatmaps or choropleths. Note that this return a SVG element not yet wrapped in the svg tag.

Composing

type alias Map msg =
{ tiles : List (Tile msg)
, tilesPerRow : Int
, tileWidth : Float
, tileHeight : Float
}

(You can use the helpers for calculating most of these properties. You're welcome.)

type alias Tile msg =
{ content : Maybe (Svg msg)
, attributes : List (Attribute msg)
, index : Int
}
view : Map msg -> Svg msg

View a map!

Helpers

tileWidth : Int -> Int -> Int

Pass the width of your map, and the amount of tiles in a row, and it gives you back the width of a single tile.

tileHeight : Int -> Int -> Int -> Int

Pass the height of your map, the amount of tiles in a row, and the total number of tiles, and it gives you back the height of a single tile.

tileXCoord : Float -> Int -> Int -> Float

Pass the tile width, the amount of tiles in a row, and the tile's index and it'll get you it's x-coordinate.

tileYCoord : Float -> Int -> Int -> Float

Pass the tile height, the amount of tiles in a row and the tile's index and it'll get you it's y-coordinate.

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

For heatmaps. It calculates a value's value relative to all values.