Elm Europe 2017 - Elm Plot: The big picture

Elm Europe 2017 - Elm Plot: The big picture

Ed7e570639e5ea842e1f39ede3ae9a31?s=128

Tereza Sokol

June 09, 2017
Tweet

Transcript

  1. elm-plot: the big picture

  2. None
  3. None
  4. So sassy

  5. type alias PlotConfig data = { height : Int ,

    width : Int , series : List (SeriesConfig data) } type alias SeriesConfig data = { color : String , colorArea : String , toX : data -> List Int , toY : data -> List Int }
  6. None
  7. config : PlotConfig Data config = { height = 300

    , width = 500 , series = seriesConfigs } seriesConfigs : SeriesConfig Data seriesConfigs = [ { color = “pink” , colorArea = “lightpink” , toX = .x , toY = .y } ] main = plot config data
  8. main = plot [ width 800, height 500 ] [

    area [ stroke “pink” , fill “lightpink” ] data , xAxis [ tick myCustomTick ] , yAxis [] ]
  9. type Element msg = Axis (AxisConfig msg) | Area AreaConfig

    | Line LineConfig plot : List PlotAttr -> List (Element msg) -> Svg msg
  10. type alias AreaConfig = { fill : String , stroke

    : String } fill : String -> AreaConfig -> AreaConfig stroke : String -> AreaConfig -> AreaConfig area : List (AreaConfig -> AreaConfig) -> List Point -> Element msg
  11. None
  12. None
  13. main = plot [ dimensions (800, 500) ] [ area

    [ stroke “pink” , fill “lightpink” ] data ] config = { name = “yay plots” , width = 800 , height = 500 , series = seriesConfigs } seriesConfigs = [ { color = “pink” , colorArea = “lightpink” , toX = .x , toY = .y } ] main = plot config data vs.
  14. main = plot [ dimensions (800, 500) ] [ area

    [ stroke “pink” , fill “lightpink” ] data ] config = { name = “yay plots” , width = 800 , height = 500 , series = seriesConfigs } seriesConfigs = [ { color = “pink” , colorArea = “lightpink” , toX = .x , toY = .y } ] main = plot config data vs. ¯\_(ツ)_/¯
  15. compromises, thinking and opinions

  16. compromises, thinking and opinions why would you do this to

    me
  17. None
  18. more features

  19. more features!!!

  20. fill : String -> AreaConfig -> AreaConfig stroke : String

    -> AreaConfig -> AreaConfig strokeWidth : Int-> AreaConfig -> AreaConfig dashed : AreaConfig -> AreaConfig …
  21. fill : String -> AreaConfig -> AreaConfig stroke : String

    -> AreaConfig -> AreaConfig strokeWidth : Int-> AreaConfig -> AreaConfig dashed : AreaConfig -> AreaConfig … nah
  22. main = plot [ areaSerie Bezier [ stroke “pink”, fill

    “lightpink” ] data1 , lineSerie Linear [ stroke “lightskyblue” ] data2 ]
  23. main = [ areaSerie Bezier [ stroke “pink”, fill “lightpink”

    ] data1 , lineSerie Linear [ stroke “lightskyblue” ] data2 , xAxis closestToZero [ axisLine [ stroke “grey” ] , ticks [ stroke skinStroke, length 15 ] (fromDelta 0.5) , ticks [ stroke blueStroke, length 10, strokeWidth “2px” ] (fromDelta 1) , labels [ fill pinkStroke ] toString (fromDelta 1) ] , yAxis lowest [ axisLine [ fill blueStroke, stroke skinStroke ] , ticks [ stroke blueStroke, length 4, strokeWidth “2px” ] (fromDelta 1) , labels [ fill pinkStroke ] toString (fromDelta 1) ] , yAxis closestToZero [ axisLine [ fill blueStroke, stroke skinStroke ] , ticks [ stroke blueStroke, length 4, strokeWidth “2px” ] (fromDelta 1) , labels [ fill pinkStroke ] toString (fromDelta 1) ] , verticalGrid [ stroke skinStroke ] (fromDelta 1) ]
  24. None
  25. designing API’s

  26. what do we need?

  27. what do we really need?

  28. main = [ lineSerie Linear [] data , xAxis atZero

    [] , yAxis atLowest [] , yAxis atZero [] ]
  29. help people make plots

  30. help people make great plots

  31. None
  32. None
  33. None
  34. type alias Series data msg = { axis : Axis

    , interpolation : Interpolation , toDataPoints : data -> List (DataPoint msg) }
  35. dots : (data -> List (DataPoint msg)) -> Series data

    msg line : (data -> List (DataPoint msg)) -> Series data msg area : (data -> List (DataPoint msg)) -> Series data msg custom : Axis -> Interpolation -> (data -> List (DataPoint msg)) -> Series data msg
  36. shipping

  37. shipping with integrity

  38. “the future”

  39. None
  40. None
  41. thanks