Das Logo

Pandemie

Der Vergleich von Sars-CoV-1 und Sars-CoV-2

Epedemien und Pandemien

Bleibt ein Krankheitsausbruch nicht lokal begrenzt und breitet sich über Länder- und Kontinentgrenzen hinweg aus, sprechen Experten entgegen zu einer räumlich begrenzten Epidemie von einer Pandemie. Solche länderübergreifenden, manchmal weltumspannenden Krankheitsausbrüche treten und traten während der Menschheitsgeschichte immer wieder auf. Mitunter rafften pandemische Ausbrüche von Infektionskrankheiten Millionen Menschen dahin und trafen die Welt wie apokalyptische Ereignisse. Die als „Schwarzer Tod“ ins kollektive Gedächtnis eingegangene Pest-Pandemie zwischen 1347 und 1351 etwa löschte rund ein Drittel der damaligen Bevölkerung Europas aus.

Mann mit Sprühflasche in einem gelben Ganzkörperanzug

Vergleich der Geschlechter die sich infiziert haben

Coronavirus Pandemien

Mann im gelben Ganzkörperanzug liest Zeitung

Heutzutage hingegen haben klassische Seuchen wie Pest, Pocken oder Cholera durch Erforschung und medizinischen Fortschritt einen Großteil ihres Schreckens eingebüßt – die Pocken gelten seit Anfang der achtziger Jahre als ausgerottet – und werden von alleine wohl in keinem globalen Maßstab zurückkommen. Demgegenüber stellen Pandemien viraler Infektionskrankheiten wie der Grippe oder zuletzt COVID-19 eine fortwährende Bedrohung der Weltbevölkerung dar.

Das Durchschnittsalter der Infizierten mit Sars-CoV-2 (Covid-19)

Pandemien als existentielles Menschheitsrisiko

Mann im gelben Ganzkörperanzug liest Zeitung

Neben Klimawandel, Naturkatastrophen oder einem nuklearen Schlagabtausch stellt die weltweite Ausbreitung einer tödlichen Krankheit eine existentielle Bedrohung für intelligentes Leben auf der Erde dar. Spätestens seit 2003 die rasche Ausbreitung von SARS die Pandemie-Anfälligkeit einer globalisierten Welt vor Augen geführt hat, drängen WHO und andere gesundheitspolitische Akteure verstärkt zum Auf- und Ausbau von Ressourcen zur Seuchenerkennung und -bekämpfung. Dennoch traf 2009 die Schweingrippe-Pandemie erneut auf weitgehend unvorbereitete Länder.

Ein Impfserum stand nicht rechtzeitig zur Verfügung, um eine weltweite Verbreitung zu verhindern. Obwohl die Zahl laborbestätigter Todesfälle mit rund 18.500 vergleichsweise harmlos ausfiel, zeigt die enge genetische Verwandtschaft des zugrundeliegenden H1N1-Erregers mit dem Virussubtyp der Influenza-Pandemie von 1918/20 mit Abermillionen Todesfällen wie schmal der Grat hin zur globalen Katastrophe ist. Dieser Umstand wird noch unterstrichen durch neu entdeckte Infektionskrankheiten wie dem Ebola-Fieber, dessen jüngsten Epidemie 2014-16 in Westafrika mehr als 11.000 Menschen das Leben kostete – bei Letalitätsraten von z.T. deutlich über 40 Prozent. Allein im Zeitraum von 2011 bis 2018 registrierte die WHO weltweit 1.483 Epidemien in 172 Ländern.

Mann mit Sprühflasche in einem gelben Ganzkörperanzug

Vergleich der Todeszahlen

Konzept

Ziel

Ziel dieser Arbeit ist es eine Website zu erstellen die Statistiken über zwei Pandemien darstellt. Zu Beginn wird darüber informiert, dass es ein ähnliches Virus schonmal gab anschließend werden die beiden SARS-Viren miteinander verglichen. Als Abschluss wird der Leser über die derzeitige Pandemie etwas aufgeklärt. Ich habe mich dazu entschieden Sars-CoV-1 und Sars-CoV-2 zu vergleichen. Hierfür sollen drei verschiedene Inforgrafiken in die Seite eingebaut und mit einer API verknüpft werden um die aktuellen und korrekten Daten/Zahlen wiederzugeben. Es war mir selber wichtig nicht nur die beiden Sars-Viren zu vergleichen, sondern auch über die momentan unser Leben bestimmende Pandemie aufklären.

Idee

Der Grundgedanke bei der Gestaltung der Seite war es diese rein und sauber zu halten, sodass der User nur auf die wichtigsten Informationen fokussiert ist und sich von nichts ablenken lassen kann. Die Diagramme stehen hierbei im Vordergrund. In dem ersten Diagramm vergleiche ich die Infektionszahlen der beiden Viren. Hierbei wird nochmal zwischen männlichen und weiblichen Infizierten unterschieden. Das nächste Diagramm zeigt dazu die unterschiedlichen Altersgruppen an und welche der Gruppen sich am ehesten infiziert hat beziehungsweise für welche das größte Risiko besteht. Um dem Grundgedanken folgen zu können wurde der Text auf der Seite auf das Wichtigste reduziert und der Inhalt nur zur Veranschaulichung mit Bildern geschmückt. Der User soll schnellstmöglich erkennen, dass es sich hier um den Vergleich der beiden Sars-CoV-Viren handelt und, dass diese in den Vergleich gestellt werden. Auf die Idee gekommen bin ich nach langem Überlegen und Recherchieren im Internet.

Bei der Suche nach einer guten Quelle für meine Statistik bin ich durchgegangen welche Krankheiten es im Laufe der Weltgeschichte gab und bin somit auf den Sars-CoV-1 Virus getroffen. Dabei ist mir die Ähnlichkeit zu dem derzeit herrschenden Sars-CoV-2 Virus aufgefallen und somit wurde die Idee geboren. Ich fand es interessant zwei verwandte Krankheiten, die zu unterschiedlichen Zeiten ausgebrochen sind, zu vergleichen. Meine Ursprungsidee war es eine andere Pandemie mit dieser (Covid-19) zu vergleichen allerdings liegen diese schon so weit zurück, dass ich es für keine gute Idee hielt, da die Lebensumstände zu der damaligen Zeit mit den heutigen nicht vergleichbar sind. Zudem gab es keine genaue Datenerfassung. Da der Sars-CoV-1 Virus Anfang des derzeitigen Jahrhunderts entstand erschien mir dieser passender für einen Vergleich, als zum Beispiel die Spanische Grippe.

Diagrammtypen

Im Rahmen der Aufgabenstellung habe ich mich für folgende drei verschiedene Diagrammtypen zum verwenden entschieden. Zum einen ist ein Säulendiagramm auf der Seite zu finden aber auch ein Tortendiagramm / Doughnut sowie ein Liniendiagramm. Das Säulendiagramm stellt simpel und übersichtig präzise Proportionen dar. So werden kleine Unterschiede deutlich voneinander abgehoben. Hiermit wird der Vergleich der Geschlechter am besten dargestellt. Eine Säule ist jeweils einem Geschlecht zugeordnet. An der Höhe der Säulen lässt sich sehr schnell und deutlich herauslesen welche primären Unterschiede es bei den, in diesem Fall Geschlechtern, gibt. Ohne Mühe ist zu erkennen welches der beiden Geschlechter eher mit dem Virus infiziert wird und wie diese in Relation zum gegenüberstehenden Geschlecht steht. Mit dem Kreisdiagramm, Tortendiagramm oder Doughnut genannt, kann man Anteile eines Großen und Ganzen am besten darstellen.

Vergleiche lassen sich ebenfalls sehr gut darstellen. Da hier keine kleinen Unterschiede gemacht werden, verschiedene Altersspannen werden hier als Gruppen zusammengefasst und dargestellt, kann man sehr gut auf einen Blick erkennen welche Altersgruppe es am ehesten trifft. Zudem sind die Altersgruppen durch die Farben sehr gut voneinander visuell abgetrennt. Ein Blick auf die Legende ist ausreichend, um zu erkennen wer in die Risikogruppe gehört. Das letzte Diagramm, sprich das Liniendiagramm, stellt den Verlauf von Covid-19 und Sars-CoV-1 dar. Hier werden die beiden Viren mit den verschiedenen Todeszahlen in einer Spanne von 14 Monaten, gezeigt und verglichen. Die aufgezeigten Monate sind Januar 2020, der Beginn der Ausbreitung von Sars-CoV-2 in Deutschland, bis Februar 2021, dem aktuellen Zeitpunkt der Pandemie an dem wir uns befinden. Das Sars-Cov-1 Virus befindet sich in der Spanne von 2002 bis 2003. Das Auge folgt dem Verlauf der Linie und kann so auf einen Blick alle Informationen ablesen. Jede Linie hat ihre eigene Farbe und ist einer Virusvariante zugeordnet.

Gestaltung und Anordnung

Bei der Gestaltung habe ich mich, wie bereits oben angemerkt, für ein sehr schlicht und simples Design entscheiden. Meine Navigation bietet genug Platz um die wichtigsten Punkte auf der Seite zu präsentieren sowie ein Logo aufzuweisen. Durch die große und schwere Schrift ist es selbst für ältere Leute oder welche mit einer Sehschwäche gut zu lesen. So findet jeder schnell und einfach die Informationen die relevant sind. Um meine Textabschnitte kurz zu halten und dennoch nicht allzu trist und mit viel zu langen Texten versehrt aussehen zu lassen, habe ich diese jeweils auf die linke oder rechte Seite der Webpage platziert und daneben ein Bild.

Die Idee war es dem User zu suggerieren, dass sich hier möglicherweise interessante Textpassagen befinden und diese in kurzer Zeit gelesen werden können. Zudem wird so das optische Gleichgewicht gehalten, denn die Bilder sind jeweils abwechselnd rechts und links platziert mit dem Text daneben. Die Bilder geben dem User auch einen schnellen Überblick worum es sich in dem Text handeln könnte. So kann er schnell entscheiden ob ihn diese Passage interssieren könnte oder nicht. Durch die großen und fetten Überschriften wird das Auge, nach dem Bild, darauf gelenkt. So liest der User automatisch die Überschrift und weiß, worum es geht. Durch das Blau lenken diese auch sehr viel Aufmerksamkeit auf sich und bieten einen Hauch Freundlichkeit.

Farbgestaltung und Schriftauswahl

Bei den Farben habe ich mich hauptsächlich für recht kalte und auffällige Farben entschieden. Ich wollte auch knallige Farben nutzen damit die Seite nicht so trocken und trist aussieht. Mit den bunten Farben spreche ich auch die jüngere Zielgruppe im Kindes- oder Jugendalter an und kann meine Informationen somit auch an die nächste Generation weitergeben. Dadurch, dass alles schlicht gehalten ist, wird aber ebenfalls die Generation im Mittleren und Hohen Alter angesprochen. Die Farben Blau, Gelb, Grün und Rot harmonieren sehr gut miteinander, denn dieses Spektrum ist ebenfalls in dem Farbkreis aufzufinden. Dadurch sind sie grell und auffällig genug um deutliche Unterschiede anzuzeigen aber auch harmonisch und angenehm anzusehen ohne, dass es von dem Inhalt ablenken könnte. Bei dem Blau und Gelb handelt es sich um einen Warm-Kalt-Kontrast. Dieser lenkt noch mehr Aufmerksamkeit auf das gewünschte Objekt. Es gibt somit keine Farbkombination die ablenken oder verwirren könnte. Bei den Diagrammen habe ich mich dazu entschieden den akteuellen Virus Rot und den Sars-CoV-1 Virus in Blau darzustellen.

Da der aktuelle Virus gefährlicher ist und die Farbe Rot unter anderem auch Gefahr suggeriert, habe ich diese dem Covid-19 Virus zugeordnet. Das Blau wirkt schon etwas abgeschwächter und nicht mehr so gefährlich und daher hat der Sars-CoV-1 Virus diesen Farbton bekommen. Eine Ausnahme gibt es beim Doughnut Diagramm. Dort habe ich mich dazu entschieden der ältesten Altergruppe eine sehr dunkle und kräftige Farbe zu verleihen, damit sehr klar und deutlich dargestellt werden kann, dass es sich hier um eine Risikogruppe handelt. Durch den schwarzen Ton wirkt es sehr bedrohlich und bekommt so die meiste Aufmerksamkeit und es wird sofort klar, dass hier aufgepasst werden muss. Die Schrift habe ich ruhig und modern gehalten. Durch ihre fetten Buchstaben werden die Überschriften sehr deutlich hervorgehoben. Dadurch entsteht ein Kontrast zu dem Fließtext, der sehr dünn und rund gehalten wird. Durch die Farbgebung sowie der Strichstärke der Buchstaben in der Überschrift, wird der User direkt darüber informiert in welchem Abschnitt er sich befindet und welche Informationen auf ihn warten.

Animation und Technik

Nachdem ich die Datei heruntergeladen und eingebunden habe, habe ich mir die Dokumentation durchgelesen und mit Hilfe dieser meine gewünschten Diagramme aufgebaut. Zuerst habe ich mir das Säulendiagramm aufgebaut. Ich habe die Anzahl der Säulen (datasets) angepasst, sie benannt (labels) und ihnen eine Farbe (backgroundColor) vergeben. Danach habe ich mit den anderen Diagrammen befasst. Dort bin ich mit der gleichen Methodik vorangegangen wie bei dem Säulendigramm. Meiner Vorstellung nach sollten die Diagramme wie folgt animiert sein: Ich wollte, dass die Diagramme, wenn die Seite geladen wird, entwickelt werden. Also, dass dann die Säulen steigen, der Doghnut sich füllt oder die Linie dann den Pfad an nimmt der ihr zugeordnet wurde.

Hierfür habe ich Chartsjs genutzt. Bei dieser Bibliothek sind die meisten meiner Wünsche schon vom Script vorprogrammiert. Zudem sind alle Diagramme interaktiv. Der User kann hier das gewünschte Feld ein oder ausblenden. So kann er selbst nochmal nach den Informationen filtern die für ihn/sie relevant sind. Dies gelingt ihm durch einen einzelnen Klick auf die Inrmation in der Legende die ausgeblendet werden soll. Damit der user bescheid weiß bei welchem Punkt er sich auf der Seite befindet, habe ich noch ein Script eingebaut, welches dem angeklickten Navigationspunkt die Klasse "active" vergibt. Der Punkt mit dieser Klasse wird dann etwas mehr hervorgehoben und so verliert man nicht die Orientierung auf der Seite.

Optimal eingesetzte Skripte, Bibliotheken und API

Für diese Aufgabe habe ich die Scripte von Chartsjs und Momentjs genutzt. Mit Hilfe von Chartsjs habe ich die Diagramme erstellt. Hierzu habe ich mich auf der Internetseite darüber informiert wie dieses Script funktioniert und wie ich damit das von mir gewünschte Ziel erreiche. Aus den mir gegebenen Informationen auf der Internetseite habe ich mir ein Grundgerüst gebaut. Danach habe ich die gegebenen Informationen an mein Diagramm angepasst, zum Beispiel um welches Diagramm es sich handelt, welche Farben genutzt werden oder wie viele Daten und welche davon dort preisgegeben werden sollen. Nachdem ich meine Diagramme so dargestellt habe wie ich es mir vorgestellt habe, habe ich die von mir ausgesuchte API eingebunden. Dies habe ich mit der Hilfe von fetch gemacht. Hier werden die Informationen von der API ausgelesen und an das Diagramm auf der Website weitergegeben. Dafür habe ich eine Funktion geschrieben die mit "getAPI" aufgerufen und ausgeführt wird. Danach habe ich den Link der API zugeordnet.

Im header gebe ich den Code für die Premiumnutzung an die mir dadurch gestattet ist. In der Variable "res" befindet sich dann der Inhalt der Nachricht die von Postman (die Seite wo ich die API her habe) an mich zurückgeschickt wurde. Im nächsten Schritt überprüft die Funktion ob die Daten richtig übertragen wurden oder nicht. Dann geht's zum nächsten Dialog und dort wird dann zuerst ein leeres Array erzeugt und initialisiert. Die leeren Arrays definieren eine Variable. Dieser Vorgang ist nötig um die "tempData" nutzen zu können. Dann wird jeder Datensatz durchgegangen und die Daten werden zusammengefügt, damit nicht jeder Tag angezeigt wird sondern die Daten für den Monat zusammengefasst werden. Hierfür habe ich die Momentjs genutzt. Es werden also alle Tage des Monats herausgesucht und dann zusammengezählt. Die Daten vom letzten Tag sind dann die Daten die in dem Diagramm angezeigt werden.

Reflektion des Arbeitsprozesses

Mein Arbeitsprozess verlief gut. Ich bin den Arbeitsschritten gefolgt die uns vorgegeben wurden und habe dann auch dementsprechend der Reihenfolge nach gearbeitet. Das Coden der Seite hat, mit Bootstrap, gut geklappt. Die einzige Sache die ich im Nachhinein besser machen wollen würde ist, dass ich mich schon viel eher über die Scripte informiert hätte. Also, dass ich schon während des Erstellen vom Design wo ich das Design erstellt habe, recherchiert hätte was man mit den Scripten alles machen kann und wie ich mir das genau vorstellen kann. Ebenso hätte ich mich über, zum Beispiel die Funktionen mehr informiert. Denn zum Ende hin, als ich zu den Scripten kam habe ich germerkt, dass die Dinge nicht so machbar sind wie ich es mir vorgesetellt habe. Ich habe auf die Hilfe, die mir angeboten wurde, zurückgegriffen und einige Ideen nochmal überdacht, da mir aufgefallen ist, dass ich sonst das Thema verfehlt hätte. Ich denke, beim nächsten Mal werde ich mich eher über die Sachen informieren die ich nicht kenne und nicht kann. Ich war nicht sonderlich gut darin mir die Dinge selbst beizubringen aber zum Glück wusste ich das und konnte so rechtzeitig nach Hilfe suchen. Der Zeitplan war gut und ich konnte mir meine Arbeit angenehm einteilen. Ich hatte das Gefühl selbstständig und unabhängig arbeiten zu können, was mir gut gefällt. Ich habe mir die Arbeit so aufgeteilt, dass ich vom ersten bis zum letzten Tag eine angemessene und entspannte Menge zu tun hatte und ohne Stress und Aufregung rechtzeitig fertig werden konnte. Das Wissen, dass wir mit Scripten arbeiten sollen hat mir auch geholfen, da ich so wusste wofür ich am meisten Zeit investieren muss und was schon schneller und besser funktioniert. Im Großen und Ganzen bin ich mit meinem Arbeitsprozess zufrieden, denn ich habe rechtzeitig angefangen und so eine Menge Stress vermieden.

Quellen

https://pixabay.com/photos/world-map-satellite-image-140304

https://www.pexels.com/de-de/foto/angst-maske-erwachsener-komisch-3951377/

https://pixabay.com/photos/coronavirus-corona-mask-teenager-4970828/

https://www.pexels.com/de-de/foto/mann-person-hande-verwischen-3952248/

https://www.chartjs.org/docs/master/charts/bar

https://www.chartjs.org/docs/master/charts/doughnut

https://www.chartjs.org/docs/master/charts/line

https://de.statista.com/statistik/daten/studie/1097909/umfrage/sars-faelle-nach-laendern-weltweit-nach-geschlecht/

https://de.statista.com/statistik/daten/studie/1103905/umfrage/verteilung-der-corona-infektionen-in-deutschland-nach-geschlecht/

https://de.statista.com/statistik/daten/studie/1103904/umfrage/corona-infektionen-covid-19-in-deutschland-nach-altersgruppe/

https://de.statista.com/statistik/daten/studie/1097924/umfrage/sars-todesfaelle-nach-laendern-weltweit/

https://documenter.getpostman.com/view/10808728/SzS8rjbc#4b88f773-be9b-484f-b521-bb58dda0315c

https://api.covid19api.com/dayone/country/germany

https://momentjs.com/