NoRedInk / elm-plot-rouge / 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 : Basics.Int
, tileWidth : Basics.Float
, tileHeight : Basics.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 (Svg.Attribute msg)
, index : Basics.Int 
}

view : Map msg -> Svg msg

View a map!

Helpers

tileWidth : Basics.Int -> Basics.Int -> Basics.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 : Basics.Int -> Basics.Int -> Basics.Int -> Basics.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 : Basics.Float -> Basics.Int -> Basics.Int -> Basics.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 : Basics.Float -> Basics.Int -> Basics.Int -> Basics.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 -> Basics.Float) -> List a -> Basics.Float -> Basics.Float

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