Herzlichen Willkommen zum achten Türchen des AdvenTOOLender! Schön, dass du mit dabei bist. An diesem Tag möchte ich dir das Tool „StoryLine JS“ vorstellen. Mit ihm kannst du anhand von Zeiträumen und dazugehörigen Daten, eine interaktiven Zeitstrahl erstellen und damit Geschichten erzählen. 

Beispiel: Video-Aufrufe von BibisBeautyPalace

Seitdem ich selbst mit den YouTube-Videos angefangen habe, schaue ich auch vermehrt, was die großen, deutschen YouTuber*innen so für Inhalte auf ihren Kanälen hochladen. Mit zu meinen Lieblings-YouTubern gehören BibisBeautyPalace und Julienco. Die beiden hatten ein super spannendes Jahr 2018, in dem sie geheiratet, einen Sohn bekommen und in ihr neues Haus gezogen sind. All das haben sie für die Zuschauer mit der Kamera begleitet. Für das Beispiel habe ich mir nur den YouTube-Account von Bibi (Bianca Claßen, geb. Heinicke) angeschaut und zeige euch, wie viele Aufrufe sie so auf die einzelnen Videos bekommen hat und welche Geschichten sich hinter den Ausreißer-Werten verstecken:

Geeignete Themen

Mit dem Tool lassen sich natürlich auch noch journalistischere Themen betrachten. Wichtig ist, dass Daten-Werte und dazu entsprechende Zeiträume hast. Du wirst unten in der Anleitung sehen, dass diese beiden Inhalte für das Erstellen der „StoryLine JS“ zwingen notwendig sind. Weitere Themen-Ideen: Entwicklung der Einwohnerzahl über mehrere Jahre, Verkaufsumsätze/-einnahmen über mehrere Monate, Anzahl Touristen in einem Ort über einen bestimmten Zeitraum.

Ungeeignete Themen

Sobald du keine Daten oder nur Daten, aber keine Zeiträume dafür hast, lässt sich „StoryLine JS“ nicht nutzen. Ungeeignete Themen sind deshalb beispielsweise: Interviews, Ablauf des Fußballspiels am Wochenende, Ergebnisse von nur einer Wahl.

Die Schritt-für-Schritt-Anleitung

Wie das Tool funktioniert und du selbst so einen interaktiven Zeitstrahl bauen kannst, erkläre ich dir jetzt:

Abonniere meinen YouTube-Kanal gerne, wenn du möchtest. Das ist total kostenlos. Vielen Dank für deine Unterstützung! ♥️

1.) Lege dir einen Google-Account an, falls du noch keinen besitzen solltest. Gehe dann in dein Google-Drive und lege ein leeres Spreadsheet, also eine Tabelle an. Nur mit dieser kann das Tool arbeiten. Wie das Ganze aussieht, zeige ich dir auf Foto1. Um das Beispiel nachzumachen, stelle ich dir mein Spreadsheet auch hier zur Verfügung: „Daten: StoryLine JS Bibi Aufrufe“ 

2.) Wie auf Foto 1 deutlich wurde, benötigst du eine Spalte mit den Daten, mit den dazugehörigen Werten (hier Aufrufe), dem Titel und Text. Gerade beim Datum ist es wichtig, dass es auf eine bestimmte Weise formatiert ist, dass das Tool es gleich erkennt. Meine Variante ist eine der Möglichkeiten. Solltest du so ein Dokument in deinem Google-Drive vorliegen haben, gehst du auf die Homepage von „StoryLine JS“.

3.) Oben befindet sich ein großer, grüner Button, auf dem „Make a Storyline“ steht. Klicke darauf. Dadurch gelangst du zu einer Übersicht, die dir die benötigten drei Hauptschritte erklärt, die du benötigst, um eine „Storyline JS“ zu erstellen:

• Füge deine Daten in ein Google Sheet (das hast du schon gemacht, auf der Homepage siehst du noch einmal genauere Details dazu)
• Füge deine Geschichte hinzu
• Konfigurieren und veröffentlichen

4.) Du musst jetzt mit deinem Google Spreadsheet weiterarbeiten. Dafür gehst du auf dein Dokument und dort auf „Datei > Im Web veröffentlichen“ (siehe Foto 2). Dann klickst du, ohne weitere Eingaben zu tätigen, auf „Veröffentlichen“. Klicke dann wieder auf dein Dokument und kopiere die URL deines Dokuments. Im Fall des Bibi-Beispiels ist es (ohne Anführungszeichen): „https://docs.google.com/spreadsheets/d/14GnGm60JunN5eyDyBYjmiRPjucCGoWke60Ql1bayo0k/edit#gid=0“ 

5.) Blättere auf der Homepage weitere nach unten, bis du zum „Configure your Story“-Bereich kommst (siehe Foto 3). Dort triffst du alle weiteren Einstellungen: 

• • Füge deine URL zum Google Sheet in die Zeile ein und klicke danach auf „Load“.
  • Bei „Time“ gibst du an, in welcher Spalte sich dein Datum befindet. Hier ist das „date“. Die Formatierung des Datums ist „2017-06-05“. Hier siehst du verschiedene Möglichkeiten. In deinem Spread-Sheet darf es nur auf eine dieser Arten angegeben sein. Wenn du das falsch machst, wie ich zuerst, und zum Beispiel „01.12.18“ in der Tabelle steht, kommt der „Only one value can be null“. Formatiere das also richtig.
  • Bei Data wählst du auch, wie deine Spalte mit den statistischen Werten heißt und wie sie auf der y-Achse beschriften sein sollen. Im Beispiel: „data“ und „Aufrufe (Mio.)“
  • Bei den Story-Cards stellst du ein in welcher Spalte sich der Titel („title“) und wo der Text („text“) befindet. Und darunter stellst du ein, wie das Datum auf der X-Achse angezeigt werden soll. Das ist bei unserem Beispiel hier „2017“. Dir ist vielleicht schon aufgefallen, dass aber der Monat und „18“ für „2018“ angezeigt wird. Da habe ich im Embed-Code einer Veränderung vorgenommen (siehe Foto 4). Dort habe ich angegeben, dass die Daten, die in der Grafik auf der X-Achse angezeigt werden, so aussehen: „Monat-18“, also im Februar 2018: 02-18. Das ist durch den blau markierten Teil beim chartDateFormat passiert. Der Grund für die Änderung: Im Beispiel ist nicht genügend zeitlicher Abstand zwischen den einzelnen Videos, da Bibi jeden Donnerstag und Sonntag (zumindest vor der Geburt ihres Sohnes) ein neues Video veröffentlicht hat. Deshalb hat sich das lange Datum mit den anderen Tagen überlagert und sah auf der X-Achse nicht so schön aus.

• Nach diesen Eingaben klickst du auf „Create Storyline“ und erhältst die Vorschau, den Link und den Embed-Code. Solltest du nicht zufrieden mit der Ansicht sein, liegt es häufig an deinem Google Sheet. Denn, es gelten folgende, weitere Regeln:
  • es gehen nur maximal 12 dieser Story-Cards mit Erklärung
  • die Titel dürfen maximal aus 54 Zeichen bestehen
  • bei den Texten der Story-Cards sind es maximal 200 Zeichen
  • das Unternehmen selbst sagt, dass das Ganze am besten funktioniert, wenn du weniger als 800 Daten-Werte hast

Weitere Beispiele

Auf Twitter habe ich ein paar Beispiele für euch rausgesucht, die weitere Themen und Umsetzungen mit „StoryLine JS“ zeigen. Das Tool lässt sich beispielsweise ziemlich gut im Unterricht nutzen:

Check out Storyline JS – Turn Your Spreadsheets Into Stories by Free Technology for Teachers https://t.co/5OWx00PWMX pic.twitter.com/I8MMYftxFp

— Edunista (@Edunista1) April 26, 2018

Storyline JS from the knight lab. https://t.co/vdO9zaHEf7 An open-source tool that enables anyone to build an annotated, interactive line chart simply by using an already created Google Sheet template. pic.twitter.com/nM75vbQhGM

— Leslie Fisher ✂️👩🏻‍🦳 (@lesliefisher) March 28, 2018

---

Mehr vom AdvenTOOLender

Türchen 24: Mit „MyAdvent.net“ einen Adventskalender erstellen – AdvenTOOLender 2018

Türchen 23: Interaktive Videos mit „Ekostudio“ erstellen – AdvenTOOLender 2018

Türchen 22: „TapeWrite“: Audios mit Slider-Elementen visualisieren – AdvenTOOLender 2018 

Türchen 21: Mit „Datawrapper“ Daten visualisieren | #ddj – AdvenTOOLender 2018

Türchen 20: Mit „Interview JS“ einen Chatbot erstellen – AdvenTOOLender 2018

Türchen 19: Mit „Story Spheres“ 360°-Bilder mit Audios verknüpfen – AdvenTOOLender 2018

Türchen 18: „Timescape“ für Storytelling auf interaktiver Karte – AdvenTOOLender 2018

Türchen 17: Interaktive (Insta-) Stories & Umfragen mit Apester – AdvenTOOLender 2018

Türchen 16: Stories erzählen mit „Wakelet“ und Social Media – AdvenTOOLender 2018

Türchen 15: Interaktiven Zeitstrahl mit „Timeline JS“ erstellen – AdvenTOOLender 2018

Türchen 14: Mit „Brackify“ Umfrage-Battles erstellen – AdvenTOOLender 2018

Türchen 13: „Account Analysis“ für Twitter-Daten – AdvenTOOLender 2018

Türchen 12: News-Quiz erstellen mit Genial.ly – AdvenTOOLender 2018

Türchen 11: Genial.ly für interaktive Bilder – AdvenTOOLender 2018

Türchen 10: Wortwolken als Design-Option und Analyse-Tool – AdvenTOOLender 2018

Türchen 9: SoundCite JS für Audios im Text (Inline) – AdvenTOOLender 2018

Türchen 7: Storrito für Instagram-Stories vom PC – AdvenTOOLender 2018

Türchen 6: „Steller“ für Fotoalben mit Story – AdvenTOOLender 2018

Türchen 5: Mit Canva schnell schöne Designs erstellen – AdvenTOOLender 2018

Türchen 4: Gifs erstellen mit dem Data Gif Maker – AdvenTOOLender 2018

Türchen 3: Vorher-Nachher-Bilder mit Juxtapose JS – AdvenTOOLender 2018

Türchen 2: Audios visualisieren mit SpareMin Headliner

Türchen 1: Interaktive Grafiken mit Infogram – AdvenTOOLender 2018

---

Du hast noch Fragen zu StoryLine JS, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.