Maak boxplotdatadraw

Kopieer je bestand myboxplotdata.elm naar myboxplotdatadraw.elm.

Voeg  bovenaan in myboxplotdatadraw.elm het volgende toe:

 

import Svg exposing (..)

import Svg.Attributes exposing (..)

 

Vervang in boxplotdatadraw.elm:

 

view model =

  div []

  [ input [onKeyDown KeyDown, onInput Input] []

  , div [] [ text (toString model.outputData) ]

  ]

 

door:

 

view model =

  let

  a  = Array.fromList model.outputData

  kl = withDefault 0 (Array.get 0 a)

  k1 = withDefault 0 (Array.get 1 a)

  k2 = withDefault 0 (Array.get 2 a)

  k3 = withDefault 0 (Array.get 3 a)

  gr = withDefault 0 (Array.get 4 a)

  s = 200/(gr-kl)

  h = 12

  line1 = pointsListToString [kl*s, 100, k1*s, 100]

  box1 = pointsListToString [k1*s, 100-(s*((gr-kl)/h)), k2*s, 100-(s*((gr-kl)/h)), k2*s, 100+(s*((gr-kl)/h)), k1*s, 100+(s*((gr-kl)/h)), k1*s, 100-(s*((gr-kl)/h))]

  box2 = pointsListToString [k2*s, 100-(s*((gr-kl)/h)), k3*s, 100-(s*((gr-kl)/h)), k3*s, 100+(s*((gr-kl)/h)), k2*s, 100+(s*((gr-kl)/h)), k2*s, 100-(s*((gr-kl)/h))]

  line2 = pointsListToString [k3*s, 100, gr*s , 100]

  in

  div []

  [ input [onKeyDown KeyDown, onInput Input] []

  , div [] [ Html.text ("kl: " ++ toString kl) ]

  , div [] [ Html.text ("q1: " ++ toString k1) ]

  , div [] [ Html.text ("q2: " ++ toString k2) ]

  , div [] [ Html.text ("q3: " ++ toString k3) ]

  , div [] [ Html.text ("gr: " ++ toString gr) ]

  , svg [ viewBox "0 0 500 400", width "800px" ]

     [

       polyline [ fill "none", stroke "black", points line1 ] [],

       polyline [ fill "none", stroke "black", points box1 ] [],

       polyline [ fill "none", stroke "black", points box2 ] [],

       polyline [ fill "none", stroke "black", points line2 ] []

     ]

  ]

Uitleg

De gegevens voor de boxplot staan in model. outputData. Deze gegevens worden hier uit gehaald en in de volgende Floats gezet:

Deze Floats worden gebruikt om binnen een svg tag de volgende polylines aan te maken:

 

Zie https://www.w3schools.com/graphics/svg_polyline.asp als je meer over svg en polyline wilt weten.