src/Main.elm

@@ -176,47 +176,152 @@ viewNav ( global, _ ) =
             [ text "Schengen Visa Statistics" ]
         , div [ Html.Attributes.class "navbar-view-icons" ]
             [ button [ activeClass MapView |> Html.Attributes.class, ViewChange MapView |> onClick ]
-                [ i [ Html.Attributes.class "fa-solid fa-map fa-xl" ] [] ]
+                [ MapView.icon ]
             , button [ activeClass ForceDirectedGraph |> Html.Attributes.class, ViewChange ForceDirectedGraph |> onClick ]
-                [ i [ Html.Attributes.class "fa-solid fa-hexagon-nodes fa-xl" ] [] ]
+                [ ForceDirectedGraphView.icon ]
             , button [ activeClass BarPlot |> Html.Attributes.class, ViewChange BarPlot |> onClick ]
-                [ i [ Html.Attributes.class "fa-solid fa-chart-simple fa-xl" ] [] ]
+                [ BarPlotView.icon ]
             , button [ activeClass LinePlot |> Html.Attributes.class, ViewChange LinePlot |> onClick ]
-                [ i [ Html.Attributes.class "fa-solid fa-chart-line fa-xl" ] [] ]
+                [ LinePlotView.icon ]
             , button [ activeClass DataTable |> Html.Attributes.class, ViewChange DataTable |> onClick ]
-                [ i [ Html.Attributes.class "fa-solid fa-table fa-xl" ] [] ]
+                [ DataTableView.icon ]
             ]
         ]
 
 
+viewHome : Global -> Html Msg
+viewHome global =
+    case global.progress of
+        Loading ->
+            Html.div [ Html.Attributes.style "margin" "auto" ]
+            [ Html.div [ Html.Attributes.class "loader" ] []
+            , Html.div
+                [ Html.Attributes.style "position" "relative"
+                , Html.Attributes.style "left" "1.5rem"
+                , Html.Attributes.style "bottom" "5rem"
+                ]
+                [ Html.text "Loading Data..." ]
+            ]
+
+        Failure msg ->
+            Html.text (msg |> (++) "Error while loading data. ")
+
+        Success ->
+            div []
+                [ Html.h2 []
+                    [ text "Willkommen!" ]
+                , Html.p []
+                    [ text "Herzlich Willkommen zu unserem Projekt im Rahmen des Moduls "
+                    , Html.b [] [ text "Informationsvisualisierung" ]
+                    , text " im Sommersemester 2024 an der Martin-Luther-Universität Halle-Wittenberg!"
+                    ]
+                , Html.p []
+                    [ text "In unserem Projekt geht es um die Aufbereitung und Visualisierung von Statistiken zu "
+                    , Html.b [] [ text "Schengen Visa" ]
+                    , text " für die Jahre 2014-2023."
+                    , Html.br [] []
+                    , text "Im Fokus steht dabei die Analyse der "
+                    , Html.b [] [ text "Visafreundlichkeit" ]
+                    , text " der Länder im Schengenraum, also die "
+                    , Html.b [] [ text "a-priori Chance auf ein Visa" ]
+                    , text " bei Antragstellung in der jeweiligen Auslandsvertretung (Konsulat)."
+                    ]
+                , Html.p []
+                    [ text "Über die Icons in der Navigationsleiste kannst du zwischen den Visualisierungen wechseln." ]
+                , Html.p []
+                    [ text "Das Icon "
+                    , MapView.icon
+                    , text " führt dich zur "
+                    , Html.b [] [ text "Weltkarte" ]
+                    , text " auf welcher du die Visafreundlichkeit der Schengenländer (grün) mittels "
+                    , Html.b [] [ text "Chernoff Gesichtern" ]
+                    , text " vergleichen kannst."
+                    , text " Durch "
+                    , Html.b [] [ text "Klick auf ein Drittland"]
+                    , text " und ggf. anschließende Auswahl eines "
+                    , Html.b [] [ text "Konsulats" ]
+                    , text " kannst du die zur Berechnung der Gesichter verwendeten Daten filtern."
+                    ]
+                , Html.p []
+                    [ text "Mit dem Icon "
+                    , ForceDirectedGraphView.icon
+                    , text " kommst du zur "
+                    , Html.b [] [ text "Force" ]
+                    , text " Visualisierung der Beziehungen zwischen Schengen- und Drittländern."
+                    , text " Auf der Legende kannst du ein "
+                    , Html.b [] [ text "Schengenland selektieren" ]
+                    , text ", sodass die zugehörigen Kanten in der Visualisierung rot markiert werden."
+                    , text " Zusätzlich kann der Force-Graph mittels verschiedener Kräfte berechnet werden, was du durch "
+                    , Html.b [] [ text "Klick der Version-Buttons" ]
+                    , text " auswählen kannst."
+                    , text " Die Größe der Schengenländer-Labels wird in der Visualisierung durch die"
+                    , text " Beliebtheit, bzw. Anzahl erhaltener Visa-Anfragen, bestimmt."
+                    , text " Durch "
+                    , Html.b [] [ text "Auswahl eines Jahres" ]
+                    , text " können die zur Berechnung zugrundegelegten Daten gefiltert werden."
+                    , Html.br [] []
+                    , Html.i [ Html.Attributes.style "font-size" "14px" ]
+                        [ text "Bitte beachte, dass die Berechnung dieser Visualisierung bei unserer Datenmenge einige Zeit dauert." ]
+                    ]
+                , Html.p []
+                    [ text "Mit dem Icon "
+                    , BarPlotView.icon
+                    , text " kommst du zum "
+                    , Html.b [] [ text "BarPlot" ]
+                    , text ", in welchem du die "
+                    , Html.b [] [ text "Anzahl beantragter und bewilligter Visa pro Schengenland" ]
+                    , text " approximativ ablesen kannst."
+                    , text " Das Auswahlfeld ermöglicht dir einen "
+                    , Html.b [] [ text "Wechsel zwischen bewilligt/beantragten Visa" ]
+                    , text " im Diagramm."
+                    , text " Außerdem kannst du eine "
+                    , Html.b [] [ text "obere Grenze der Werte angeben" ]
+                    , text " um ggf. kleinere Balken in den Fokus zu rücken."
+                    ]
+                , Html.p []
+                    [ text "Mit dem Icon "
+                    , LinePlotView.icon
+                    , text " kommst du zum "
+                    , Html.b [] [ text "LinePlot" ]
+                    , text ", in welchem du eine "
+                    , Html.b [] [ text "Zeitreihe der beantragten und bewilligten Visa" ]
+                    , text " bzgl. eines Schengenlandes findest."
+                    , text " Du kannst optional ein "
+                    , Html.b [] [ text "Drittland auswählen" ]
+                    , text " und die Einträge im Datensatz nach diesem filtern."
+                    , text " Durch "
+                    , Html.b [] [ text "Bewegung der Maus über die Grafik" ]
+                    , text " kannst du die exakten Werte für ein konkretes Jahr ablesen."
+                    ]
+                , Html.p []
+                    [ text "Letztlich wechselst du mit dem Icon "
+                    , DataTableView.icon
+                    , text " zur "
+                    , Html.b [] [ text "Datentabelle" ]
+                    , text ", in welcher du den von uns verwendeten Datensatz durchsuchen kannst."
+                    , text " Durch "
+                    , Html.b [] [ text "Eingabe in die Suchleiste" ]
+                    , text " filterst du nach dem Namen des Schengenlandes, Drittlandes oder Konsulats."
+                    , text " Außerdem kannst du den "
+                    , Html.b [] [ text "Index eines Eintrags angeben" ]
+                    , text " zu welchem du springen möchtest."
+                    ]
+                , Html.p []
+                    [ text "Wir wünschen dir viel Spaß beim Ausprobieren und Analysieren!" ]
+                , Html.i [ Html.Attributes.style "font-size" "14px" ]
+                    [ text "Hinweis: In manchen Visualisierungen tauchen Flaggen Icons auf."
+                    , text " Abhängig vom Browser und Betriebssystem werden diese ggf. nicht als Flaggen,"
+                    , text " sondern mit zwei Buchstaben angezeigt."
+                    ]
+                ]
+
+
 viewContent : Model -> Html Msg
 viewContent ( global, local ) =
-    let
-        message =
-            Html.div
-                [ Html.Attributes.style "margin" "auto" ]
-                (case global.progress of
-                    Loading ->
-                        [ Html.div [ Html.Attributes.class "loader" ] []
-                        , Html.div
-                            [ Html.Attributes.style "position" "relative"
-                            , Html.Attributes.style "left" "1.5rem"
-                            , Html.Attributes.style "bottom" "5rem"
-                            ]
-                            [ Html.text "Loading Data..." ]
-                        ]
-
-                    Failure msg ->
-                        [ Html.text (msg |> (++) "Error while loading data. ") ]
-
-                    Success ->
-                        [ Html.text "Data was loaded successfully!" ]
-                )
-    in
     case global.view of
         Home ->
             div [ Html.Attributes.class "content" ]
-                [ message ]
+                [ viewHome global ]
 
         MapView ->
             div [ Html.Attributes.class "content" ]

src/Views/BarPlot.elm

-module Views.BarPlot exposing (view, init, update)
+module Views.BarPlot exposing (view, init, update, icon)
 
 import Config.BarPlotConfig as Local exposing (Model)
 
@@ -20,6 +20,9 @@ import TypedSvg.Types exposing (AnchorAlignment(..), Transform(..))
 
 import Utils exposing (codeToName)
 
+icon : Html Msg
+icon =
+    Html.i [ Html.Attributes.class "fa-solid fa-chart-simple fa-xl" ] []
 
 -- Constants for width and height
 w : Float

src/Views/DataTableView.elm

-module Views.DataTableView exposing (view, update, subscriptions, init)
+module Views.DataTableView exposing (view, update, subscriptions, init, icon)
 
 import Html exposing (Html, div, button, i, input, text, table, thead, tbody, tr, th, td)
 import Html.Attributes
@@ -9,6 +9,10 @@ import Data.DataLoader exposing (Entry)
 import Config.DataTableConfig as Local exposing (Model)
 import Utils exposing (codeToName)
 
+icon : Html Msg
+icon =
+    i [ Html.Attributes.class "fa-solid fa-table fa-xl" ] []
+
 propagate : Local.Msg -> Msg
 propagate msg =
     GotDataTable msg

src/Views/ForceDirectedGraph.elm

@@ -26,6 +26,9 @@ import TypedSvg.Core exposing (Attribute, Svg, text)
 import TypedSvg.Types exposing (AlignmentBaseline(..), AnchorAlignment(..), Paint(..), ShapeRendering(..), TextRendering(..), px)
 import Utils exposing (flag)
 
+icon : Html Msg
+icon =
+    Html.i [ Html.Attributes.class "fa-solid fa-hexagon-nodes fa-xl" ] []
 
 w : Float
 w =

src/Views/LinePlot.elm

-module Views.LinePlot exposing (view, init, update)
+module Views.LinePlot exposing (view, init, update, icon)
 import Model exposing (Global, View(..))
 import Msg exposing (Msg(..))
 import Data.DataLoader exposing (Entry)
@@ -18,6 +18,10 @@ import Axis
 import Config.LinePlotConfig as Local exposing (Model)
 import Utils exposing (codeToName)
 
+icon : Html Msg
+icon =
+    Html.i [ Html.Attributes.class "fa-solid fa-chart-line fa-xl" ] []
+
 init : Model
 init = { pointAnnotation = Nothing , vLineAnnotation = Nothing }
 

src/Views/MapView.elm

-module Views.MapView exposing (view, update, init, subscriptions, getMapData)
+module Views.MapView exposing (view, update, init, subscriptions, getMapData, icon)
 
 import Http
 import Html exposing (Html, div, text, select, option, span)
@@ -30,6 +30,10 @@ import Svg.Events exposing (onMouseOver, onMouseOut, onClick)
 import Zoom
 import Task
 
+icon : Html Msg
+icon =
+    Html.i [ Html.Attributes.class "fa-solid fa-map fa-xl" ] []
+
 w : Float
 w = 1200