DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Kristian Pedersen
Kristian Pedersen

Posted on

#30daysofelm Day 13: Simple line chart

This is day 13 of my 30 day Elm challenge

Code/demo: https://ellie-app.com/bWyj9j52r9ca1

Simple line chart visualizing next binary number with same number of 1 bits

Background

Yesterday's project was about finding the next number with the same number of 1 bits as the current number n.

42 (101010) -> 44 (101100)
43 (101011) -> 45 (101101)
44 (101100) -> 49 (110001)
45 (101101) -> 46 (101110)
...

As you can see, the results jump up and down a bit, and I wanted to visualize it within a given range.

I've seen terezka/line-charts referenced a few times, so I just went with that one.

Today is a lazy day, which can be nice sometimes. Below is the new part of the code, with hardcoded numbers, while the rest is described in yesterday's project:

getNextNumbersFromRange : List Point
getNextNumbersFromRange =
    List.range 0 100
        |> List.map
            (\index ->
                { x = index |> toFloat
                , y =
                    -- This is the part that shows the data
                    getNextNumberWithSame1Bits index
                        |> binaryToInt
                        |> toFloat
                }
            )


type alias Point =
    { x : Float, y : Float }


chart : Html msg
chart =
    LineChart.view2
        .x
        .y
        -- First line
        getNextNumbersFromRange
        -- Second line
        (List.range
            0
            100
            |> List.foldl
                (\val acc ->
                    -- Only add index to the accumulator if the number is divisible by 10
                    if modBy 10 val == 0 then
                        val :: acc

                    else
                        acc
                )
                []
            |> List.map toFloat
            |> List.map
                (\v ->
                    { x = v
                    , y = v
                    }
                )
        )


view : Model -> Html Msg
view model =
    div [] [ chart ]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now