diff --git a/src/Main.elm b/src/Main.elm
index 279c58b8b9cdd6dbea4da147190b26c9205636ea..6d7f961e034590d2d878be55035b236d4b83a7db 100644
--- a/src/Main.elm
+++ b/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" ]
diff --git a/src/Views/BarPlot.elm b/src/Views/BarPlot.elm
index 427098990d8c139db6f464f94a2a3d270890dde2..37f0ac1bd978ae864e66b13ae89a46da38e1df5e 100644
--- a/src/Views/BarPlot.elm
+++ b/src/Views/BarPlot.elm
@@ -1,4 +1,4 @@
-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
diff --git a/src/Views/DataTableView.elm b/src/Views/DataTableView.elm
index 39e494d2bc6caad3d11b91050b901d9800e7356c..44eb9bf19676d3993050501f92ef0c28b496cd26 100644
--- a/src/Views/DataTableView.elm
+++ b/src/Views/DataTableView.elm
@@ -1,4 +1,4 @@
-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
diff --git a/src/Views/ForceDirectedGraph.elm b/src/Views/ForceDirectedGraph.elm
index 28180e7ce17c8c69511ec16f20b431d0a35b3b16..df273b8e7a1e1d4fa904c0c43a6bd5a9cc7c18f1 100644
--- a/src/Views/ForceDirectedGraph.elm
+++ b/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 =
@@ -101,7 +104,7 @@ view global local =
]
, Html.div [ Html.Attributes.class "legend", style "width" "19%" ]
[ Html.div [ style "display" "flex" ]
- [ Html.h3 []
+ [ Html.h3 [ style "margin-top" "0rem", style "margin-bottom" "0rem",style "align-content" "center" ]
[ Html.text "Legende"
]
, if not <| local.highlight == "" then
diff --git a/src/Views/LinePlot.elm b/src/Views/LinePlot.elm
index 2c431e875ff42939f24b52cc3793e4149b5ea6cb..43c279cc07626a8923353ee87c53dfcacc553b8c 100644
--- a/src/Views/LinePlot.elm
+++ b/src/Views/LinePlot.elm
@@ -1,4 +1,4 @@
-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 }
diff --git a/src/Views/MapView.elm b/src/Views/MapView.elm
index c5f823d56dc1afa8248a99075e6c0589859262d2..7237fbcf7de94e2b928fe99cc4fe2ce8c2d0f0a5 100644
--- a/src/Views/MapView.elm
+++ b/src/Views/MapView.elm
@@ -1,4 +1,4 @@
-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